BootStrap-3 Grid System

Let's Learn the BootStrap 3 Grid System

BootStrap version 3 includes features for 4 basic views.

• xs: Small screens, phones, etc. (Smaller than 768 px screens) (extra small)
• sm: screens between 768-992 px. (small)
• md: Screens between 992-1200 px. (medium)
• lg: screens larger than 1200 px (large)

Bootsrap allows us to easily arrange the layout of objects, assuming that the screen consists of 12 units. We can also specify the width that the objects will occupy separately for each screen class mentioned above.

There are ready-made classes that start with the col- expression to specify widths. For example , the col-sm-6 class specifies that that object will occupy half the page (6 out of 12) on sm screens.

Accordingly, if we want to place two div elements side by side with equal width on sm screens:

In the example above, on sm screens, these two boxes are side by side and occupy equal space. Unless something is specified for other screens, these widths will also apply to larger screens. But it won't work on narrower screens.

In other words, while the two boxes above will be placed side by side on sm, md and lg screens, they will be one after the other on xs screens and each will take up 12 units, that is, the entire screen.

An object can occupy different widths in different screen classes. E.g;

<div class="col-sm-7 col-md-5">

The div element above will be 12 units wide on xs screens, 7 units on sm screens, and 5 units on md and lg screens.

Another example;

<div class="col-xs-6 col-sm-8 col-md-9">

This div is 6 units wide on xs screens, 8 units wide on sm screens, and 9 units wide on md and lg screens.

Example: Let's say we have 3 div elements. Let these divs be placed one below the other on xs screens. On SM screens, while 2 divs come side by side, the other should be at the bottom. On MD and LG screens, let 3 divs come side by side.

*** The col-*-* classes must be enclosed in a div with the row class applied. So the working version of the above example would be like this:

EXERCISES