Bootstrap grid system provides the quick and convenient way
to create responsive website layouts. The latest Bootstrap 4 version introduces
the new mobile-first flexbox grid
system that appropriately scales up to 12 columns as the device
or viewport size increases.
The Bootstrap Grid System Has 3 Main Parts: CRC
When
working with the Bootstrap 12 column grid you have to keep in mind the order of
elements and that there are always three parts: a Container,
a Row, and any number of Columns. CRC.
For example:
table
> tr > td is like .container > .row > .col-sm-6
Container – .container or .container-fluid
This is the
parent container that determines if the columns should be full-width or not.
Row – .row
A horizontal
wrapping container for the series of columns it contains. It essentially clears
the floated columns
Column – .col-*-*
A column is a
vertical division similar to a table cell. This is where your content goes and
has built-in margin to the left and right to prevent text and images from
touching each other. The default grid uses floating divs to achieve the
horizontal columns.
Bootstrap 5 Breakpoints
Columns also have grid tiers which
tell the columns how they should look at different breakpoints. In the example
below I used .col-sm-6 which essentially says, “When the browser
window is 576px or higher make this column span 6 of the 12 columns. For
anything below 576px make it full width.” So when you declare a grid tier you
are saying make it this size for the specified tier and up.
Bootstrap 4
includes predefined grid classes for quickly making grid layouts for different
types of devices like cell phones, tablets, laptops and desktops, etc. For
example, you can use the .col-* classes to create
grid columns for extra small devices mobile phones in portrait mode, similarly
you can use the .col-sm-* classes to create
grid columns for small screen devices like mobile phone in landscape mode, the .col-md-* classes for medium screen devices like tablets, the .col-lg-* classes for large devices like desktops, and the .col-xl-* classes for extra large desktop screens.
The
following table summarizes some of the key features of the new grid system.
Above table demonstrates one important thing, applying any .col-sm-* class to an
element will not only affect its styling on small devices, but also on medium,
large and extra large devices having screen width greater than or equal to
540px, if a .col-md-*, .col-lg-* or .col-xl-* class is not present. Similarly, the .col-md-* class will not
only affect the styling of elements on medium devices, but also on large and
extra large devices if a .col-lg-* or .col-xl- class is not present.
Now the question arises how to create rows and columns using
this 12 column responsive grid system. The answer is pretty simple, at first
create a container that acts as a wrapper for your rows and columns using
the .container class, after that create rows inside the container using
the .row class, and to create columns inside any row you can use
the .col-*, .col-sm-*, .col-md-*, .col-lg-* and .col-xl-* classes. The columns are actual content area where we will
place our contents. Let's put all these things into real action. Let's see how
it actually works:
