Welcome to Bootstrap!

Bootstrap is a mobile first, open-source, front-end development framework that helps developers and designers to easily build responsive websites.

Image of Bootstrap logo

The 12 Column Layout

Bootstrap employs a 12 column layout to help easily establish a styles for a responsive website. By adding classes to your HTML elements, you can set how many columns each div will span (out of 12). These classes are as follows:

Bootstrap 12 column grid


col-xl-12 // class used for extra large devices ~ 1200px
col-lg-12 // class used for large devices like laptops ~ 992px
col-md-12 // class used for medium devices like tablets ~ 768px
col-sm-12// class used for small devices like mobile phones ~ 768px

Example of 12 Column Layout

<div class="sidebar col-sm-3">
  <ul>
    <li>My</li>
    <li>Sidebar</li>
    <li>Items</li>
  <ul>
</div>

.sidebar {
  width: 25%;
}

Example with Different Widths for Different Screen Sizes


.sidebar {
  width: 100%;
}


@media screen and (min-width:768px) {
  .sidebar {
    width: 25%;
  }
}

The Bootstrap Grid

Since websites are not newspapers, content is not exclusively broken out into columns. You will likely want to place your columns inside of rows as well. This is straight-forward with Bootstrap - simply nest your column divs in an element with the class row!

Bootstrap columns and rows

The Bootstrap Grid Examples

<!-- this could also be "container-fluid" -->
<div class="container">
  <div class="row">
    <div class="col-sm-3">
      Content 25% of page width
    </div>
    <div class="col-sm-6">
      Content 50% of page width
    </div>
  </div>
</div>
Column with 25% of content width
Column with 50% of content width

Bootstrap Grid Example 2

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>
1 of 2
2 of 2
1 of 3
2 of 3
3 of 3

Media Query Breakpoints


// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

 Previous Lesson Next Lesson 

Outline

[menu]

/