WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Bootstrap Grids


Bootstrap Grid System

Bootstrap grid system can support up to 12 columns across the page.

You do not want to use all 12 column individually, you can group the columns together to create wider columns:

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
 span 2  span 2  span 2
span 4 span 6
span 8 span 8
span 12

Bootstrap's grid system is responsive, and the columns will re-arrange automatically depending on the screen size.


Grid Classes

When the classes can be combined to create more dynamic and flexible layouts.

The Bootstrap grid system has four classes:

  • md (for desktops)
  • lg (for larger desktops)
  • xs (for phones)
  • sm (for tablets)

Basic Structure of a Bootstrap Grid

The below example is a basic structure of a Bootstrap grid:

<div class="row">
  <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; create a row (<div class="row">. Then, we can add the desired number of columns it is a .col-*-* classes).

We discuss about Bootstrap grid layouts.


Three Equal Columns

.col-sm-5
.col-sm-5
.col-sm-5

The below example will show how to get a three equal-width columns starting at tablets and scaling to large desktops. where mobile phones the columns will be automatically stack:

Example

<div class="row">
  <div class="col-sm-5">.col-sm-5</div>
  <div class="col-sm-5">.col-sm-5</div>
  <div class="col-sm-5">.col-sm-5</div>
</div>
Try it Yourself »

Two Unequal Columns

.col-sm-6
.col-sm-10

The below example will shows how to get two various-width columns starting at tablets and scaling to large desktops:

Example

<div class="row">
  <div class="col-sm-6">.col-sm-6</div>
  <div class="col-sm-10">.col-sm-10</div>
</div>
Try it Yourself »