Student Tech Life: Chapter 5 - Bootstrap 3 - Grid on Mobile, Tablet and Desktop

How the grid column classes work in the different resolutions?

How can we use these classes for view on different resolution?

The above questions comes in mind when we learn the columns and offset classes. Now you will learn how you can user these classes as per need on different gadgets screens. Before you learn there are four standers for size, these standards work with whole the bootstrap elements. Fist we use these standards sizes with the columns and show you what the response of different screens. For example we have a fours columns row in our web page.

The requirements are:

1. In large screen desktop grater than equal to 1200px show these four columns in single row.
2. In medium screen desktop like laptop grater than equal to 992px visible all columns of row but max three columns will show in a single row others will automatically show in the next rows.
3. In small screen like tablet grater than equal to 768px visible all columns of row but max two columns show in a single row others will automatically show in the next rows.
4. In extra small screen like mobile less than equal to 768px visible all columns of row but only one column show in a row others will automatically show in the next rows.

Functional knowledge:

1. First take and container class div to contain all the document data.
2. Nest a row class div to group the columns class div.
3. Now nest four columns div within the row class div.
4. Create four different background-color classes with name of .red, .green, .blue, orange and us background color same as name of class.
5. Use different background color class for each column div.
4. Give each column div another class .col-lg-3 . After use this class, each row column occupy the four column space. and this row will show four columns withing single row. Because we divide twelve grid space in these four columns in large screen.
5. Use another class .col-md-4 for each row columns. after apply this class three columns will occupy twelve grid columns space in the medium screen and the fourth column will automatically response in the next row.
five Add another third column class .col-sm-6 for each row columns. after apply this class, two columns will occupy twelve grid columns space in the small screens and the another two column will automatically response in the next row. These another thwo columns will automatically occupy the twelve grid space within the next row.
6. Use another fourth class .col-xs-12 for each row columns. Using this new class you see in the mobile screen each column of the row will occupy full width of the screen. And each columns will automatically come in the single row.

<html>
<head>
<title>Bootstrap 3 Grid classes Introduction</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="css/style.css" rel="stylesheet">

<link href="css/bootstrap.min.css" rel="stylesheet">

<script src="https://code.jquery.com/jquery.js"></script>

<script src="js/bootstrap.min.js"></script>



<style type="text/css">
/* My custom override classes */
.container{padding-top: 10px;}
.row{margin-bottom: 10px;}
.row div{margin-top: 15px; margin-bottom: 15px; color: #fff;
font-weight: bold;font-size: 10px; min-height: 250px;}
.red{background-color: red;}
.green{background-color: green;}
.blue{background-color: blue;}
.orange{background-color: orange;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 red"></div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 green"></div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 blue"></div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 orange"></div>
</div>
</div>
<body>
</html>

Chapter 5 - Bootstrap 3 - Grid on Mobile, Tablet and Desktop

Students Tech Life