Skip to Content
Learn
Learn Bootstrap 4: Grid
Bootstrap 4 Grid Review

Great job navigating through Bootstrap’s grid!

Let’s review some key concepts:

  • When in doubt, check Bootstrap’s documentation.
  • There are a few required links to use Bootstrap (the CSS file and two <meta> tags)
  • Bootstrap 4 has a grid system implemented using flexbox
  • The grid system is made of containers, rows, and columns that work together to make a web page’s layout.
  • Containers are needed to implement the grid.
  • Containers hold rows which hold columns.
  • Bootstrap’s grid follows a 12 column system.
  • Bootstrap uses responsive design and is built around breakpoints related to device screen sizes.
  • To manually set the width of a column we have to follow Bootstrap’s naming convention.
  • We can add multiple classes to a column to determine how wide a column should be on specific breakpoints.

Instructions

If you want to challenge yourself:

  • create a 8 x 8 checkerboard.
  • nest a layer of rows and columns inside a column.
  • recreate the layout in the second exercise.
Folder Icon

Sign up to start coding

Already have an account?