Bootstrap Grid

Bootstrap Grid System is mobile-first fluid grid systemwhich is made up of a series rows and columns to provide a structure to website and to place it’s content in the intersected areas easily.

The Bootstrap grid is a library of HTML/CSS components that allow you to structure a website and place a website’s content in desired locations easily. It appropriately scales up to 12 columns as the device or viewport size increases.

Container

A container is used to hold rows and columns. It is a simple <div> element with a class of .container. The container provides a proper width for the layout, acting as a wrapper for the content. There are two types of containers:-

1. .container is used for responsive fixed width containers. It also has different fixed widths in different sized devices.

Row

A row acts like a wrapper around the columns. It 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 is created by adding the class .row to a block level element inside the container and spans from the left edge to the right edge of the container element.

Finally, there’s no limit on the number of rows you can create.

Columns

Different column class prefixes are used by Bootstrap for different sized devices. These prefixes are shown below:-

Class Prefix

Device Size

.col-xs-

<768px

.col-sm-

768px to 991px

.col-md-

992px to 1199px

.col-lg-

≥ 1200px

The class .col-xs-12 creates a single column that spans across 12 virtual Bootstrap columns. Hence, this column’s width will be the width of the row. 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.

Grid Classes

Bootstrap grid system has four types of classes which can be combined to obtain more dynamic and flexible layouts.

Grid options

Below table summarizes on working of the bootstrap grid system in multiple devices .

Offset Columns

Offsets is useful feature for layouts. To use offsets for large displays layout, use the .col-md-offsets-* classes. These classes increase the left margin of columns by * columns where*range from 1 to 11.

classes .col-xs-offset-* doesn’t supports offsets but they are easily replicated by using an empty cell.

Two columns with two nested columns

We can create nested columns by inserting a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops with another two (equal widths) within the larger column.