Bootstrap-4 Grid System

December 16, 2020

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

Bootstrap Overview

  • Front-end framework for faster and easier web development.
  • Includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins.
  • Easily create responsive designs with mobile first approach.

Why Responsive Design?

  • Users increasingly accessing websites from a variety of devices of different screen sizes.
  • One size fits is all no longer a possibility!
  • Adapt to the user’s “viewport” – Build it into the core of the site
  • Foundations For Responsive Design

  • Grid system
  • Fluid images
  • Media queries

we will cover bootstrap grid system in this post.

Bootstrap grid system is designed to be:

  • Responsive
  • Mobile first
  • Fluid

CSS Flexbox Layout

  • Simpler and flexible layout options in CSS.
  • Can easily handle dynamic/unknown size of content containers.
  • Direction-agnostic layout.

Bootstrap Grid

bootstrap-grid

Bootstrap Grid

  • Bootstrap makes available five classes

– default targets all screen sizes from extra small to extra large, – sm for small, – md for medium, – lg for large, and – xl for extra large screen sizes

  • Each row in Bootstrap grid system is divided into 12 columns.
  • Use the classes .col-, .col-sm-, col-md-, and .col-lg- for defining the layouts for the various screen sizes.
  • Specify how many columns each piece of content will occupy within a row, all adding up to 12 or a multiple thereof.

grid-example

Auto-layout Columns

Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class like .col-sm-6.

auto-layout-column

Bootstrap Grid Details

grid-details

Using column classes

For extra small screen

column-class

For Small, Medium, Large and Extra Large Screens

col-class

Reordering Content

Use .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g., .order-1.order-md-2). Includes support for 1 through 12 across all five grid tiers.

For extra small screen

reordering-ex-small

For Small, Medium, Large and Extra Large Screens

reordering

Alignments

Use flexbox alignment utilities to vertically and horizontally align columns.

  • vertical Alignment

vertical-alignment

  • Horizontal Alignment

horizontal-alignment

  • Column Offsets

You can offset grid columns in two ways: responsive .offset- grid classes and our margin utilities. Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.

colum-offsets

  • Nesting Columns

To nest your content with the default grid, add a new .row and set of .col-sm- columns within an existing .col-sm- column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

nesting-columns