Bootstrap Grid system

What Is a Grid?

A grid is considered as a 2 dimensional structure which is created by a number of horizontal and vertical lines. In web designing, grid system is widely used for the layout and structure. We can use grid system in web designing along with HTML and CSS to create the required layout.

What is Bootstrap Grid system?

Bootstrap has a responsive grid system and it is used to create semantic layouts. A grid system in bootstrap can scale up to 12 columns. A grid system of bootstrap also has already defined classes which are used to provide more layout options. As bootstrap 3 is considered as mobile first, it means that the target of a bootstrap code is to fit in the smaller screen that is screen of mobile, then tablets, etc. This then expands to fit in the larger screens which include laptops and desktops etc.

Mobile First strategy:

The following things should be coded correctly to obtain the mobile first and responsive web page by using bootstrap:

Content: Content is important as it is used to determine that what is most important.
Layout: The layout should be so designed that it fits the smaller width first that is the screen of mobiles and tablets etc., the media queries address and base CSS address is used for mobile first website (smaller screens).
The next thing is the enhancement of website. This can be done by adding different elements as the size of the screen increases.

Working of Bootstrap Grid System:

As described above that a grid system in Bootstrap is used to create the layouts of page by using horizontal and vertical lines or by using a number of rows and columns. These lines or rows or columns are used for the content of the website. Consider the following points which show that how the grid system of bootstrap works:

For the alignment and padding we place rows inside the .container class.
The rows are used for the creation of columns. These columns are in the horizontal groups.
The content is then placed inside the columns. These columns can also be considered as the children of the rows:
For grid layout we have a predefined class of grid such as .row etc. For more advanced and semantic layouts there are also less mixins.
The gutters or the spaces between the column content are created by columns through padding. The padding is considered as the offset for the first and the last column in rows, this is done by using the negative margin on the predefined .rows class.
Then the grid columns are created. These can be created when we specify the number of columns. It should be noted that there are 12 columns that are available.

Media Queries:

A Media query is a term that is used for “Conditional CCS rule” which has CSS styles and that will be based on some conditions. If the condition is met then the CSS styles will be applied on the page. To set the page according to the size of the screen we use media queries in bootstrap, this will make able to show or to hide the content in the page. The following are some of the media queries that are used for the LESS files in the grid system of bootstrap:

For small devices:

For small devices which include tablets etc. of 786px and more we have media query as follows:

@ media (min- width: @ screen –sm- min) { … }

For medium devices:

For medium devices which include desktops etc. of 992px and more we have media query as follows:

@ media (min- width: @ screen- md- min) { … }

For large devices:

For large devices which include desktops etc. of 1200px and more we have media query as follows:

@ media (min- width: @ screen –lg- min) { … }

For devices such as mobile phones or the devices of less than 786px we do not have any media query because bootstrap is mobile first and this is default.

We can also expand these media queries for a maximum width like above media queries are for minimum width of the page, the advantage of expanding media queries is that the CSS can be limited to such devices that have a narrow width.

For extra small devices:

For extra small devices which include devices of less than 786px we have media query as follows:

@ media (max- width: @ screen- xs- max) { … }

For small devices:

For small devices which include tablets etc. of 786px and more we have media query as follows:

@ media (min- width: @screen- sm- min) and (max- width: @ screen –sm- max) { … }

For medium devices:

For medium devices which include desktops etc. of 992px and more we have media query as follows:

@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { … }

For large devices:

For large devices which include desktops etc. of 1200px and more we have media query as follows:

@ media (min- width: @ screen –lg- min) { … }

In this way the minimum and the maximum width of the page can be set by using the media queries. It should be kept in mind that there are two parts of media queries which include the specification of devices and the size.

Grid Options:

Consider the following table in which various options of grid in bootstrap for different devices are shown:

	Extra Small	Small	Medium	Large
Behavior of Grid	Grid is horizontal all the time	Grid is horizontal above the breakpoints	Grid is horizontal above the breakpoints	Grid is horizontal above the breakpoints
Maximum width of Container	Default in bootstrap	Maximum width is 750px	Maximum width is 970px	Maximum width is 1170px
Class prefix	.col-xs-	.col-sm-	.col-md-	.col-lg-
Number of columns	12	12	12	12
Maximum width of Column	Auto (default in bootstrap)	60px	78px	95px
Width of gutter	maximum width of gutter is 30px, on each side of the column we have 15px	maximum width of gutter is 30px, on each side of the column we have 15px	maximum width of gutter is 30px, on each side of the column we have 15px	maximum width of gutter is 30px, on each side of the column we have 15px
Nestable	Yes	Yes	Yes	Yes
Offsets	Yes	Yes	Yes	Yes
Ordering of Column	Yes	Yes	Yes	Yes

Basic Grid Structure:

Consider the following code which is an example of the basic structure of the grid:

CODE:

< div class = “row” >
< div class = “col- * – *” >< /div >
</ div >
< div class = “row” >
< div class = “col- * – *” >< / div >
< div class = “col- * – *” >< / div >
< div class = “col- * – *” >< / div >
< / div >
< div class = “row” >
…
< / div >

In the above code, a row is created first and then the required number of columns is inserted. It should be noted that the number of columns should not exceed 12.

Responsive Columns resets:

In bootstrap it is recommended to use responsive column reset because there are four grids available in series and in some breakpoints the columns may not be clear that is some columns are taller than other etc. To avoid this we use .clearfix class and other responses classes. Consider the following code in which we have used the .clearfix class and other responsive classes to set the columns:

CODE:

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Example</title>

<linkhref=”/bootstrap/css/bootstrap.min.css” rel=”stylesheet”>

