Bootstrap Grid Calculation Explained

I recently got this question about the Twitter Bootstrap grid.

On the bootstrap website it says column width 95px but ones I see are 98px just wondered could you shed some light on it?

Here is my response:

Let met start with this… when using Bootstrap for front end development you can adjust the grid however you please using LESS variables inside the variables.less file then recompiling the LESS to CSS. Those variables get recompiled into the bootstrap.css file to make the grid whatever size you want at various breakpoints.

Consider the containers

By default you have three layers of containers that comprise the BS grid each with unique classes: container, row, column. You also have multiple breakpoints to consider but for the sake of simplicity and your specific question, let’s just deal with the large 1170px size.

Containers. For devices over 1200px Bootstrap’s default grid “container” is 1170px wide. It has 15px of padding on either side making the inside of the container a total of 1140px due to the box-sizing CSS for all elements being set to border-box by default.

Rows. Inside of each container you have a row which is 100% wide. That should be 1140px wide but Bootstrap adds a negative margin to each row (-15px by default… or half the grid-gutter-width setting) making each row 1170px wide.

Columns. Inside of each row you get your columns. If you create a 12 column row then each column would be 97.5px wide. We all know that half-pixels don’t really exist so most browsers will round these columns to render as alternating 97px/98px columns to make up the full 1170px width.

The real answer… and some math

In the real world you will rarely actually use 12 columns in your layouts so you really just need to account for the proper size of each container. Bootstrap uses percentages for this in the mixins.less file. The @grid-columns variable is a setting in the variables.less file and defaults to 12. Also remember that there are no partial pixels so browsers will round.

Here is the LESS equation to calculate column widths:

width: percentage((@columns / @grid-columns));

For example:

  • 1 column / 12 grid-columns = 8.33% * 1170px = 97.5px
  • 2 columns / 12 grid-columns = 16.67% * 1170px = 195px
  • 3 columns / 12 grid-columns = 25% * 1170px = 292.5px
  • Etc…

I hope that helps shed some light on the Bootstrap grid. This also means that my Bootstrap PSD templates (and probably every other one you might find) are not pixel-perfect. But then again, we don’t live in a pixel-perfect web world anymore.