Cheat Sheet for Bootstrap. Layout
Tags: bootstrap
Published: 2024-07-03 11:53:09

Bootstrap allows to use **mobile-first** flexbox grid to build layouts of all shapes and sizes.

## Table of contents

1. [Breakpoints](#breakpoints)
2. [Containers](#containers)
3. [Grid](#grid)
4. [Row](#row)
5. [Column](#column)

## Breakpoints

**Breakpoints** - customizable widths that makes the layout responsive.
Default breakpoints can be found in `scss/_variables.css`:
```scss
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);
```
Usually, to simply divide mobile and desktop screens **md** breakpoint is used.

## Containers

**Containers** are the basic elements in Bootstrap grid.
The basic CSS representation of container's classes:
```css
  width: 100%;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  margin-right: auto;
  margin-left: auto;
```
> You can find all CSS rules for bootstrap [here](https://github.com/twbs/bootstrap/blob/main/dist/css).
 
Types of containers:
- `.container`, where `max-width` is set at each responsive breakpoints.
- `.container-{breakpoint}` - responsive container, where `width` is equal to `100%` until the specified breakpoint, after that `width` equals to corresponding width values at higher breakpoints.
- `.container-fluid`, where `width: 100%` at all breakpoints.

Bootstrap's values for containers' `width` and `max-width` can be found in `scss/_variables.css` also:
```scss
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);
```

## Grid

Bootstrap's grid consists of bootstrap's classes like `.container`, `.row`, `.col`:
```html
<div class="container">
  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
  </div>
</div>
```
Here, we built a grid with one row and 3 columns, where:
- container is flexible;
- its' `max-width` is set to the corresponding value at each breakpoint;
- columns have equal width.

Features of bootstrap's grid:
- rows are wrapped around columns;
- there are 12 template columns available per row

## Row

Class `.row` include these CSS rules:

```css
 display: flex;
 flex-wrap: wrap;
```

We can indicate number of columns per row with `.row-cols-{number-of-columns}`  instead of applying `col-{number}` on individual columns. The following code makes the same result:

```html
<div class="row">
  <div class="col-6">item 1</div>
  <div class="col-6">item 2</div>
  <div class="col-6">item 3</div>
  <div class="col-6">item 4</div>
</div>

<div class="row row-cols-2">
  <div class="col">item1</div>
  <div class="col">item2</div>
  <div class="col">item3</div>
  <div class="col">item4</div>
</div>
```

## Column

Thus, to equally distribute width of the container we just use `.col` class. What should be used if we need column with different width?

- `.col-auto` - width of column is based on the width of the content.
- `.col-{number}` - how many template columns can be occupied by the element. If sum of column numbers exceeds 12, then extra columns will wrap onto a new line.
- `.col-breakpoint` - this class for a columns allows arrangement of columns to start out vertical and become horizontal, when viewport's width is bigger than the breakpoint. We can use `-auto` and `-{number}` with this class also.

Thus, for grids that are the same for any devices we can just use `.col` and `.col-*`. If we want "stacked to horizontal" behaviour `.col-breakpoint-*` comes to light.

We can use a combination of classes for each column:
```html
<div class="col-3 col-md-6">
  Column
</div>
```
This element will occupy 3 template columns until the viewport's width increases to md(768px), then it will occupy 6 template columns.

```html
<div class="col-sm-6 col-md-5 col-lg-6">
Column 1
</div>
<div class="col-sm-6 col-md-5 col-lg-6">
Column 2
</div>
```

This elements will be positioned in stack until the viewport width becomes larger than sm(576px), then each column will occupy 6 template columns until the viewport width reaches md(768px) then - 5 template columns and once viewport width reaches lg(992px) - again 6 template columns



### Columns alignment inside row

Since `.row` is a flexbox we can align elements inside it easily.

#### Vertically

We can set these classes on `.row` element to align columns:
- `align-items-start`
- `align-items-center`
- `align-items-end`

To align a `.column` element individually we set these classes:
- `align-self-start`
- `align-self-center`
- `align-self-end`

#### Horizontally

Apply these classes on `.row` element:
- `justify-content-start`
- `justify-content-center`
- `justify-content-end`
- `justify-content-between` - the first and the last column are placed at edges. The left space is evenly distributed.
- `justify-content-evenly` - the space is distributed evenly.
- `justify-content-around` - the space before the first and last column equals half of space between each pair of adjacent columns.

### Offseting columns

- `.offset-{number}` - how many template columns we need to omit before starting column;
- `.offset-{breakpoint}-{number}` - how many template columns we need to omit before starting column after reaching breakpoint.