Hello folks! welcome back to a new section of our tutorial on Bootstrap. In this tutorial, we will be discussing about Bootstrap Grid System.
What is a Grid?
In graphic design, we can define a grid as a structure made up of series of intersecting straight (vertical and horizontal) lines used to structure the content. It is widely used to design layout and content structure in print design.
Grid in web design organize and structures contents, makes the websites easy to scan and reduces the cognitive loads on users.
Grid in web design organize and structures contents, makes the websites easy to scan and reduces the cognitive loads on users.
What is Bootstrap Grid?
The explanation of Bootstrap grid system as prepared by the official documentation of Bootstrap for grid system -
Bootstrap Includes a responsive mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, and also powerful mixins for generating more semantic layouts.
Now we will be explaining what the above statement simply means. Bootstrap 4 is a mobile first in the sense that the codes for Bootstrap now begins by targeting smaller screens such as mobile devices, tablets and "expands" components and grids for larger screens like desktops and laptops.
Mobile First Strategy
- Content - This determines what is most important.
- Layout - Design to smaller width first.
- Base CSS address mobile device first; media queries address for tablets, desktops.
- Progressive Enhancement - Add elements as screen size increases.
Working of Bootstrap Grid System
Bootstrap grid systems are used to create page layouts through a series of rows and columns that houses your content. Here is how the Bootstrap grid system works -
- Rows must be placed within a .container class for proper alignment and padding.
- Use rows to create horizontal groups of columns.
- Content should be placed within the columns, and only columns may be the immediate children of rows.
- Predefined grid classes like .row and .col-xs-4 are available for quick making of grid layouts. LESS mixins can also be used for more semantic layouts.
- Columns create gutters (caps between column contents) by the use of padding. That padding is offset in rows for the first and last column using negative margin on .rows.
- Grid columns are created by specifying the number of twelve available columns that you wish to span. For example, three equal columns would use three .col-xs-4.
Media Queries
Media query is a fancy term for "conditional CSS rule". It simply applies some CSS rules, based on certain conditions that are set. If those conditions are met, the CSS rules are applied.
Media Queries in Bootstrap allows you to move, show and hide content based on the viewport size. The following media queries below are used in LESS files to create the key breakpoints in Bootstrap grid system.
Media Queries in Bootstrap allows you to move, show and hide content based on the viewport size. The following media queries below are used in LESS files to create the key breakpoints in Bootstrap grid system.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
These are occasionally expanded to include a max-width to limit CSS to a smaller set of devices.
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
Media queries is comprised of two parts, a device specification and then a size rule. In the above case, the following rule is set -
Let us consider this line -
Let us consider this line -
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
For all devices, with min-width: @screen-sm-min if the width of the screen gets smaller than @screen-sm-max, then do something.
Grid Options
The following table summarizes aspects of how Bootstrap grid system function across multiple devices -
| Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px) | |
|---|---|---|---|---|
| Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Max container width | None (auto) | 750px | 970px | 1170px |
| Class prefix | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| # of columns | 12 | 12 | 12 | 12 |
| Max column width | Auto | 60px | 78px | 95px |
| Gutter width | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) |
| Nestable | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes |
Basic Grid Structure
Following below is the basic Bootstrap grid structure -
<div class = "container"> <div class = "row"> <div class = "col-*-*"></div> <div class = "col-*-*"></div> </div> <div class = "row">...</div> </div> <div class = "container"> .... </div>
Let us look into some simple grid examples -
Responsive Column Resets
With the four tiers of grid available, you are bound to run into issues where at particular breakpoints, the columns don't clear well as one is taller than the other. To fix that, use a combination of class .clearfix and then the responsive utility classes as demonstrated in the following example below -
<div class = "container"> <div class = "row" > <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>The pain itself is the love.</p> </div> <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>The pain itself is fun, the main iterative process, but you do such times as low as fatigue and obesity. Utah For the least I will come, who will drive our school district to work? but to achieve the objectives from that advantage.</p> <p>The pain itself is fun, the main iterative process, but you do as low as candy.</p> </div> <div class = "clearfix visible-xs"></div> <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>For more information on what to do but to achieve the objectives of employment.</p> </div> <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>The pain itself is fun, the main iterative process, but you do such times as low as fatigue and obesity. Ut for at least.</p> </div> </div> </div>
Output
When the above example is executed, it will produce the following result -
The pain itself is the love.
The pain itself is important, but I give it to the pain of some great pain. In order for the least to come, what of ours to exercise any school of labor except to take advantage of the objectives from it to achieve.
The pain itself is a lot of pain, but I give it the time to cut it down.
In order for the least to come, what of ours to exercise any school of labor except to take advantage of the objectives from it to achieve.
The pain itself is important, but I give it to the pain of some great pain. To have at least
Resize your viewport or check it out on your phone for a desired result of the above example.
Offset Columns
Offsets are a useful feature in Bootstrap for more specialized layouts. They can be used to push columns over for more spacing. For example, the .col-xs = * classes don't have support for offsets, but they are reproduced easily by using an empty cell.
To use offsets on large screens, make use of .col-md-offset-* classes. These classes increases the left margin of a column by * columns where * ranges from 1 to 11.
To use offsets on large screens, make use of .col-md-offset-* classes. These classes increases the left margin of a column by * columns where * ranges from 1 to 11.
Example
In the below example, we have <div class = "col-md-6">..</div>, we are going to center this using the .col-md-offset-3 class -
<div class = "container"> <h1>Hello, world!</h1> <div class = "row" > <div class = "col-xs-6 col-md-offset-3" style = "background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>The pain itself is the love.</p> </div> </div> </div>
Output
When the above example is executed, it will produce the following result -
Hello, world!
The pain itself is the love.
Nesting Columns
To nest your contents with the default grid, you have to add a new .row and set of .col-md-* columns within an existing .col-md-* columns. Nested rows should include a set of columns that add up to 12.
Example
In the following example below, the layout has two columns with the second column being split into four boxes over two rows -
<div class = "container"> <h1>Hello, world!</h1> <div class = "row"> <div class = "col-md-3" style = "background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <h4>First Column</h4> <p>The pain itself is the love.</p> </div> <div class = "col-md-9" style = "background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <h4>Second Column- Split into 4 boxes</h4> <div class = "row"> <div class = "col-md-6" style = "background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>Enhanced art party Tonx com semiotics. Pinterest is taking organic information over email.</p> </div> <div class = "col-md-6" style = "background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>but I give them as much time as fatigue and great pain some. For more information on what we do The school district's labor was only to achieve the objectives of it.</p> </div> </div> <div class = "row"> <div class = "col-md-6" style = "background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>what is our employment school district's employment objectives please follow it out of it.</p> </div> <div class = "col-md-6" style = "background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>The pain itself is love, the main iterative process, but I give them as much time as fatigue and great pain some. For more information on how.</p> </div> </div> </div> </div> </div>
Output
When the above example is executed, it will produce the following result -
Hello, world!
First Column
The pain itself is the love.
Second Column- Split into 4 boxes
Enhanced art party Tonx com semiotics. Pinterest is taking organic information over email.
but every time I give it as low as toil and to some great pain. In order for the least to come, what of ours to exercise any school of labor except to take advantage of the objectives from it to achieve.
any of us exercise any school of employment.
The pain itself is important, but I give it to the pain of some great pain. For more information on how.
Column Ordering
Another wonderful feature of the Bootstrap Grid system is that you can easily write the columns in an order, and then show them in another order. You can effortlessly change the order of built-in grid columns using the .col-md-push-* and .col-md-pull-* modifier classes where * ranges from 1 to 11.
Example
In the following example below, we have two columns layout with left column being the narrowest and acting as a sidebar. We will swap the order of these columns using .col-md-push-* and .col-md-pull-* modifier classes -
<div class = "container"> <h1>Hello, world!</h1> <div class = "row"> <p>Before Ordering</p> <div class = "col-md-4" style = "background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> I am on left </div> <div class = "col-md-8" style = "background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> I am on right </div> </div> <br> <div class = "row"> <p>After Ordering</p> <div class = "col-md-4 col-md-push-8" style = "background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> I was on left </div> <div class = "col-md-8 col-md-pull-4" style = "background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> I was on right </div> </div> </div>
Output
When the above example is executed, it will produce the following result -
Hello, world!
Before Ordering
I am on left
I am on right
After Ordering
I was on left
I was on right
READ: Bootstrap | Introduction
Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial guide, we are going to be studying about the Bootstrap Grid System: Stack-to-horizontal.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.