Cours complet Bootstrap 4

Premiers pas

VI. Alignement et visibilité▲

Dans ce chapitre nous allons voir dans un premier temps comment aligner des éléments avec flexbox. Ensuite nous verrons les classes que Bootstrap nous offre pour masquer ou faire apparaître des éléments selon le support utilisé. Et tant qu'à faire nous allons aussi poursuivre l'apprentissage de l'organisation de l'espace avec la grille.

VI-A. Aligner verticalement▲

VI-A-1. Aligner globalement▲

Un avantage de disposer de flexbox est la grande facilité que l'on obtient pour les alignements. On dispose de trois classes pour aligner verticalement au niveau d'une ligne :

Sélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      align-items-start
    </div>
    <div class="col">
      align-items-start
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      align-items-center
    </div>
    <div class="col">
      align-items-center
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      align-items-end
    </div>
    <div class="col">
      align-items-end
    </div>
  </div>
</div>

La première n'est pas vraiment utile parce que c'est la valeur par défaut. Par contre les deux autres sont les bienvenues. Sans flexbox il n'est pas si facile d'obtenir le même résultat.

On dispose également de baseline et stretch de flexbox qui sont moins utiles.

On peut adapter cet alignement selon le support avec des classes align-items-sm-*, align-items-md-* … On peut se demander quel en est l'intérêt, mais ça a le mérite d'exister.

VI-A-2. Aligner individuellement▲

On peut également traiter chaque élément individuellement :

Sélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      align-self-start
    </div>
    <div class="col align-self-center">
      align-self-center
    </div>
    <div class="col align-self-end">
      align-self-end
    </div>
  </div>
</div>

On peut aussi adapter cet alignement selon le support avec des classes align-self-sm-*, align-self-md-* …

Pour la visualisation de ces deux exemples, j'ai ajouté ces règles :

Sélectionnez

1.
2.
3.
4.
5.

.row {
  background-color: #b4c8cf;
  height: 200px;
  margin-bottom: 10px;
}

VI-B. Aligner horizontalement▲

On peut aussi aligner horizontalement en faisant de la justification et en retrouvant à nouveau les possibilités de flexbox :

Sélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      justify-content-start
    </div>
    <div class="col-4">
      justify-content-start
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      justify-content-center
    </div>
    <div class="col-4">
      justify-content-center
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      justify-content-end
    </div>
    <div class="col-4">
      justify-content-end
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      justify-content-around
    </div>
    <div class="col-4">
      justify-content-around
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      justify-content-between
    </div>
    <div class="col-4">
      justify-content-between
    </div>
  </div>
</div>

On peut aussi adapter cet alignement selon le support avec des classes justify-content-sm-*, justify-content-md-* …

VI-C. Les classes pour masquer ou afficher▲

Dans tous les exemples que nous avons vus jusqu'à présent, on s'est contenté de modifier la disposition des éléments selon le support. Mais il arrive aussi que l'on ait besoin de carrément en masquer certains ou en afficher d'autres selon les cas. Pour réaliser cela Bootstrap nous propose aussi des classes.

Voici les classes d'affichage (display) de Bottstrap :

d-none
d-inline
d-inline-block
d-block
d-table
d-table-cell
d-table-row
d-flex
d-inline-flex

Ces classes se comprennent avec leur appellation, par exemple pour d-block on a cette simple règle :

Sélectionnez

.d-block {
  display: block !important;
}

Nous allons ici nous intéresser à la classe d-none qui utilise cette règle :

Sélectionnez

.d-none {
  display: none !important;
}

Là où ça devient intéressant, c'est que toutes les classes listées ont leurs variantes selon les supports, donc pour d-none par exemple on dispose de :

d-sm-none
d-md-none
d-lg-none
d-xl-none

Autrement dit on peut régler la visibilité d'un élément selon le support avec ces classes !

Prenons un exemple pour illustrer cela :

Sélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

<div class="container">
  <header class="row">
    <div class="col">
      Entete
    </div>
  </header>
  <div class="row">
    <section class="col">
      Section
      <div class="row">
        <article class="col-md-10">
          Article
        </article>
        <aside class="col d-none d-md-block">
          Aside
        </aside>
      </div>
    </section>
  </div>
  <footer class="row">
    <div class="col">
      Pied de page
    </div>
  </footer>
</div>

On a une mise en page simple avec cet aspect pour tablettes et grands écrans :

Pour les smartphones on veut que le aside disparaisse. On utilise donc de base la classe d-none pour empêcher l'affichage et la classe d-md-block pour avoir l'affichage à partir des tablettes. On obtient donc cet affichage :

Vous avez, je pense, compris le principe.

VI-D. Mise en page avec visibilité▲

Nous allons mettre en œuvre ce que nous venons de voir avec un nouvel exemple de mise en page. Le but est d'obtenir cette mise en page pour grands et très grands écrans :

