Designing layouts with grids and containers

Bootstrap includes a powerful mobile-first grid system for building designs of all shapes and sizes, and that sounds very promising because we need to create several pages for our project. We will use the grid systems for creating the page layouts through a series of rows and columns. Since Bootstrap is developed to be mobile first, we use a handful of media queries to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes. There are three main components of the grid system, they are:

  • Container
  • Row
  • Column

The container is the core and requires layout element in Bootstrap. There are ...

Get Web Development with Bootstrap 4 and Angular 2 - Second Edition now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.