Bootstrap Grid System - Bootstrap


As placed in Wikipedia –

In graphic design, a grid is an assembly (usually two-dimensional) made up of a series of traversing straight (vertical, horizontal) lines used to structure the content. It is broadly used to design layout and content structure in print design. In web design, it is a very active method to make a steady layout quickly and successfully using HTML and CSS.

To make it simple, grids in web design unite and structure content, make the websites easy to scan and decrease the cognitive load on users.

Bootstrap grid system?

As put by the official documentation of Bootstrap for grid system −
Bootstrap contains an approachable, mobile first fluid grid system that properly scales up to 12 columns as the device or viewport size rises. It contains predefined classes for easy layout options, as well as great mixings for generating more semantic layouts.

Trying to know the above statement, Bootstrap 3 is mobile first in the sense that the code for Bootstrap now begins by aiming smaller screens like mobile devices, tablets, and then “increases” components and grids for larger screens such as laptops, desktops.

Mobile Initial Plan

• Content
  • Govern what is maximum significant.
• Layout
  • Design to lesser widths first.
  • Base CSS address mobile device first; media questions address for tablet, desktops.
• Progressive Improvement
  • Increase elements as screen size grows.

Bootstrap Grid System Working

Grid systems are used for creating page layouts over a series of rows and columns that house your content. Here's how the Bootstrap grid system works −
  • Rows must be located within a .container class for correct arrangement and padding.
  • Practice rows to generate horizontal groups of columns.
  • Content should be located within the columns, and only columns may be the instant children of rows.
  • Predefined grid classes like .row and .col-xs-4 are accessible for fast making grid layouts. LESS mixins can also be used for additional semantic layouts.
  • Columns make channels (gaps between column content) via padding. That padding is offset in rows for the first and the last column via negative margin on .rows.
  • Grid columns are formed by specifying the number of twelve available columns you wish to span. For instance, three equal columns would use three .col-xs-4.

Media Questions

Media question is a truly elaborate term for "conditional CSS rule". It only applies some CSS, based on certain conditions set forth. If those situations are met, the style is applied.

Media Questions in Bootstrap permit you to move, show and hide content based on the viewport size. Following media queries are used in FEWER files to create the key breakpoints in the Bootstrap grid system.

Let us study this line –

Media questions have two parts, a device requirement and then a size rule. In the above case, the following rule is set –

For all strategies no matter what kind 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 reviews aspects of how Bootstrap grid system works 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)
Class prefix
# of columns
Max column width
Gutter width
(15px on each side of a column)
(15px on each side of a column)
(15px on each side of a column)
(15px on each side of a column)
Column ordering

Grid Structure basic

Following is basic structure of Bootstrap grid −

Some simple grid instances –

Instance − Stacked-to-horizontal
Instance − Medium and Large Device
Instance − Mobile, tablet, desktops

Column resets responsiveness

With the four tiers of grids existing, you are sure to run into problems where at certain breakpoints, the columns don't clear quite right as one is higher than the other. To fix that, use a mixture of a class .clear fix and the responsive utility classes as shown in the following instance –

This will yield the subsequent result –

Colounm Reset Responsiveness

Offset Columns

Offsets are a beneficial feature for more particular layouts. They can be used to push columns over for more spacing, (for example). The .col-xs = * classes don’t support offsets, but they are simply imitated by using an unfilled cell.
To use offsets on large displays, use the .col-md-offset-* classes. These classes grow the left margin of a column by * columns where * range from 1 to 11.
In the following instance, we have <div class = "col-md-6">..</div>, We will center this using class .col-md-offset-3.

Nesting columns

To nest your content with the default grid, add a new .row and set of .col-md-* columns within an existing .col-md-* column. Nested rows should include a set of columns that add up to 12.
In the following example, the layout has two columns, with the second one being split into four boxes over two rows.

This will produce the following result −

Nesting Colomns

Column Ordering

Alternative good feature of Bootstrap grid system is that you can simply write the columns in an order, and show them in alternative one. You can simply change the order of built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes where * range from 1 to 11.
In the next instance 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-* classes.

This will yield the subsequent result –

Column ordering

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd Protection Status

Bootstrap Topics