Bootstrap grid system was confusing for me the first
time I used it. Recently I did some research to change the old CSS
framework that I usually use for my web projects. After long searches
and tests I decided that Bootstrap 3.0 it will be the best for me. I’m
still not fully happy about Bootstrap, mainly because the fact that the
menu does not accept multiple menu levels, but I have did some changes
to make it work as I want.
As I said, the problem which I encountered with Bootstrap was the
grid system. Although it is something logical, it was confusing for me
in the beginning and it took me some time to understand it so I can
benefit the maximum of all features.
Although Bootstrap has a special section dedicated to the grid system and also some good examples
of how to use it, I hope that this article will help those which are
still confused after reading those pages and hope to have Bootstrap 3
grid system explained.
Bootstrap grid system is based on 12 columns which are
percentage-based, which makes it responsive. The gutter between these
columns is 30px (15px on each side of a column) and it is actually the
column padding and not margin. Columns are included in rows to make
horizontal groups of columns. To make everything work properly, these
rows need to be placed within a .container. Bootstrap is a
mobile first CSS framework, which means that mobile first styles can
be found throughout the entire library instead of in separate files or a
separate section in the CSS file.
For the columns there are four class prefixes: .col-xs- (for extra small devices like phones – width < 768px), .col-sm- (for small devices like tablets – width ≥ 768px), .col-md- (for medium devices like desktops – width ≥ 992px) and .col-lg-
(for large devices like desktops – width ≥ 1200px). Each of these
classes have numbers from 1 to 12 attached to them, corresponding to
certain percentage values. For example we have .col-xs-1 with a width of 8.333333333333332%, .col-xs-2 with a width of 16.666666666666664%, .col-xs-3 with a width of 25% and so on to .col-xs-12 which has a width of 100%. For the other classes we have the same idea. For example we will have .col-sm-1 with a width of 8.333333333333332%, .col-sm-2 with a width of 16.666666666666664%, .col-sm-3 with a width of 25% and so on to .col-sm-12 which has a width of 100%.
So a piece of code will look like this:
A key aspect in understanding Bootstrap grid system is the fact
that, since Bootstrap is a mobile files CSS framework, the first classes
which are declared are .col-xs-* . The other three are
declared in media queries corresponding to the specific devices. In
other words, grid classes apply to devices with screen widths greater
than or equal to the breakpoint sizes, and override grid classes
targeted at smaller devices. For example, applying any .col-sm- class to an element will not only affect its styling on small devices but also on medium and large devices if .col-md- and .col-lg- classes are not present.
Are these still confusing for you? Don’t worry! Let’s see some examples!
A few examples to understand Bootstrap grid system
The first four examples will show you how every class behaves on
different devices. For a better understanding, every class has a
specific color which shows when it is actually applied and the grey
color shows that it is not applied. When a class is not applied, the
width of the column it is 100%.
The first example is showing how .col-xs- behaves on all devices. You will notice that it behaves the same on all devices because, remember, .col-xs-
is declared first and it is available for all devices, since the other
three are declared inside media queries and are available on certain
devices. See live example.
.col-xs- behaviour in Bootstrap grid system
The second example is showing how .col-sm- behaves on all devices. You will notice that it stays the same on all devices except on small devices (phones) because .col-sm- is declared inside media query: @media (min-width: 768px) {...}. See live example.
.col-sm- behaviour in Bootstrap grid system
The third example is showing how .col-md- behaves on all devices. The class is applied only on medium and large devices. That is because .col-md- is declared inside media query: @media (min-width: 992px) {...}. See live example.
.col-md- behaviour in Bootstrap grid system
The fourth example is showing how .col-lg- behaves on all devices. The class is applied only on large devices. That is because .col-lg- is declared inside media query: @media (min-width: 1200px) {...}. See live example.
.col-lg- behaviour in Bootstrap grid system
The next three examples will show different combinations of the four
classes and how they behave on all devices. Depending on the color you
will see which class is applied on every device. You will notice that
there is a mix of classes and also many columns have multiple classes
assigned. As we know, when multiple classes are assigned, the class
which it is applied first is the first on the right.
Please check the following example to see how mixed classes are working on various devices. See live example.
Mixed classes in Bootstrap grid system
The next example it is similar as above, but this time, as you will notice, some of the columns get stacked. See live example.
Mixed classes in Bootstrap grid system with stacked columns
The last example is a little more complex because it has nested
columns. To understand better don’t forget that the nested columns and
also percentage-based and they are calculated relative to their parent
and not the whole row. See live example.
Nested columns in Bootstrap grid system
Understanding offset, push, pull and column clearing
Besides the four classes we have reviewed above, there are also a few important things to know.
One thing is offset. When you apply an offset, this means to move columns to the right using .col-md-offset-* classes, or it can be .col-xs-offset-*,.col-sm-offset-*,.col-lg-offset-*. As you know, in place of * can be any number from 1 to 12.
So for example let’s consider this code:
The code will create a column of 25% (.col-sm-3 { width: 25%; }) width with a left margin of 25%(.col-sm-offset-3 { margin-left: 25%; }).
Push and pull are especially used when you need a specific column order.
For example this code:
This will create two columns, but, on the page, the second define
column will appear first and the first defined will appear second. That
happens because of .col-sm-push-5 { left: 41.66666666666667%; } and .col-sm-pull-7 { right: 58.333333333333336%; } .
But why would you want to modify the order of the columns? Imagine
that you have a blog and on the right sidebar you have a very important
subscribe form. You want that subscribe form to be showed on top of
content when you view the site on a mobile phone, so you change that
order.
Column clearing helps to clear floats at specific breakpoints.
Let’s take the following code:
You notice this <div>: <div class="clearfix visible-xs"></div>. This is the part which basically clears the floats on phones through .visible-xs class.
Conclusion
Bootstrap grid system might take a little time to learn and
understand, but once you get it you can create great layouts in a short
time. We need to take all advantage of all these classes. I’ve often
seen websites based on Bootstrap which only use .col-md-*
classes, which it is not the best practice. Hope that this article will
help those who were confused by all these classes and if you have any
questions please feel free to ask.
Comments
Post a Comment