The Grid system is the "heart and soul" of a responsive design. Bootstrap uses a 12 column grid that are typically created in any combination of multiple of twelve (e.g., 12 columns, six two columns, four three columns, eight column and four columns, etc.). Columns will AUTOMATICALLY re-arrange themselves depending on the screen size. If more than 12 columns are used, they will stack no matter what the viewport size is.
Bootstrap's uses four classes for its grid system:
IMPORTANT NOTE: These values represent the SIZE where the columns will start STACKING VERTICALLY. Columns always stack on small device by design. Also, it is important to note that class scales up, so if you want to set the same widths for xs and sm, you only need to set xs class.
Bootstrap uses two classes when creating columns:
Typically, multiple columns with a specific class (e.g., col-md-3) are nested inside of a single row with a class of row. The numbers in the .col-sm-* classes indicates how many columns the div should span. For example, .col-sm-1 spans 1 column, .col-sm-4 spans 4 columns, etc. The column numbers in all of the rows should typically add up to 12:
<div class="row">
<div class="col-md-4">Column 1</div>
<div class="col-md-4">Column 2</div>
<div class="col-md-4">Column 3</div>
</div>
Bootstrap grid system specifications:
Phones (<768px) | Tablets (>=768px) | Desktops (>=992px) | Large Desktops (>=1200px) | |
---|---|---|---|---|
Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
Container width | None (auto) | 750px | 970px | 1170px |
Class prefix | .col-xs- | .col-sm- | .col-md- | .col-lg- |
Column width | Auto | ~62px | ~81px | ~97px |
They all have the following characteristics in common:
Examples:
For small devices (e.g., tablet and below), you may want to use a ratio of 25% (3 columns span) and 75% (9 columns span):
<div class="col-sm-3">....</div>For medium devices with 992 pixels to 1199 pixels (e.g., desktop and above), you may want to use a ratio of 50% (6 columns span) and 50% (6 columns span):
<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>
The example above will result in a 25%/75% ratio on small devices and a 50%/50% ratio on medium devices.
On very large devices, you may want to use a ratio of 33% (4 columns span) and 66% (8 columns span)
<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>
Notice that the first example has sm, the second has sm and md and the third has sm, md and lg.
SUMMARY: Using any .col-sm-* class on an element will affect its styling on small devices (e.g., screen size greater than or equal to 768px) as well as medium and large devices if .col-md-* and .col-lg-* class is not used. Likewise, the .col-md-* class will affect the styling of elements on medium devices as well as on large devices if a .col-lg-* class is not used. If more than 12 grid columns are placed within a single row, then each group of extra columns, as a whole, will wrap onto a new line.
The first row in the grid will have four columns of equal length. Each taking up about 25% of the width of the row each.
<div class="container"> <div class="jumbotron text-center"> <h1>RMCS:<small>Training Made Easy</small></h1> <p>See, hear and experience a new way of learning.</p> <a href="#" class="btn btn-danger">Watch Demo</a> <a href="#" class="btn btn-info">Schedule Class</a> </div> </div>
<!-- Main Content Row 1 ----------------------------- -->
<div class="container"> <div class="row"> <div class="col-md-3"> <img class="img-responsive img-circle" src="images/HTML5_logo.png" width="200" height="200" alt=""/> <h1 class="text-center">HTML Training</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, repellat, sit ut possimus...</p> <a href="#" class="btn btn-default">Read More...</a> </div> </div>
</div>
<div class="container"> <div class="row"> <div class="col-md-3"> <img class="img-responsive img-circle" src="images/HTML5_logo.png" width="200" height="200" alt=""/> <h1 class="text-center">HTML Training</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, repellat, sit ut possimus...</p> <a href="#" class="btn btn-default">Read More...</a> </div>
<div class="col-md-3"> <img class="img-responsive img-circle" src="images/CSS3_logo.jpg" width="200" height="200" alt=""/> <h1 class="text-center">CSS Training</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, repellat, sit ut possimus...</p> <a href="#" class="btn btn-default">Read More...</a> </div>
<div class="col-md-3"> <img class="img-responsive img-circle" src="images/JAVASCRIPT_logo.svg" width="200" height="200" alt=""/> <h1 class="text-center">JS Training</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, repellat, sit ut possimus...</p> <a href="#" class="btn btn-default">Read More...</a> </div>
<div class="col-md-3"> <h1 class="text-center">jQuery Training</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, repellat, sit ut possimus...</p> <a href="#" class="btn btn-default">Read More...</a> </div>
</div> </div>
</div>
.col-md-3 .img-responsive.img-circle { margin: 0 auto; }
<div class="col-md-3"> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">Secondary Menu</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Sub-menu 1-1</a></li> <li><a href="#">Sub-menu 1-2</a></li> <li><a href="#">Sub-menu 1-3</a></li> </ul> </li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> </ul> </div>
The second row in the grid will have two columns of equal length. Each taking up about 50% of the width of the row each.
</div>
<!-- Row 2 with 2 columns ------------- --> <div class="container"> <div class="row"> <div class="col-md-6"> <h1>Why RMCS</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis quod assumenda nisi.</p> </div>
</div>
</div>
<!-- Main Content Row 2 ----------------------------- --> <div class="container"> <div class="row"> <div class="col-md-6"> <h1>Why RMCS</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis quod assumenda nisi.</p> </div> <div class="col-md-6"> <h1>Objective</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis quod assumenda nisi.</p> </div> </div> </div>