+91 90691 39140 | +1 253 214 3115 | info@hub4tech.com | hub4tech

Bootstrap Grid System Video


Introduction to Bootstrap Grid

In graphic design, a grid is a two-dimensional structure made up of a series of intersecting straight (vertical, horizontal) lines used to structure the content. In simpler word, grids in web design organize and structure content, make the websites easy to scan and reduce the cognitive load on users. 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.

Bootstrap Grid Illustration

Bootstrap's grid system allows up to 12 columns across the page. If you do not want to use all 12 columns individually, you can group the columns together to create wider columns:
Bootstrap Grid Illustration

Bootstrap's grid system is responsive, and the columns will re-arrange automatically depending on the screen size.

Bootstrap Grid Classes

The Bootstrap grid system has four classes:
  • xs (for phones)
  • sm (for tablets)
  • md (for desktops)
  • lg (for larger desktops)
The classes above can be combined to create more dynamic and flexible layouts.

Basic Structure of a Bootstrap Grid

The following is a basic structure of a Bootstrap grid:
Basic Structure of a Bootstrap Grid

Three Equal Columns

The following example shows how to get a three equal-width columns starting at tablets and scaling to large desktops. On mobile phones, the columns will automatically stack:
Three Equal Columns

Three Equal Columns

Two Unequal Columns

The following example shows how to get two various-width columns starting at tablets and scaling to large desktops:
Two Unequal Columns

Two Unequal Columns



Is it Helpful?
Copyright ©2015 Hub4Tech.com, All Rights Reserved. Hub4Tech™ is registered trademark of Hub4tech Portal Services Pvt. Ltd.
All trademarks and logos appearing on this website are the property of their respective owners.
FOLLOW US