<scriptsrc=”/scripts/jquery.min.js”></script>

<scriptsrc=”/bootstrap/js/bootstrap.min.js”></script>

</head>

<body>

<p>

In Colorado there are different snows each year. In a good years snow there are no skiing problems as well as no water problems. But if the snow is bad, it can affect the industry of ski, it can also affect the waters of that land. Around the world water is obtained by drilling deep holes in the ground and then it is connected with an electric motor.

</p>

</div>

<p>

This water is brought to surface of the Earth. This water can be Thousands of years old. In Colorado 100% of the water that people use in their houses for drinking and all the other purposes comes from the mountains of Colorado. The snow is melted first and then it runs down the mountains and stored in large water reservoirs.

</p>

<p>

There are saturators that provide air and pressurize the water. The water absorbs the air and it removes the unwanted particles from the water. The bubbles from water rise and the dirt particles from the water rise to the surface and then removed.

</p>

</div>

<p> The coagulation process happens that is used to remove all the dust particles from the water but it is not enough to make this water capable to drink. </p>

</div>

<p>We can still see particles floating on the water. The last step to clean the water in filtration. In this step the water is passed through a filter bed which further cleans the water and it is ready to drink.

</p>

</div>

</body>

</html>

The above code will result the following:

OUTPUT:

ready to drink

In the above code we used clearfix class and through which it is cleared that this element is visible to only to a certain device width for example visible-xsshows that element is visible to extra small device that is mobile phone. In the above code we used the div tag to specify the column width and the background color of the columns and also the border of the columns.

It should be noted that there are four classes of grid system in bootstrap that are xs (extra small), sm (small), md (medium), and lg (large).

Offset Columns:

In bootstrap, the offsets are considered as features of enhanced and specialized layouts.Offsets are used to adjust columns. The class that is used to support offset on large screen is: .col – md – offset – *. This class is used to increase the left margin of the column and the range to increase the margin is from 1 to 11. Consider the following example in which we use col – md – 8 and this can be centered by using col– md- offset-4:

CODE:

< !DOCTYPE html >

<html>

<head>

<title> Bootstrap Example < /title >

</ head >

<body>

< h1 > Offset Columns < /h1 >

<div class = “col- xs – 8 col- md- offset- 4” style = “background-color: #00bfff;

box- shadow: inset 2px -2px 2px #444, inset -2px 2px2px #444;” >

< p > In Colorado there are different snows each year. In a good years snow there are no skiing problems as well as no water problems. But if the snow is bad, it can affect the industry of ski, it can also affect the waters of that land. Around the world water is obtained by drilling deep holes in the ground and then it is connected with an electric motor. < /p >

< / div>

< /div >

< / div>

< / body >

< / html>

The above code will generate the following result:

OUTPUT:

Nesting Columns:

The content in the page can also be nested by using .row. If the user wants to nest columns that is a column inside another column then he can use col – md- * column inside another col- md- * column. It should be noted here that there should be maximum 12 columns that should be added.

Consider the following example in which we have inserted a column inside another column, we divided the second column into further four boxes within two rows:

CODE:

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Example</title>

<linkhref=”/bootstrap/css/bootstrap.min.css” rel=”stylesheet”>

<scriptsrc=”/scripts/jquery.min.js”></script>

<scriptsrc=”/bootstrap/js/bootstrap.min.js”></script>

</head>

<body>

<h1>Nesting Columns</h1>

<h3>Column No. 1</h3>

<p>The coagulation process happens that is used to remove all the dust particles from the water but it is not enough to make this water capable to drink. </p>

</div>

<h3>Column No. 2 (Column is divided into four boxes)</h3>

<p>In Colorado there are different snows each year. In a good years snow there are no skiing problems as well as no water problems. But if the snow is bad, it can affect the industry of ski, it can also affect the waters of that land. Around the world water is obtained by drilling deep holes in the ground and then it is connected with an electric motor. </p>

</div>

<p>This water is brought to surface of the Earth. This water can be Thousands of years old. In Colorado 100% of the water that people use in their houses for drinking and all the other purposes comes from the mountains of Colorado. </p>

</div>

<p>The snow is melted first and then it runs down the mountains and stored in large water reservoirs. </p>

</div>

<p>There are saturators that provide air and pressurize the water. The water absorbs the air and it removes the unwanted particles from the water. The bubbles from water rise and the dirt particles from the water rise to the surface and then removed. </p>

</div>

</body>

</html>

This code will generate the following result:

OUTPUT:

generate

In the above example, basically we have two columns but the second column is divided into four more boxes or columns. The only difference between the previous code and this code is that in this code we have another column inside a column, the remaining code is the same but we used col-md-5 inside col-md-8.

Column Ordering:

In bootstrap we can have the columns in a definite order and also we can show the columns in an order. This can be done by using the classes .col- md- push- * and .col- md- pull- *. The range of the columns should be from 1 to 11 represented by *.

Consider the following example in which we have two columns and we will change the order of these two columns by using .col- md- push- * and .col- md- pull- * classes:

CODE:

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Example</title>

<linkhref=”/bootstrap/css/bootstrap.min.css” rel=”stylesheet”>

<scriptsrc=”/scripts/jquery.min.js”></script>

<scriptsrc=”/bootstrap/js/bootstrap.min.js”></script>

</head>

<body>

<h1>Column Ordering</h1>

<h3>Before Ordering the Column</h3>

At Left Side

</div>

At Right Side

</div>

<br>

<h3>After Ordering the Column</h3>

Was at Left Side

</div>

Was at Right Side

</div>

</body>

</html>

The above code will generate the following result:

OUTPUT:

following result

Prev: Bootstrap Environment Setup

Next: CSS Overview