Bootstrap
In this tutorial we will learn about Bootstrap containers and grid system.
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.
.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.
.container-fluid
<div class="container-fluid"> <!-- some more html goes here --> </div>
Containers must not be nested.
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.
.row
.col-*
.col-xs-12
.col-sm-4
The following table contains the different screen size and the classes we can use to create columns for the different screen size.
.col-xs-
.col-sm-
.col-md-
.col-lg-
If we want a div to take 1 column then we will append 1 to the classes like .col-xs-1.
.col-xs-1
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.
.col-sm-3
In a medium device each div will take 2 columns. So, we are giving the .col-md-2 class to the divs.
.col-md-2
And for large device each div will take 1 column. So, we are giving the .col-lg-1 class to the divs.
.col-lg-1
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.
.my-col
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