In the last chapter you learned about the grid system and viewport screen resolution fundamental. Now this lesson will teach you about the grid classes. All the previous we learn about to implement that we need to learn the classes use to achieve this. The gird system need to implement proper in the structure look like table. We need to use a div as a table and nested div as a row in the table and again some nested div in it as the columns. So it look like a table structure but it not a table it is just for better understanding. Here some of the things we need to consider to use the bootstrap grid.
1. Before start all the layout first take a div with the class name of .container nested first in the body tag. And a div taken as a row must be nested within the .container class div. So there can be more than one div as row using class .row with the class .container .
2. Next is column divs as last chapter there are some css classes for the 12 grid columns And also for the offset classes to leave space left side of the div column. There is a table for the classes according to standard screen resolutions.
1. Before start all the layout first take a div with the class name of .container nested first in the body tag. And a div taken as a row must be nested within the .container class div. So there can be more than one div as row using class .row with the class .container .
2. Next is column divs as last chapter there are some css classes for the 12 grid columns And also for the offset classes to leave space left side of the div column. There is a table for the classes according to standard screen resolutions.
| Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px) |
|---|---|---|---|
| For columns * means use value 1-12 | |||
| .col-xs-* | .col-sm-* | .col-md-* | .col-lg-* |
| For columns offset * means use value 0-11 | |||
| .col-xs-offset-* | .col-sm-offset-* | .col-md-offset-* | .col-lg-offset-* |
2.1 - White background in above screenshot is the body color.
2.2 - Green color is container div nested in the body tag.
2.2 - Green color is container div nested in the body tag.
2.3 - Blue are the rows div nested in the container div.
2.4 - Red are the different div columns nested in the rows with white text (text are the class used ). Every row have the different column class to understand the system.
<head>
<title>Bootstrap 3 Grid classes Introduction</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- My own CSS -->
<link href="css/style.css" rel="stylesheet">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<style type="text/css">
/* My custom override classes */
.container{background-color: #00ff00;padding-top: 10px;}
.row{background-color: #1818BB;margin-bottom: 10px;}
.row div{background-color: #ff0000;margin-top: 15px; margin-bottom: 15px; color: #D24040;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-2">.col-md-2</div>
</div>
<div class="row">
<div class="col-md-3">.col-md-3</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-5">.col-md-5</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
</div>
<div class="row">
<div class="col-md-7">.col-md-7</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
</div>
<div class="row">
<div class="col-md-9">.col-md-9</div>
</div>
<div class="row">
<div class="col-md-10">.col-md-10</div>
</div>
<div class="row">
<div class="col-md-11">.col-md-11</div>
</div>
<div class="row">
<div class="col-md-12">.col-md-12</div>
</div>
</div>
<body>
</html>