# Bootstrap 4

## Intro and Setup

:::warning
[Intro by Bootstrap](https://getbootstrap.com/docs/5.0/getting-started/introduction/)
:::

<iframe width="560" height="315" src="https://www.youtube.com/embed/7g8Gg2QVdeU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## Layout

Understanding Bootstrap's Layout is probably the most important way of learning to use the framework. Bootstrap uses CSS Flexbox, which you could write up yourself with CSS, but it makes it as easy as slapping some classes to you markup and you are done. Check out this thorough blog below:
:::warning
[How the Grid Works](https://uxplanet.org/how-the-bootstrap-4-grid-works-a1b04703a3b7)
:::
Use the Bootstrap guide as a reference to know what classes you must use and how to use containers and grid.

:::warning
[Containers](https://getbootstrap.com/docs/5.0/layout/containers/)
[Grid](https://getbootstrap.com/docs/5.0/layout/grid/)
:::

<iframe width="560" height="315" src="https://www.youtube.com/embed/qmPmwdshCMw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## Content & Utilities

<iframe width="560" height="315" src="https://www.youtube.com/embed/WWKuaUtgNBI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## Components

<iframe width="560" height="315" src="https://www.youtube.com/embed/23bpce-5s8I" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<iframe width="560" height="315" src="https://www.youtube.com/embed/cCxcxRw9j_s" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<iframe width="560" height="315" src="https://www.youtube.com/embed/Izc-0yF4EA0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>