Voici un premier code pour cette mise en page :

Sélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.

<div class="container">

  <header class="row">
    <div class="col">
      Entete
    </div>
  </header>

  <div class="row">

    <div class="col-lg-2">
      <div class="row">
        <aside class="col">
          Aside
        </aside>
        <div class="w-100"></div>
        <aside class="col">
          Aside
        </aside>
      </div>
    </div>

    <section class="col">
      Section
    </section>
    <div class="col-lg-2">
      <div class="row">
        <aside class="col">
          Aside
        </aside>
        <div class="w-100"></div>
        <aside class="col">
          Aside
        </aside>
      </div>
    </div>
  </div>
  <footer class="row">
    <div class="col">
      Pied de page
    </div>
  </footer>
</div>

Maintenant la question à se poser est : comment va réagir cette structure quand on va réduire la fenêtre ?

Comme j'ai mis des classes col-lg-*, tout va s'empiler sous 992px :

Si cet effet me convient, c'est parfait. Mais supposons que, sur tablette, je veuille cette structure :

Voilà le code pour l'obtenir :

Sélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.

<div class="container">

  <header class="row">
    <div class="col">
      Entete
    </div>
  </header>

  <div class="row">

    <div class="col-md-2">
      <div class="row">
        <aside class="col">
          Aside
        </aside>
        <div class="w-100"></div>
        <aside class="col">
          Aside
        </aside>
      </div>
    </div>

    <section class="col-md-10 col-lg-8">
      Section
    </section>
    <div class="col-lg-2">
      <div class="row">
        <aside class="col">
          Aside
        </aside>
        <div class="w-100"></div>
        <aside class="col">
          Aside
        </aside>
      </div>
    </div>
  </div>
  <footer class="row">
    <div class="col-lg">
      Pied de page
    </div>
  </footer>
</div>

Pour les premiers « aside », j'ai remplacé les classes col-lg-* par des classes col-md-* pour avoir un comportement de base pour tablettes. J'ai ensuite ajouté la classe col-md-10 pour la section.

Poursuivons cet exemple en supprimant les deux derniers « asides » sur les smartphones. Il suffit d'utiliser les classes d-none et d-md-block :

Sélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

<div class="col-lg-2 d-none d-md-block">
  <div class="row">
    <aside class="col">
      Aside
    </aside>
    <div class="w-100"></div>
    <aside class="col">
      Aside
    </aside>
  </div>
</div>

VI-E. Un dernier exemple pour résumer▲

Nous allons considérer un dernier exemple pour résumer ce que nous avons vu. Je veux obtenir le résultat visible à la figure suivante sur les grands et très grands écrans.

Donc un entête qui prend toute la largeur de l'écran, une navigation à gauche, deux sections accolées et un pied de page, le tout pour grand écran. Voici une solution :

Sélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.

<header class="container-fluid">
  <div class="row">
    <div class="col">
      Entete
    </div>
  </div>
</header>

<div class="container">

  <div class="row">

    <nav class="col-lg-2">
        Navigation
    </nav>
    <section class="col-lg-5">
      Section
    </section>
    <section class="col-lg-5">
      Section
    </section>
  </div>
  <footer class="row">
    <div class="col">
      Pied de page
    </div>
  </footer>
</div>

Maintenant je me dis que mon application serait bien aussi sur tablette. Si je ne fais rien, j'obtiens ce résultat :

Ça ne me plaît pas trop, j'aimerais que les deux sections restent accolées :

Voici une solution simple (encore flexbox !) :

Sélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

<div class="row">
  <nav class="col-lg-2">
      Navigation
  </nav>
  <section class="col">
    Section
  </section>
  <section class="col">
    Section
  </section>
</div>

Après réflexion, je me dis que mon application irait bien aussi sur smartphone en mode paysage, l'empilement des éléments me convient, mais j'aimerais avoir un entête différent. Après une nouvelle réflexion, j'en veux aussi une différente sur smartphone en mode portrait. Avec les classes « responsives » vues précédemment, c'est facile à réaliser :

Sélectionnez

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

<header class="container-fluid">
  <div class="row">
    <div class="col d-none d-lg-block">
      Entete large
    </div>
    <div class="col d-none d-md-block d-lg-none">
      Entete tablette
    </div>
    <div class="col d-none d-sm-block d-md-none">
      Entete smartphone paysage
    </div>
    <div class="col d-sm-none">
      Entete smartphone portrait
    </div>
  </div>
</header>

L'entête correct s'affiche pour chaque support.

VI-F. En résumé▲

On dispose de classes pour cacher ou afficher des éléments selon le support utilisé.
Il est possible avec la grille de régler très finement le rendu des pages selon les supports de visualisation.
On a vu sur des exemples pratiques qu'il est facile de faire des mises en page même complexes sans trop d'effort.

Copyright © 2019 Maurice Chavelli. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.