Bootstrap 3.3.7 Grid System

The grid system is central to Bootstrap layouts. Understanding it gives you the foundation for responsive design.

What is the grid system?

One of Bootstrap’s greatest strengths is that it can automatically adjust layouts depending on screen size. The grid system is the key to that layout behavior.

A grid system divides content into blocks and places them into a row-and-column grid. On a wide PC screen, two blocks can be displayed side by side; on a narrow smartphone screen, those same blocks can be stacked vertically.

<div class="container">
  <div class="container-fluid">
    <div class="row">
      <div>Content</div>
      <div>Content</div>
    </div>
  </div>
</div>

container is the outer content area. container-fluid can be used for a full-width container. row creates a horizontal row, and column classes inside it control layout.

Containers

Add .container or .container-fluid to the top-level layout element.

Class	Description
`.container`	Creates a fixed-width layout.
`.container-fluid`	Creates a full-width layout.

.container uses responsive fixed widths: 100% below 768px, 750px from 768px, 970px from 992px, and 1170px from 1200px. .container-fluid uses 100% width regardless of screen width.

Width adjustment classes

The most important part of the grid system is the class assigned to content inside a row. The class has the form col-type-number.

Type	Size	Main devices
`lg`	1200px or wider	PC, tablet
`md`	992 to 1200px	tablet
`sm`	768 to 992px	tablet
`xs`	below 768px	smartphone

The number indicates how many of the 12 grid columns the content occupies. For example, 6 and 6 divide a row in half, while 4 and 8 create a 1:2 ratio. If the total exceeds 12, the following content wraps to the next row.

<div class="container">
  <h1>Grid System</h1>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-4">MENU</div>
      <div class="col-sm-8">Content.</div>
    </div>
  </div>
</div>

Supporting multiple screen sizes

Prepare classes for each device width you want to support.

<div class="row">
  <div class="col-lg-2 col-md-3 col-sm-4 col-xs-12">MENU</div>
  <div class="col-lg-10 col-md-9 col-sm-8 col-xs-12">Content.</div>
</div>

Type	Size	Ratio
`lg`	1200px or wider	2:10
`md`	992 to 1200px	3:9
`sm`	768 to 992px	4:8
`xs`	below 768px	12:12, each block on its own line

This lets the menu keep a reasonable width while the content area expands. On smartphones, the content appears below the menu.

Offset and visible classes

The grid system also provides utility classes for adjusting display.

Offset

Offset classes add empty space before a block.

class="col-md-offset-1 col-md-3"

This leaves one grid column empty before showing content that occupies three columns.

Visible

Visible classes show content only at a specific device width.

class="visible-md-block"

This element is displayed only at the md width, from 992px to 1200px.

Using offset and visibility classes together makes it possible to change layouts for smartphones, tablets, and PCs. The grid system alone is a strong reason to use Bootstrap.