India : +91 738 333 7777 | USA/Canada : +1 343 300 0044

Learn the Bootstrap Grid in 15 Minutes

Bootstrap is the most widely used frontend framework right now. When it comes to building responsive websites and apps, it’s the first choice of both professionals and hobbyists because of how simple it is to work with. Anybody who knows HTML, CSS and a bit of JavaScript can learn Bootstrap in no time.

In this quick lesson we’re going to cover the grid system, one of the fundamental concepts every Bootstrap developer needs to master. It allows us to create responsive page layouts which can change and adapt depending on the screen size of the device the user is on.

1. Rows and Columns

The grid consists of rows and columns. This allows us to freely position elements vertically and horizontally.

Rows are block level. This means, that when we create a row, it takes up the entire width of the element it is in. You can think of rows as new lines in your layout.

The horizontal alignment in the grid is done via columns. Only columns can be the direct children of a row and all content should go inside them. Placing content directly within a row will break the layout.


Some content
Content Goes Here




    Learn the bootstrap grid in 15 minutes
First row, first column
First row, second column
Second row, first column
Second row, second column
Second row, third column

Note: Rows and columns have a special relationship. Columns have 15px left and right padding so that their content is properly spaced out. However, this pushes the first and last column’s content 15px away from the parent. To compensate, the row has negative left and right 15px margins. This is why you should always place columns within rows.

2. Rows are Divided in 12

Rows are divided horizontally into 12 equal parts. When we place a column inside a row, we have to specify the number of parts it is going to take up.

This is done by applying a specific class .col-md-NUMBER, where NUMBER can be an integer from 1 to 12. Depending on the number, a column will occupy a percentage of the full row width: 6 will be 50% (12/6), 3 will be 25% (12/3) and so on. The following example should make things clearer:

Full width
25%
25%
50%




    Learn the bootstrap grid in 15 minutes
Full width
25%
25%
50%

3. Column Wrapping

We always have to take into consideration, that there are only 12 available spaces in a line. If we sum up the space required by a couple of adjacent columns, and the result exceeds 12, the last columns in that group will have to move to the next line. Let’s take a look at a practical example:

The first two columns have sizes of respectively 8 and 4 (8+4=12), which makes the first line full. There isn’t enough space for the third cell there, so it will have to wrap to the next line.

This column will move to the next line.




    Learn the bootstrap grid in 15 minutes
8
4
9

4. Screen Size Classes

Remember when we wrote .col-md-NUMBER in step 2? That -md- stands for medium. Bootstrap has a number of these classes for different screen sizes:

  • xs – Extra small screens like smartphones. Use it as .col-xs-NUMBER
  • sm – Small screen devices like tablets. .col-sm-NUMBER
  • md – Medium sized screens such as low dpi desktops and laptops. .col-md-NUMBER
  • lg – Large, high resolution screens. .col-lg-NUMBER

Bootstrap takes the screen resolution and dpi into account when deciding which classes are active (learn more here). This is a powerful way how to control how layouts render on different devices.

When we define a rule for any device size, this rule will be inherited and applied to all bigger sizes, unless we overwrite it by supplying a new one. Hit the Run button on the following example and try resizing your browser to see the layout adapt.

Try resizing the browser to see this text and the image rearrange for optimal viewing.





    Learn the bootstrap grid in 15 minutes

Try resizing the browser to see this text and the image rearrange for optimal viewing.

On extra small screens both the text and the image take up the whole width of the row.

When the browser size gets into the medium category, they can move in together and share a single row. They only need half of the row, since there is more space horizontally on the screen.

5. Clearfix

In some scenarios, when a column has much more content and a bigger height then the ones after it, the layout will break. The columns will all pile up under each other, instead of moving to the next line as they should.

To prevent this, we add a helper div with the clearfix class. It will force all columns after it move to a new line, solving the issue.

A column much taller than the rest.




    Learn the bootstrap grid in 15 minutes
All columns are 6 units wide, but this one is too tall!
This column shoudln't be here.
This column shoudln't be here.
By adding a clearfix between the second and third columns, everything will go where it should.
All better now.

You can use Bootstrap’s responsive utility classes to control when clearfix is active.

6. Offsets Are Your Friend

By default, columns stick to each other without leaving any space, floating to the left. Any excess space remaining in that row stays empty on the right.

To create margins on the left of columns we can use the offset classes. Applying a .col-md-offset-2 class to any column will move it to the right, as if there is an invisible .col-md-2 cell there. You can have different offsets for the different screen sizes thanks to the xs, sm, md and lg prefixes.

You can use offsets to easily center columns:

col-xs-5 col-xs-offset-4
col-xs-9 col-xs-offset-2
col-xs-6 col-xs-offset-1
col-xs-4 col-xs-offset-1
col-xs-11 col-xs-offset-1
col-xs-10
col-xs-7
col-xs-5
col-xs-7
col-xs-10
col-xs-11 col-xs-offset-1
col-xs-11 col-xs-offset-1
col-xs-9 col-xs-offset-2
col-xs-5 col-xs-offset-4




    Learn the bootstrap grid in 15 minutes
col-xs-5 col-xs-offset-4
col-xs-9 col-xs-offset-2
col-xs-6 col-xs-offset-1
col-xs-4 col-xs-offset-1
col-xs-11 col-xs-offset-1
col-xs-10
col-xs-7
col-xs-5
col-xs-7
col-xs-10
col-xs-11 col-xs-offset-1
col-xs-11 col-xs-offset-1
col-xs-9 col-xs-offset-2
col-xs-5 col-xs-offset-4

7. Push and Pull

The push and pull classes allow us to reorder columns depending on screen size. Push moves a column to the right, and pull to the left. This is different from offset as push and pull use position: relative and don’t shift other columns.

Push and pull classes have the following format: .col-SIZE-push-NUMBER, and .col-SIZE-pull-NUMBER. Possible SIZE values are sm, xs, md and lg. This represents in which of the 4 screen size scenarios we want the swap to occur. NUMBER tells Bootstrap how many positions we want to move.

Hit Run on the code below and resize the pop-out to see how the two cells change places when the window becomes small.

On laptop and desktop screens this text will go to the right and the image will go to the left, changing places.




    Learn the bootstrap grid in 15 minutes
On laptop and desktop screens this text will go to the right and the image will go to the left, changing places.

Conclusion

Great job! You now know the most important part of the Bootstrap framework, and you’re ready to build your next stellar responsive design. But there is a bit more left to learn to achieve true mastery. Check out Bootstrap’s extensive documentation for more.

Presenting Bootstrap Studio

a revolutionary tool that developers and designers use to create
beautiful interfaces using the Bootstrap Framework.

Learn more

Related Posts

Leave a comment