TIL- Bootstrap - The Grid

Bootstrap is a front-end, specialized in CSS, but also providing HTML and JavaScript components. It was created in 2011 at Twitter.
It includes a system of grid simple and efficient, which allows to design web applications responsive easily. It also allows the use of styles consistent (and aesthetically pleasing) for buttons, forms, navigation bars, modal windows, and so on...
download
Put in the <header>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

the Gird

shortly explained

The grid system uses containers (this will be the class container which you can imagine as a block). Each container is cut into rows (this will be the classrow). In turn, each row is cut into 12columns (this will be the classcol).

The classcontainer can be of two types:

container centers the grid on a fixed width (depending on the size of the screen)

container-fluid full page and no longer fixed( always 100% of the width)

Once yourcontainer created, all you have to do is put yourrows (rows), which will contain yourcol (columns): it will be yourgrate system.

To make your life easier, Bootstrap integrates 4 sizes ("breakpoints" or"breaking points") by default :
*collar : size xs, for smartphone screens. For this size, do not indicate collar-xs but only collar ;
*col-sm : for portrait tablet or landscape smartphone screens ;
*col-md : for landscape tablets or small PC screens ;
*col-lg : for widescreen displays ;
*col-xl for very wide screens.

<div class="container">
        <div class="row">
            <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                <img src="..." alt="">
            </div>
            <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                <img src="..." alt="">
            </div>
            <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                <img src="..." alt="">
            </div>
            <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                <img src="..." alt="">
            </div>
        </div>
    </div>

If you set a column size to a screen size, it will automatically apply to larger screen sizes.

offsetting