Breakpoints and the Bootstrap Grid System

Before we get into the code, there are two pivotal concepts you need to be aware of:

• breakpoints
• containers, rows, and columns

Breakpoints determine the sizing, ordering, and responsiveness of your elements. You’ll base your element sizes on these pre-determined pixel dimensions that Bootstrap has set.

Container is the fundamental building block of Bootstrap. It will set a max width as well as make everything inside of it responsive and add a padding to the content while setting up a grid layout using rows and columns for you to build out.