We now know that the Bootstrap grid system is a system that is built inside of a container, and is made up of rows, and a combination of up to twelve columns, very similar to how a table is constructed. And because of the nature of how this Grid System is built, we can control it's responsiveness behaviors.

the basic Grid System syntax is:

• < div class="container">
  • < div class="row">
    • < div class="col">Column 1< /div>
    • < div class="col">Column 2< /div>
    • < div class="col">Column 3< /div>
    • < div class="col">Column 4< /div>
  • < /div>
• < /div>

which gives us a grid with one row and four columns. Since no column width has been set (col-x), the four columns will split the 12 available, EQUALLY between them. So each column is "3 wide". *note: you can center the text in the container cell by adding text-center to either the main container, row, or column.

Breakpoints

Bootstrap comes pre-configured with some predefined breakpoints as shown in the table below, which allow us to control the responsiveness of the grid columns.

	Sm Phones	Lg Phones	Tablets	Laptops	Desktops	TV's
	(xs) < 576px	(sm) >= 576px	(md) >= 768px	(lg) >= 992px	Large (xl) >= 1200px	(xxl) >= 1400px
Max Container Width	None (auto)	540px	720px	960px	1140px	1320px
Class Prefix	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl	.col-xxl-
# of Columns	12
Gutter Width	1.5rem (.75rem on left and right)
Custom gutters</td>	YES
Nestable	YES
Column ordering	YES

This shows that bootstrap can automatically create a breakpoint at 540px, 720px, 960px, 1140px, and 1320px depending on the viewport width.

So when the viewport reaches the breakpoint, and the column stacks, this creates a new row. It is important to understand that this new row still has available 12 columns wide, so the number (col-md-3) is setting how many of those 12-columns-wide you want the new row to contain, after it stacks. The basic format is .col-md-3, which means, below the medium breakpoint, the columns should stack and on the new row your columns should be 3-wide.

*also, you can add multiple calls in a column to set multiple breakpoint widths.

In the following example, there are no column widths designated initially, so the four columns split the 12 available evenly, making the original columns 3-wide each. Then we set the following:

col-xl-3 col-lg-6 col-md-12 for EACH column.

With our col class, we set it to:

If the viewport size is (xl) : make the columns in each row take up 3-wide
but if the viewport size is (lg) : make the columns in each row take up 6-wide
but if the viewport size is (md) : make the columns in each row take up 12-wide

Heres the code:
• < div class="row text-center">
  • < div class="col-xl-3 col-lg-6 col-md-12 text-bg-primary p-2">Column 1< /div>
  • < div class="col-xl-3 col-lg-6 col-md-12 text-bg-warning p-2">Column 2< /div>
  • < div class="col-xl-3 col-lg-6 col-md-12 text-bg-success p-2">Column 3< /div>
  • < div class="col-xl-3 col-lg-6 col-md-12 text-bg-danger p-2">Column 4< /div>
• < /div>

Responsive Images

Images in Bootstrap are made responsive with .img-fluid. This applies max-width: 100%; and height: auto; to the image so that it scales with the parent width.

Lets start with three images, which have no scaling.

So, three images that don't scale with the viewport.

However, if we set the images inside a container row and column, and add the class class="img-fluid" to the img tags, then they become fluid images and change size based on the viewport size.

You can also use all of the column Breakpoint styling that we used above on the colored boxes. For example:

col-xl-4 col-lg-8 col-md-12