Using Boostrap Columns CSS
Getting started with Bootstrap’s Grid System
Bootstrap’s Grid System is made up of 3 things:
- A container
Creating a Container
Bootstrap’s grid system needs a container to hold rows and columns. A container is a simple
<div> element with a class of
.container. The container is used to provide a proper width for the layout, acting as a wrapper for the content.
Take a look at the following CodePen demo:
Here the container element wraps the content and sets left and right margins. It also has different fixed widths in different sized devices. Have a look at the following table:
|Device Width||Container Width|
|1200px or higher||1170px|
|992px to 1199px||970px|
|768px to 991px||750px|
|Less than 768px||auto|
You can choose a fluid container if you are not fond of a fixed layout. To do this, you use the class
.container-fluid. A fluid container has no fixed width; its width will always be the width of the device.
Just note that both fixed and fluid containers have padding of 15px on the left and right sides.
Creating a Row
A row acts like a wrapper around the columns. The row nullifies the padding set by the container element by using a negative margin value of -15px on both the left and right sides.
A row spans from the left edge to the right edge of the container element. It is created by adding the class
.row to a block level element inside the container.
Have a look at the following CodePen:
In this demo, you can see the text touching the left edge of the container element. This is because the container’s padding has been removed by the row due to the negative margins on the row.
Finally, there’s no limit on the number of rows you can create.
Bootstrap uses different column class prefixes for different sized devices. These prefixes are shown in the table below:
|Class Prefix||Device Size|
|.col-sm-||768px to 991px|
|.col-md-||992px to 1199px|
So, let’s create our first Bootstrap column:
In the above demo, I used the class
.col-xs-12 to create a single column that spans across 12 virtual Bootstrap columns. Hence, this column’s width will be the width of the row.
In the above demo, you will also see the 15px padding reappear to push the element away from the container. This is because every column in Bootstrap has a padding of 15px.
You must be wondering why I used the class prefix that belonged to extra smaller devices, which is
.col-xs-. In Bootstrap, if a column is defined for a particular type of device then it is guaranteed to behave similarly in larger devices as well. Therefore, a column defined for extra smaller devices will work in all types of devices.
Let’s now create a 2-column layout for smaller devices and check out its behaviour in larger devices and extra-small devices. We will use the class prefix
.col-sm- here. To create 2 columns of equal widths, we should assign 6 virtual Bootstrap columns to each one of them. This way, we maintain the limit of 12 virtual Bootstrap columns for a single row.
Here’s the demo:
Nesting with the Grid System
Nesting is one of the ways to create complex designs using Bootstrap’s grid system. It is also the one section where many first-timers have trouble.
We understand that to use Bootstrap’s grid system, we need 3 things: A container, rows, and columns. So to nest a grid system within a column we will need the same three things. But the only difference is that the container is already defined. In this case, the columns will behave as the containers for the nested grid system.
Here’s the logic: The containers provide 15px of padding, which is nullified by the row. Then we define columns that again have 15px of padding on the left and right side. So, to nest a grid system within a column, we simply need rows and columns. No
.container-fluid elements are necessary for a nested grid system.
Here’s an example of a nested grid system:
Bootstrap provides various helper classes that can be useful in certain situations in dealing with grids. These classes are:
.clearfix: Normally used to clear floats, adding this class to any column will make it shift to a new row automatically, to help you correct problems that occur with uneven column heights.
- Offsetting columns: You don’t have to occupy all 12 of the virtual columns. You can use offset classes like
.col-md-offset-*to leave a particular number of virtual Bootstrap columns to the left of any column (kind of like invisible place holders).
- Reordering: Use classes like
.col-md-pull-*to shift a column to the right or left, respectively.