Learn
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.
Sign up to start coding
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.