Bootstrap - Layout

This is the continuation of the first part Bootstrap - Introduction. In this, we will discuss breakpoints, containers, grids, columns, and gutters.

Breakpoints:

These are customizable widths that determine the looks of our web page on different devices like min-width in media-queries. 

Bootstrap has 6 default breakpoints that can be modified as per the programmer. These are customizable via Sass in our _variables.scss stylesheet which is present in our downloaded files.

So, basically, if we create a class called container-md or we can use it is by default for the dimension ≥ 768px.

Container:

Most basic layout, used when using the default grid system. We need to create a class named container which will set some padding and align by default.

• .container, which sets a max-width at each responsive breakpoint
• .container-fluid, which is width: 100% at all breakpoints
• .container-{breakpoint}, which is width: 100% until the specified breakpoint

In place of {breakpoint} we use sm ,md , lg , xl, and xxl 

<div class="container-lg">
Container
</div>

The output of this code will be 

When the width of the window is greater than lg , there is padding on the left and right sides of the container.

When width is smaller than lg width, the padding disappers

Grids

This is based on the twelve-column system. Think that the screen is divided into twelve columns of equal size, and we can set the size by defining how many columns we have to occupy. 

• .col , sets all columns of equal size and we can have a maximum of 12 columns in a row
• .col-{1 to 12} , in place of {1 to 12} we can have a number, which will define how many columns should be occupied. For example, col-6 will have a width of 6 columns out of 12 columns.
• col-{breakpoint}-{1 to 12} , this means that below that breakpoint the width will be that number.

Note: If we define the size of the column then that column will have that size permanently, it will not be responsive anymore.

Example

 

<h2>Grids - Column and Row</h2>
<div class="container">
  <div class="row">
    <div class="col-lg-2 col-md-4 col-sm-6">Col 1</div>
    <div class="col-lg-2 col-md-4 col-sm-6">Col 2</div>
    <div class="col-lg-2 col-md-4 col-sm-6">Col 2</div>
    <div class="col-lg-2 col-md-4 col-sm-6">Col 2</div>
    <div class="col-lg-2 col-md-4 col-sm-6">Col 2</div>
    <div class="col-lg-2 col-md-4 col-sm-6">Col 2</div>
    <div class="col-lg-2 col-md-4 col-sm-6">Col 2</div>
    <div class="col-lg-2 col-md-4 col-sm-6">Col 2</div>
    <div class="col-lg-2 col-md-4 col-sm-6">Col 2</div>
  </div>
</div>

The output of this code will be:

col-lg-2 when the width is below lg

col-mg-4 when the width is below md

col-sm-6 when the width is below sm

Instead of defining .col-{width} inside the column, we can also use rows like row row-col-{width} .

Vertical Alignment

For alignment we have align-self-start ,align-self-center and align-self-end which we use inside .col andalign-items-start ,align-items-center and align-items-end which we use inside .row .

Horizontal Alignment

For this we have justify-content-start ,justify-content-around justify-content-between ,justify-content-evenly which we use inside .row .

Gutters

Gutters are the padding between your columns, used to
responsively space and align content in the Bootstrap grid
system.

.gx-{1 to 5} classes can be used to control the horizontal gutter widths.
.gy-(1 to 5) classes can be used to control the vertical gutter widths.

                               ---

I highly recommend to read the official documentation for more information.