Bootstrap - Container and Grid System

Bootstrap

← Prev Next →

In this tutorial we will learn about Bootstrap containers and grid system.

Containers

In Bootstrap it is required that we wrap the website content and grid system inside a container.

We create containers using the two classes that Bootstrap provides.

We use .container if we want a responsive fixed width container.

<div class="container">

	<!-- some more html goes here -->
	
</div>

We use .container-fluid if we want responsive full width container that takes up the entier width of the viewport.

<div class="container-fluid">

	<!-- some more html goes here -->
	
</div>

Containers must not be nested.

Grid System

We use the Bootstrap grid system to create rows and columns to house our content.

Following are the points that we have to keep in mind when creating the grid system.

We use .row to create horizontal groups for columns.
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
Only columns .col-* may be immediate children of the row.
Content must be placed inside columns.
Each column has gutters (gaps between column content) via padding.
A row can contain 12 columns.
If there are more than 12 columns inside a row then extra columns will wrap onto a new line.
To create columns we use classes like .col-xs-12 and .col-sm-4 etc.

Grid options

The following table contains the different screen size and the classes we can use to create columns for the different screen size.

	Extra small devices Phones (<768px)	Small devices Tablets (>=768px)	Medium devices Desktops (>=992px)	Large devices Desktops (>=1200px)
Container width	None (auto)	750px	970px	1170px
Class prefix	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
No. of columns	12
Gutter width	30px (15px on each side of a column)

If we want a div to take 1 column then we will append 1 to the classes like .col-xs-1.

Creating container, row and columns

In the following example we are creating a container having a single row and 12 columns.

In a extra small device each div will take 12 columns. So, we are giving the .col-xs-12 class to the divs.

In a small device each div will take 3 columns. So, we are giving the .col-sm-3 class to the divs.

In a medium device each div will take 2 columns. So, we are giving the .col-md-2 class to the divs.

And for large device each div will take 1 column. So, we are giving the .col-lg-1 class to the divs.

The complete HTML code is given in my GitHub repository.

<div class="container-fluid">

	<div class="row">

		<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1 my-col">Div 1</div>

		<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1 my-col">Div 2</div>

		<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1 my-col">Div 3</div>

		<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1 my-col">Div 4</div>

		<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1 my-col">Div 5</div>

		<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1 my-col">Div 6</div>
		
		<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1 my-col">Div 7</div>
		
		<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1 my-col">Div 8</div>
		
		<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1 my-col">Div 9</div>
		
		<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1 my-col">Div 10</div>
		
		<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1 my-col">Div 11</div>
		
		<div class="col-xs-12 col-sm-3 col-md-2 col-lg-1 my-col">Div 12</div>

	</div>

</div>

I am using the .my-col class to style the columns.

Output

In a extra small screen each div is taking 12 columns so, there is 1 div in each line.

In small device screen each div is taking 3 columns so, there are 4 divs in each line

In medium device screen each div is taking 2 columns so, there are 6 divs in each line

In large device screen each div is taking 1 columns so, there are 12 divs in each line

← Prev Next →