```css
justify-content possède 5 valeurs possibles
  flex-start : Les éléments s'alignent au côté gauche du conteneur.
  flex-end : Les éléments s'alignent au côté droit du conteneur.
  center : Les éléments s'alignent au centre du conteneur.
  space-between : Les éléments s'affichent avec un espace égal entre eux.
  space-around : Les éléments s'affichent avec un espacement égal à l'entour d'eux.

align-items possède 5 valeurs possibles
  stretch : Les éléments sont étirés pour s'adapter au conteneur.
  flex-start : Les éléments s'alignent au côté haut du conteneur.
  flex-end : Les éléments s'alignent au côté bas du conteneur.
  center : Les éléments s'alignent au centre du conteneur.
  baseline : Les éléments s'alignent sur leur ligne de base.

flex-direction possède 4 valeurs possibles
  row : Les éléments sont disposés horizontalement.
  row-reverse : Les éléments sont disposés horizontalement en sens inverse.
  column : Les éléments sont disposés verticalement.
  column-reverse : Les éléments sont disposés verticalement en sens inverse.

flex-wrap possède 3 valeurs possibles
  nowrap : Les éléments sont disposés sur une seule ligne.
  wrap : Les éléments sont disposés sur plusieurs lignes.
  wrap-reverse : Les éléments sont disposés sur plusieurs lignes en sens inverse.

flex-grow possède 2 valeurs possibles
  0 : Les éléments ne sont pas étirés pour s'adapter au conteneur.
  1 : Les éléments sont étirés pour s'adapter au conteneur.

flex-shrink possède 2 valeurs possibles
  0 : Les éléments ne sont pas réduits pour s'adapter au conteneur.
  1 : Les éléments sont réduits pour s'adapter au conteneur.

flex-basis possède 2 valeurs possibles
  auto : Les éléments sont disposés selon leur taille par défaut.
  0 : Les éléments sont disposés selon la taille du conteneur.
```

```
Responsive breakpoints
default: Extra small devices (Portrait phone 👉 less than 576px)
sm: Small devices (Landscape phone 👉 576px and up)
md: Medium devices (Tablet 👉 768px and up)
lg: Large devices (Desktops 👉 992px and up)
xl: Extra large devices (Large desktops 👉 1200px and up)
xxl: Extra extra large devices (Extra large desktops 👉 1400px and up)
```

```html
<div class="row">
  <div class="col-lg-12 col-sm-12 column">
    <div class="bootstrap-test"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit exercitationem eaque aperiam rem quia quibusdam dolor ducimus quo similique eos pariatur nostrum aliquam nam eius, doloremque quis voluptatum unde. Porro voluptates aspernatur voluptate ipsam, magni vero. Accusamus, iusto tempore id!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae laboriosam, excepturi quas.</p>
    </div>
  </div>
</div>
```

```html
<div class="row">
    <div class="col-lg-4 col-sm-4 column">
      <div class="bootstrap-test"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea facilis vel aliquam aspernatur dolor placeat totam saepe perferendis. Odio quia vel sed eveniet cupiditate, illum doloremque sint veniam eum? Corporis?</p>
      </div>
    </div>
    <div class="col-lg-4 col-sm-4 column">
      <div class="bootstrap-test"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo adipisci ipsa, consequuntur cum, sunt dolores veniam. Enim inventore in dolore deserunt vitae sequi nemo!</p>
      </div>
    </div>
    <div class="col-lg-4 col-sm-4 column">
        <div class="bootstrap-test"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea excepturi ducimus numquam aut error corporis aspernatur ipsum quos eius culpa!</p>
        </div>
    </div>
</div>
```

```html
<div class="row">
    <div class="col-lg-8 col-sm-8 column">
        <div class="bootstrap-test"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro distinctio atque molestiae optio, consequuntur? Iusto ratione cumque dolor aut dolore!</p>
        </div>
        <div class="row">
            <div class="col-lg-6 col-sm-6 column">
                <div class="bootstrap-test"><hr><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis facilis molestias voluptatum laudantium fuga ratione tempora rem dolor dicta rerum vero ut, suscipit ex qui amet quam vel cupiditate quaerat minus assumenda reiciendis, similique omnis delectus! Autem, repudiandae cumque eaque?</p>
                </div>
            </div>
            <div class="col-lg-6 col-sm-6 column">
                <div class="bootstrap-test"><hr><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet molestiae quaerat illum, consequuntur iusto aspernatur quam provident? Possimus!</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-sm-4 column">
        <div class="bootstrap-test"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis fugit quasi officiis id laudantium error aut ut aperiam dicta saepe non vel, cupiditate illum ipsam velit deleniti natus incidunt impedit molestias dolore quos dolores enim. Aliquid ipsam eaque consequuntur quaerat, suscipit a in. Praesentium repudiandae quibusdam recusandae sequi eligendi quos, dignissimos, officiis officia minima necessitatibus eaque consequatur in id adipisci qui minus voluptatum quae debitis, quas maxime iure. Tempore vero unde quia reiciendis ad beatae voluptate omnis, ipsa expedita ab, quasi, neque. Doloribus, pariatur. Aut hic voluptate.</p>
        </div>
    </div>
</div>
```

```html
 <div class="row">
  <div class="col-lg-6 col-sm-6 col-6 column">
    <div class="bootstrap-test"><p>Lorem ipsum dolores</p>
    </div>
  </div>
  <div class="col-lg-6 col-sm-6 col-6 column">
    <div class="bootstrap-test"><p>Lorem ipsum dolores</p>
    </div>
  </div>
</div>
```

```html
<div class="row">
  <div class="col-lg-9 col-sm-9 col-9 column">
    <div class="bootstrap-test"><p>Lorem ipsum dolores</p>
    </div>
  </div>
  <div class="col-lg-3 col-sm-3 col-3 column">
    <div class="bootstrap-test"><p>Lorem ipsum dolores</p>
    </div>
  </div>
</div>
```

```html
<div class="container">
  <div class="row justify-content-center">
    <div class="col-12 col-lg-6 bootstrap-test">
      <p style="text-align:center;">Hello</p>
    </div>
  </div>
</div>
```