BS Grid Basic
Bootstrap Grid System
Bootstrap’s grid design supports up to 12 columns per page.
If you don’t want to use all 12 columns separately, you can join them together to make larger columns:
Bootstrap’s grid architecture is responsive, and the columns re-arrange automatically based on screen size.
Grid Classes
The Bootstrap grid system includes four classes:
- xs (for phones with displays less than 768px wide)
- sm (for tablets with screens equal to or more than 768 pixels wide)
- md (for small computers with screens equal to or more than 992 pixels wide)
- lg (for laptops and desktops with screens equal to or more than 1200 pixels wide)
The classes listed above can be combined to produce more dynamic and adaptable layouts.
Basic Structure of a Bootstrap Grid
The following is the fundamental structure of a Bootstrap grid:
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>
First, build a row (<div class=”row”>). Then, include the necessary number of columns (tags with the appropriate .col-*-* classes). Remember that the numbers in .col-*-* should always add up to 12 for each row.
Below are some examples of basic Bootstrap grid layouts.
Three Equal Columns
The following example demonstrates how to achieve three equal-width columns beginning with tablets and scaling to huge desktops. On mobile phones or devices that are less than 768 pixels wide, the columns will automatically stack:
Example
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
Two Unequal Columns
The example below demonstrates how to achieve two columns of varying widths that begin at tablets and expand to huge desktops:
Example
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
Tip: You will learn more about Bootstrap grids later in this tutorial.
