Photo (c) Patrick Hendry

Grid System of Bootstrap

Have you seen classes in website like “col-sm-5” or “col-md-4” or “col-lg-7” ?

If yes, that’s part of the grid system used in Bootstrap.

Actually, the first time I encountered it, it felt so complex. But when I studied it again, “Ooohhh… That’s it?”.

So don’t be overwhelmed. Just take it easy. And try to learn the basic classes of the grid system.

  1. container / container-fluid
  2. row
  3. col-sm-NUMBER
  4. col-md-NUMBER
  5. col-lg-NUMBER

I’ll do my best to use it and explain it here. Oh, right!

Container`

If your div has a class of container, it sets a specific width to your div for each break point. You can see the difference when you’re using the row, col-sm-NUMBER or col-md-NUMBER or col-lg-NUMBER classes.

A container div will also set a padding of 15 pixels to all sides.

Let’s see it later when we do the activity.

Container-fluid

If you add a class of container-fluid to your div, your div will always have a width of 100% as the size of the view port changes. But this will also give a padding of 15 pixels to all sides.

Row

If you’re going to use the col-SIZE-NUMBER classes, make sure to use them inside a div with a class of row.

This is a requirement to achieve the desired result with the col- classes.

Just a side note!

Each col- class is based on a 12 grid class. And each col- class has a specific width set by the Bootstrap.

If col-sm-5 is set for this div, the remaining width that can be set for another div or for divs is col-sm-7.

So 7 + 5 = 12.

You can also try col-sm-4, another col-sm-4 and another col-sm-4.

Col-sm-NUMBER

If the view port changes to a mobile screen, this class becomes active. What is means is that when your viewport is reduced to 576px, a 540px will be set to your row class. And that is the width that your columns will share.

Col-md-NUMBER

You can divide the width of your divs on this specific breakpoint.

When your view port increases to 768px, the space for your content will be 720px.

Col-lg-NUMBER

When your view port increases to 992px, the width set will be 960px.

There are more classes but these classes are the most common I’m using. If you want to learn more, click the link below.

You can get more information here.

So let’s combine them all!

Click this link to see the code.

Inside my div with a class of container, I have another div with a class of row.

And as I said, you need row class for your columns.

In my first div with a class of container, each div inside my row class has two classes: col-sm-4 and col-md-4. While in my second div with a class of container, it only has col-md-4.

If you look into my CodePen, you will see the difference. For the heading 1, my divs are displayed into three columns. But for the heading 2, my divs are stacked horizontally.

So why is it like that?

When your view port reduces to 576px, your columns will still remain as columns because you set it to col-sm-4. It means, each of your column will take up 1/3 of the width. And when the view port expands to 768px, your columns are still taking up 1/3 of the width because of col-md-4.

On the other hand, I didn’t add col-sm-4  in my heading 2. That’s why my columns will not take 1/3 of the width. They will just stack horizontally. This is like the default.

Go over to my heading 3.

Resize your browser into medium and then into large size.

When the viewport is 768px, my columns will take 1/3 of the width. But when the viewport increases to 992px, you can see that one column takes 1/2 and the remaining take 1/4 of the width.

They will take up space according to the number you set to each column.

And that’s it. That’s the idea of grid system of Bootstrap.

I hope that you can understand it.

Still, I recommend customizing and experimenting it to achieve your desired result.

Good luck!

 

Love,
Eirin

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s