Understanding Bootstrap 3 Grids
In a previous post Twitter Bootstrap essentials were discussed. Today we'll survey an important part of the framework called grid.
Bootstrap grid is a structure which allows one to create page layouts. Grids can contain up to 12 columns in each row, if you place more than that, additional columns will be wrapped onto the next line. Moreover, each column can have a width of more than one, but the sum should be equal to 12 as is shown on the image below.
Bootstrap grid is a structure which allows one to create page layouts. Grids can contain up to 12 columns in each row, if you place more than that, additional columns will be wrapped onto the next line. Moreover, each column can have a width of more than one, but the sum should be equal to 12 as is shown on the image below.
For example, you could
have 12 columns of width 1 or 6 columns of width 2 or 2 columns of
width 6 or even 3 columns of widths 3, 6 and 3. It is important that
the sum should be equal to 12.
A snippet of code showing
a basic grid structure is shown below.
The grid, as well as all
site content, should be wrapped in a div
with a .container or
.container-fluid class.
Then everything that is to be placed into a grid should be divided
into rows an the content of rows should be subdivided into columns.
The only possible children of divs
with .row class are
columns. It is worth noting how the comments to mark the end of a
block are used in the Bootstrap examples section and in the snippet above.
When your blocks grow large, it will be easier to find the end of a
block and easier to read the code as a result.
What the magic asterisks
are in the snippet? They are placeholders. The second asterisk in
the construct col-*-*
stands in for numbers from 1 to 12 and denotes the number of columns.
Another asterisk has something to do with the width of the screen of
a device. Roughly devices can be subdivided into four categories:
phones, tablets, laptops and desktop. Bootstrap assigns the maximum
screen width for each category. If the width of a screen is less than
768px it is treated as an extra-small device or phone and xs
is used instead of a placeholder. If the width is greater than
768px it is a small device or tablet and sm
should be used. Then if width is greater than 992px it's a medium
device and md is used and
for large devices or desktops with with to the north of 1200px lg
is used instead of the first asterisk.
How are those col-*-*
used? The snippet below shows a simple Bootstrap grid example.
A several classes for a
single column could be used but in a particular order: from left to
right the smallest first and the sequentially the others in the order
of growing maximum screen width. If the xs
class is omitted, the full width is a default, that is all column
divs are stacked one above
another. If you use only the sm
class then for extra-small devices there would be only one column of
full width, and the prescribed number of columns for small, medium
and large, the same for all the latter. The interesting part is that
the subdivision into classes is based on “greater than” which
means that using a class for smaller device determines the behavior
for lager devices if otherwise is not specified.
If you would like to
redefine the behavior for extra small devices, you should explicitly
specify the number of xs
columns. In a nutshell, it is possible to define disparate number of
columns for each particular type of a device, but if you intend to
use the same number of columns for several device types, you should
include the class for the smallest one. For example, if you add only
a md class, it will define
the number of columns for medium and large devices. To change the
number of columns for large devices, lg
class should be added.
The example uses
Glyphicons
which are included in Bootstrap. To embed them into a page one should
use an i or a span
tag with an obligatory .glyphicon
class followed by the name of a particular icon. The third class,
.green, is defined in a
separate css-file to paint
an icon in green. As one can see from the snippet auto wrapping is
used when the total “width” of columns is greater than 12. The
example renders 2 columns for extra-small and small devices and 4
columns for medium and large devices.
To see all this in
practice your could click this link and preview in on
Bootsnip. To simulate a smaller device your could decrease the width
of your browser's window or use some useful browser extensions which
allow one to resize a window to “emulate” a device in a single
mouse click. If you use Google Chrome you could opt for Responsive
Web Design Tester
and in the case of Mozilla Firefox Firesizer add-on may suit
your needs.
Also, columns can be
nested, which means that a new div
with a .row class can be
placed into a div with
col-*-* class. The same
arithmetic with 12 columns applies to nested columns. The snippet below
shows the nesting of columns.
As with the examples above and below a demo can be previewed at Bootsnip. In the demo a wrinkle can be seen that is the height of an embedded column is larger than the one of the others. To mend it a clearfix is added in line 14 of a snippet below.
As with the examples above and below a demo can be previewed at Bootsnip. In the demo a wrinkle can be seen that is the height of an embedded column is larger than the one of the others. To mend it a clearfix is added in line 14 of a snippet below.
In addition one can
conceive of a situation when it is necessary to center some content
horizontally. Bootstrap 3 grid make it possible by a special
.col-md-offset-* class,
where an asterisk is a placehoder for a number which is a value of
the offset in terms of columns. The snippet below shows how to use
the offset to center a block.
Comments
Post a Comment