Bootstrap - Layout
Tags: webdev, tutorial, css, beginners
Published: 2022-01-15 09:31:48

This is the continuation of the first part [Bootstrap - Introduction](https://dev.to/sanskrati01/bootstrap-part-1-3j86). 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.

![Width in bootstrap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4iws40ev2yur2045y8i3.png)
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 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hnqbifaqso86qtq7cu7s.png)
When the width of the window is greater than lg , there is padding on the left and right sides of the container.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o7r7ssjcrigcnfm729k1.png)
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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jdr53zr7d7anri60t7r3.png)
col-lg-2 when the width is below `lg`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hplkq11e5p581igyr9gy.png)
col-mg-4 when the width is below `md`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eyt863moqkiy0uxmqtjy.png)
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` and` align-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.