How Bootstarp grid works

Twitter bootstrap is one of the most well-known frontend framework out there on the web. It is very easy to get started with and can greatly speed up one’s workflow. It’s a great tool to quickly create a mock-ups. Although many websites use bootstrap in production, I will not recommend using it directly in production for two reasons. First is semantics and the other is bloat. But that is a whole other topic for discussion.

For now let’s just focus on the topic we have on our hands right now. I’ve been perplexed at times by the grid system and how it works? There might be other people out there who face similar problems. So here I try to explain how it works.

The Grid

The grid consists of mainly three components, namely: container, row and columns. Lets have a look at them individually.

Container

The container is the foundation of the grid. It serves 2 purposes:

  1. To provide width constraint on resonpsive widths
  2. To provide padding to the content (shown in blue), so that they do not stick to the edge of the browser.
bootstrap-container

There are two types of containers available in bootstrap:

  1. Fluid Container: As the name suggests, it always spans the entire width of the browser. It can used by using .container-fluid class on a element.
  2. Responsive Container: It provides a width constraint to content depending on the width of the browser. It can used by using .container class on a element.
breakpoint container width
<768px None (auto)
≥768px 750px
≥992px 970px
≥1200px 1170px

Please avoid wrapping a .container within another .container or a .container-fluid within another .container-fluid

 

Row

A row serves as a wrapper for columns. The columns must add upto 12 within a row. It also clears the float of the columns. A row has a negative margin of 15px on both sides (shown in green) which negates the 15px padding provided by the container. This is necessary for columns to work correctly as we’ll see later.

bootstrap-row

Do not use .row oustide .container or .container-fluid

 

Columns

A row must have columns that add up to 12. A column has a 15px padding (shown in pink), which touches the edge of the container (due to negative margin on row), thus behaves similar to a container. The padding also acts as a gutter (of 30px) between columns

bootstrap-columns

Do not use .col-* oustide .row

The 15px padding (shown in pink) of a column, doesn’t allow the content to touch the edge of the browser and also acts as separator between columns

bootstrap-columns-content

 

Extra small devices
Phones (< 768px)
Small devices
Tablets (≥ 768px)
Medium devices
Desktops (≥ 992px)
Large devices
Desktops (≥ 1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-

Detailed usage of columns can be found here

 

Nesting


After setting up container(blue), rows(outer green) and columns(outer pink), new grids can be created using rows(inner green) straight away (you don’t need containers) because of the fact that columns behave the same way as the containers, providing 15px of padding to rows, which in turn negate them via their negative 15px margins.

bootstrap-nesting

In next post, I’ll continue this discussion with offsets, push and pull.

Leave a Reply