Learning Bootstrap Series: 1. Basics of the Grid System

Some Context, Bootstrap is a Responsive Design Framework that is created by twitter to create sites that render correctly in Mobile devices to Desktops alike

This series of blog posts is a learning series to provide more insight on how to use this framework

In this post, we will be learning how to use the bootstrap grid system

The grid system is used to create different layouts easily. The grid is composed of three main components

1. The container element
2. Rows
3. Columns housing the content

The container element can be a fixed width container element or a variable width container. The class used for a container element is ".container" and similarly we use the ".container-fluid" class for a full width variable container

Rows are the child elements of a container. The class is simple ".row"

Columns are the next descendants of row elements and your content goes within column elements.

Spacing between columns is given using padding

In Bootstrap, there can be at most 12 columns in a row within a grid. Depending on your specific requirement, you can define the column class and divide the columns accordingly

So if you want a two column layout, you could use a row with two columns: each with the class col-md-6 (12/6 =2 Columns)

Similarly, if you require a three column layout, use a class with col-md-4 (12/4 =3 Columns)

One thing to note is the abbreviation used here md. Bootstrap uses different abbreviations based on the specific device as mentioned below

1. xs: eXtra Small (Less than 768 pixels)
2. sm: SMall (769 - 991 pixels)
3. md: MeDium (992 - 1199 pixels)
4. lg: LarGe (Greater than 1200 pixels)

Source: Bootstrap Container Overview