Sunday, July 29, 2018

One of the main concept of working with Bootstrap is the Grid system. It could be intimidating at first to work with the Grid system. But the system is quite elegant and simple solution.

The most important thing you have to remember about the grid system is that it divides the page into 12 columns, and it is responsive meaning it will adjust to the size of the client's screen.

You can control the size of the column with the .col-sm, .col-md, .col-lg, .col-xl, which translates to small, medium, large, and extra large screens. In addition to the screen size you can also control the with of the column with the -n at the end of class attribute. For example if you want a column for a small screen to span three columns it would be .col-sm-3.

Here is the cheat sheet, I am going to use color coding for the different sizes.

Small - Green
Medium - Orange
Large - Red
Extra Large - Blue

Oh, before I forget the grid system needs to be wrapped around by a .row CSS class.

The resulting visual looks like this in the browser. As you can see col 1 to 4 can fit into one line. As the columns increase in size it takes up more space. 5+6 = 11 so it can fit in one line. However, anything after 6 will only fit into one line if it's in the same row. It's gets simple if you just add everything to 12 so 7+4+1 = 12, or 7+3+2 = 12 would be okay.

2. Now let's do the same thing for the medium columns, with this code.

If you look at the page at fullscreen everything looks the same. The cheat sheet becomes valuable when you resize the page. As you resize the browser size you can see visually what column size would fit on the screen. Here is an example of when the xl columns will start stacking.

Now let's see when the large columns stack, but before that resize the page just a little bit, you will notice that the large columns are still intact. As you make the page smaller you will see that the large columns starts to stack. This is call the breaking point of the column.

This is the breaking point for the large columns

Eventually when the screen gets too small all the columns are stacked, they've all reached their breaking point.