Tutorial by Examples

Media Queries in Bootstrap allow you to move, show and hide content based on the viewport size. The following media queries are used in LESS files to create the key breakpoints in the Bootstrap grid system: /* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... } /...

In addition to the concept of column units, Bootstrap has different breakpoints or grid sizes known as tiers. The Bootstrap 3 grid has four (4) tiers to accomodate different screen (or viewport) widths. The Bootstrap 3 tiers are xs, sm, md, and lg. Bootstrap’s grid columns are identified by differen...

Bootstrap's grid system has 12 units known as Columns that can be used to layout content horizontally across the viewport. The reason for a 12-unit grid (instead of 10, 16, etc..) is that 12 evenly divides into 6 (halves), 4 (quarters) and 3 (thirds). This makes adapting to a variety of layouts muc...

Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Use .container class for a responsive fixed width container. <div class="container"> ... </div> Use .container-fluid c...

These classes increase the left margin of a column by * columns. For example, .col-md-offset-4 moves .col-md-4 over four columns. <div class="row"> <div class="col-lg-4"></div> <div class="col-lg-4 col-lg-offset-4"></div> </div&g...

<div class="container content"> <div class="row"> <!--Main Content--> <div class="col-lg-9 col-lg-push-3"> Main Content </div> <!--Sidebar--> <div class=&quot...