Intro

What is Bootstrap? Bootstrap is one of many "external" layout systems known as CSS Frameworks. The power of Bootstrap is that it comes with prebuilt CSS files that you can include in your project, in order to use their components and styling.

Bootstrap works on a 12-column layout that is built on top of flexbox. This makes it really easy to create "responsive" web sites, that look great and just work, on both mobile devices and desktops. The "mobile first" design concept. More information can be found on the Bootstrap Documentation web page.

12 Column System

Bootstrap is built upon the "12 Column System" which consists of:

• - a "parent container" <div>
• - inside of this <div> is another <div> with a class="row"
• - and finally our items that take up the 12-columns.

• <div class="container">
  • <div class="row">
    • <div class="col">items taking up our 12 columns</div>
  • </div>
• </div>

So you can define up to 12 columns per row and the interesting thing is that bootstrap will try to space everything evenly, depending on how many items are in a specific row.

The Container System

Bootstrap is utilizing a "container" system to enable "responsiveness" in the design. Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Containers are used to contain, pad, and (sometimes) center the content within them. While containers can be nested, most layouts do not require a nested container. More information can be found here.

Here is how the container system determines its breakpoints. This is based on viewport size, and container size:

Notice the bottom row here, .container-fluid. With this container, the viewport size does not matter, Bootstrap will render the output at 100% width. Also, the top row of this table shows the default breakpoints for Bootstrap, and these defaults are designed as:

This is one of the advantages of using an external Framework such as Bootstrap. It comes with pre-defined breakpoints built into its containers, that creates an auto-resizing layout for us. No more having to hard code our media-queries.

column sizing

We stated earlier that Bootstrap works off of a 12-column system. This means that every row is made up of 12 columns. With bootstrap's 12 columns, you can size these, or combine these, any way you wish. This sizing is accomplished with the col class.

You could for example, have one wide column that takes up the entire 12 columns. Or you could have 3 columns that are "4-wide", like this:

• <div class="container">
  • <div class="row">
    • <div class="col">this <div> takes up 4 columns</div>
    • <div class="col">this <div> takes up 4 columns</div>
    • <div class="col">this <div> takes up 4 columns</div>
  • </div>
• </div>

You can mix and match these columns any way you like, as long as you stay within the 12 column maximum. If we take our basic bootstrap example from above, and redefine our columns by specifying different sizes, it could look something like this:

• <div class="container">
  • <div class="row">
    • <div class="col-2">this <div> takes up 2 columns</div>
    • <div class="col-4">this <div> takes up 4 columns</div>
    • <div class="col-6">this <div> takes up 6 columns</div>
  • </div>
• </div>

Now, if we look at our "Breakpoint Chart" from above we see that for small viewports, any screen (≥ 576px) will display our row as defined, but the small screens below 576px, will shift our row into columns into individual rows that will take up 100% of the width of the screen.

Multiple Breakpoints

You can also define multiple breakpoints in one single col definition, like so:

• <div class="col-10 col-sm-12 col-lg-6">column 1</div>
• <div class="col-10 col-sm-6 col-lg-3">column 2</div>
• <div class="col-10 col-sm-6 col-lg-3">column 3</div>

• for all viewport sizes, make each column 10-wide,
• but for sm and above viewports, make the first column 12-wide, and the other 2 columns 6-wide
• and for large and above viewports, make the first column 6-wide, and the other 2 columns 3-wide