Breakpoints and the Bootstrap Grid System

[00:00] There are two concepts that you need to know before getting into writing code in the next lesson. The first is Bootstrap's breakpoints and the second is how to set up your HTML using containers, rows, and columns. Breakpoints are defined by the class infixes in the center of this graph. These determine the sizing, ordering, and [00:20] responsiveness of your elements. You'll base your element sizes on these pixel dimensions listed on the right side of the graph. Moving on to containers, rows, and columns, a container is required if you are wanting to use the default grid system, which I'll be using in this course. Container is the fundamental building block of [00:40] Bootstrap. It will set a max width as well as make everything inside of it responsive and add a padding to the content. The grid system is comprised of rows and columns. Rows serve as a wrapper around the columns, and there are 12 columns per row. These columns are how we can customize [01:00] the sizes of our elements. We'll be able to determine the width of our elements by specifying the amount of columns we want the element to span. We could even change how many columns we want elements to span depending on the screen size. This is done by specifying the amount of columns and the screen size that the element should change on. For this, it's [01:20] important to note that Bootstrap focuses on mobile first development. In the second block of code, you can see that I have a column dash 12 and column dash medium dash 3. This means that the element will always span 12 columns until the window hits the medium or greater screen size. [01:39] Once that happens, it'll only span 3 columns.