Bootstrap 5 : Composants

Composants de Bootstrap

Objectif

Découverte des composants de Bootstrap
Composants structurants
Composants informatifs

1. Menu de navigation

La classe .nav est la classe principale de Bootstrap dédiée à la création de barres de navigation. Construite avec Flexbox, elle applique par défaut certains styles spécifiques comme :

.nav {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

1.1. Créer un menu de navigation

Pour mettre en place une barre de navigation, on applique la classe .nav à l’élément qui la représente, généralement une liste <ul>. Il est recommandé d’entourer cette liste d’une balise <nav> afin de bien signaler qu’il s’agit d’un composant de navigation.

Ensuite, pour styliser les différents éléments du menu, on utilise :

.nav-item sur les <li> (éléments de navigation ou onglets).
.nav-link sur les <a> (liens de navigation).

Testez ce bloc de code dans un nouveau fichier html.

1.2. Alignement

La classe .nav utilise le modèle Flexbox, ce qui permet d’aligner les éléments de navigation de manière flexible. On peut ainsi les centrer avec .justify-content-center ou les aligner à droite avec .justify-content-end.

Complétez le fichier précédent avec des menus de navigation comportant les 3 alignements.

1.3. Direction

Pour obtenir un menu de navigation vertical au lieu d’horizontal, il suffit d’ajouter la classe .flex-column à l’élément de classe .nav.

Complétez le fichier précédent avec un menu de navigation vertical.

1.4. Taille des éléments

On peut faire en sorte que les éléments de navigation occupent tout l’espace disponible en ajoutant la classe .nav-fill ou .nav-justified à l’élément .nav.

Avec .nav-fill, la largeur des éléments varie en fonction de leur contenu.
Avec .nav-justified, chaque élément occupe exactement la même largeur.

Testez ce bloc de code dans un nouveau fichier html.

Observez le positionnement des éléments en fonction de la largeur de l’écran.

1.5. onglets et pills

Pour personnaliser l’apparence du menu, on peut utiliser .nav-tabs pour un affichage sous forme d’onglets ou .nav-pills pour un style en forme d’arrondis pleins. Ces classes permettent également d’utiliser .active pour indiquer l’élément sélectionné, ce qui n’a aucun effet avec .nav seule.

Testez ce bloc de code dans un nouveau fichier html.

1.6. menu responsive

Pour créer un menu de navigation adaptatif, on peut exploiter les classes Flexbox responsives. Par exemple, on peut afficher le menu en colonne sur les petits écrans, puis en ligne lorsque la largeur de la fenêtre dépasse 768 px.

Testez ce bloc de code dans un nouveau fichier html.

Observez le positionnement des éléments autour du breakpoint.

2. Menus déroulants

Le composant d’élément déroulant dropdown de Bootstrap permet d’afficher et de replier des listes d’éléments en cliquant sur un élément déclencheur. Nous pouvons l’intégrer avec .nav pour concevoir des menus déroulants.

Les menus déroulants s’appuient sur une bibliothèque Javascipt tierce, Popper, qui assure le positionnement dynamique et la détection de la fenêtre d’affichage. Cette bibliothèque est inclue dans bootstrap.bundle.min.js.

2.1. Création d’un dropdown

Pour créer un dropdown, il faut ajouter la classe .dropdown à un élément conteneur. Le déclenchement du menu peut se faire via un élément <a> (lien) ou <button> (bouton), auquel on applique l’attribut data-bs-toggle="dropdown-toggle". Cela permet d’afficher ou masquer le contenu déroulant.

Le menu déroulant lui-même est défini dans un <div> ou <ul> avec la classe .dropdown-menu. À l’intérieur, on peut inclure :

Des éléments interactifs (<button> ou <a>) avec la classe .dropdown-item.
Des éléments non interactifs avec la classe .dropdown-item-text.

L’usage des menus basé sur des listes est le plus commun.

Testez ce bloc de code dans un nouveau fichier html.

code dropdown

<div class="container">
    <h1>Dropdowns</h1>
    <div class="row">
        <div class="col dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" id="deroulant1"
               data-bs-toggle="dropdown">Lien</a>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Lien</a></li>
                <li>
                    <button class="dropdown-item" type="button">Bouton</button>
                </li>
                <li class="dropdown-item-text">Texte</li>
            </ul>
        </div>
        <div class="col dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" id="deroulant2"
               data-bs-toggle="dropdown">Lien</a>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Lien</a>
                <button class="dropdown-item" type="button">Bouton</button>
                <span class="dropdown-item-text">Texte</span>
            </div>
        </div>
        <div class="col dropdown">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="deroulant3" data-bs-toggle="dropdown">
                Bouton
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Lien</a></li>
                <li>
                    <button class="dropdown-item" type="button">Bouton</button>
                </li>
                <li class="dropdown-item-text">Texte</li>
            </ul>
        </div>
    </div>
</div>

2.2. Modifier la direction

Par défaut, le menu s’ouvre vers le bas, mais on peut changer sa direction en remplaçant .dropdown par :

.dropup (menu vers le haut)
.dropend (menu vers la droite)
.dropstart (menu vers la gauche)

Ce comportement fonctionne uniquement si l’espace disponible le permet.

Testez ce bloc de code dans un nouveau fichier html.

code dropdown directions

<div class="container">
    <h1>Dropdowns</h1>
    <div class="row mb-5 mt-5">
        <div class="col dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" id="deroulant1"
               data-bs-toggle="dropdown">Dropdown</a>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Lien</a></li>
                <li>
                    <button class="dropdown-item" type="button">Bouton</button>
                </li>
                <li class="dropdown-item-text">Texte</li>
            </ul>
        </div>
        <div class="col mt-5 dropup">
            <a class="nav-link dropdown-toggle" href="#" role="button" id="deroulant2" data-bs-toggle="dropdown"
               aria-haspopup="true" aria-expanded="false">Dropup</a>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Lien</a></li>
                <li>
                    <button class="dropdown-item" type="button">Bouton</button>
                </li>
                <li class="dropdown-item-text">Texte</li>
            </ul>
        </div>
    </div>
    <hr/>
    <div class="d-flex justify-content-center align-items-center">
        <div class="dropend">
            <a class="nav-link dropdown-toggle" href="#" id="deroulant3" data-bs-toggle="dropdown">Dropright</a>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Lien</a></li>
                <li>
                    <button class="dropdown-item" type="button">Bouton</button>
                </li>
                <li class="dropdown-item-text">Texte</li>
            </ul>
        </div>
    </div>
    <div class="d-flex justify-content-center align-items-center">
        <div class="dropstart">
            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropstart</a>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Lien</a></li>
                <li>
                    <button class="dropdown-item" type="button">Bouton</button>
                </li>
                <li class="dropdown-item-text">Texte</li>
            </ul>
        </div>
    </div>
</div>

2.3. Modifier l’alignement du menu

L’alignement du menu peut être ajusté grâce aux classes :

.dropdown-menu-start (alignement à gauche, comportement par défaut)
.dropdown-menu-end (alignement à droite)

On peut également appliquer un alignement responsive avec l’attribut data-bs-display="static" et les classes .dropdown-menu{-sm|-md|-lg|-xl}-{start|end}.

Testez ce bloc de code dans un nouveau fichier html.

code dropdown alignements

<div class="container">
    <h1>Navigation</h1>
    <div class="btn-group dropdown">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static">
            dropdown-menu-md-end
        </button>
        <ul class="dropdown-menu dropdown-menu-md-end">
            <li><a class="dropdown-item" href="#">Lien</a></li>
            <li>
                <button class="dropdown-item" type="button">Bouton</button>
            </li>
            <li class="dropdown-item-text">Texte</li>
        </ul>
    </div>
</div>

Remarque : On peut utiliser .btn-group avec .dropdown pour éviter que l’élément ne prenne toute la largeur disponible, garantissant ainsi un alignement correct du menu déroulant. On peut même utiliser .btn-group sans .dropdown car un dropdown va fonctionner avec un conteneur portant une classe .dropdown ou avec tout conteneur positionné de façon relative, ce qui est le cas des éléments avec une classe .btn-group.

2.4. Personnalisation des éléments déroulants

Les éléments des menus déroulants peuvent être personnalisés avec les classes :

.dropdown-header pour afficher un titre dans le menu.
.dropdown-divider pour ajouter une ligne de séparation entre deux éléments.
.dropdown-item-text pour ajouter du texte indicatif. La mise en forme suit alors celle de la balise de l’élément
.active ou .disabled pour metre en évidence un élément ou le désactiver.

Testez ce bloc de code dans un nouveau fichier html.

code dropdown personnalisation

<div class="container">
    <h1>Dropdowns</h1>
    <div class="dropdown">
        <button type="button" class="btn btn-secondary dropdown-toggle" id="deroulant1" data-bs-toggle="dropdown">
            Éléments dropdown
        </button>
        <div class="dropdown-menu">
            <h1 class="dropdown-header">Titre du menu</h1>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Lien 1</a>
            <a class="dropdown-item active" href="#">Lien 2</a>
            <a class="dropdown-item disabled" href="#">Lien 2</a>
            <div class="dropdown-divider"></div>
            <p class="dropdown-item-text">Du texte</p>
        </div>
    </div>
</div>

Par ailleurs, le menu peut changer de thème par la classe .dropdown-menu-dark utilisée conjointement à .dropdown-menu. Il peut aussi être déplacé par rapport à l’élément déclenchant l’ouverture du menu en appliquant l’attribut data-bs-offset="x,y" où x et y sont les pixels de décalage. Comme pour les boutons, la taille peut être ajustée par les classes .btn-lg et .btn-sm.

Modifiez le dropdown précédent pour l’afficher en sombre. Déplacez-le dans les 2 directions horizontales et verticales. Testez la modification de taille.

L’attribut data-bs-offset appliqué à l’élément déclenchant modifie le comportement de fermeture du menu. Les valeurs suivantes peuvent être utilisées :

"true" comportement par défaut
"inside" : extérieur clickable
"outside" : intérieur clickable
"false" : fermeture manuelle

Copiez 4 fois le dropdown du fichier précédent pour appliquer les 4 valeurs possibles à data-bs-offset et comparez les comportements.

2.5. Intégration d’un menu déroulant dans une navigation

Il est possible d’associer les classes .dropdown- aux classes .nav- pour créer des menus déroulants dans une barre de navigation.

Étapes :

Ajouter la classe .nav à l’élément principal du menu.
Appliquer .dropdown aux éléments contenant des sous-menus.
Ajouter .dropdown-toggle aux liens pour permettre l’ouverture/fermeture des sous-menus.
Utiliser .dropdown-menu pour structurer le sous-menu et .dropdown-item pour chaque option.

Testez ce bloc de code dans un nouveau fichier html.

code navigation dropdown

<div class="container">
    <h1>Navigation & Dropdowns</h1>
    <nav>
        <ul class="nav">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Accueil</a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">Qui sommes-nous ?</a>
                    <a class="dropdown-item" href="#">Notre histoire</a>
                    <a class="dropdown-item" href="#">Nos valeurs</a>
                </div>
            </li>
            <li class="nav-item"><a class="nav-link " href="#">Articles</a></li>
            <li class="nav-item">
                <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Forum</a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">Public</a>
                    <a class="dropdown-item" href="#">Privé</a>
                    <a class="dropdown-item" href="#">Inscription</a>
                </div>
            </li>
            <li class="nav-item"><a class="nav-link " href="#">Contact</a></li>
        </ul>
    </nav>
</div>

3. Barres de navigation complexes

Les barres de navigation prennent en charge plusieurs sous-composants parmi les classes :

.navbar-brand pour le nom d’une entreprise, produit ou projet.
.navbar-nav pour structurer un menu de navigation de pleine hauteur et léger, y compris avec la prise en charge des menus déroulants.
.navbar-toggler à utiliser avec le plugin de réduction et d’autres comportements de basculement de navigation .
de flexibilité et d’espacement pour tous les contrôles et actions de formulaire.
.navbar-text pour ajouter des chaînes de texte centrées verticalement.
.collapse et .navbar-collapse pour regrouper et masquer le contenu de la barre de navigation en fonction d’un breakpoint d’élément parent.
.navbar-scroll et la définition CSS de max-height pour faire défiler le contenu de la barre de navigation étendue .

3.1. Barre de navigation

Pour créer une barre de navigation avec Bootstrap, il faut ajouter la classe .navbar à un élément conteneur, généralement une balise <nav> ou <div>. Par défaut, ces barres ont une taille fluide, s’adaptant automatiquement à la largeur de la fenêtre.

La classe .navbar-brand applique des styles spécifiques au nom de la marque et peut être utilisée sur divers éléments HTML.

Testez ce bloc de code dans un nouveau fichier html.

code navbar step1

<div class="container">
    <h1>Navbar 1</h1>
</div>

<nav class="navbar navbar-dark bg-dark">
        <a class="navbar-brand" href="#">John Doe</a>
</nav>

La classe .navbar-nav fonctionne de manière similaire à .nav. Par défaut, les éléments du menu s’affichent en colonne, mais en ajoutant .navbar-expand{-sm|-md|-lg|-xl|xxl}, ils peuvent apparaître en ligne selon la taille de l’écran.

Testez ce bloc de code en complétement de la précédente manipulation.

code navbar step2

<div class="container">
    <h1>Navbar 2</h1>
</div>

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <a class="navbar-brand" href="#">John Doe</a>
    <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link" href="#">Technology</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Education</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Travels</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
    </ul>
</nav>

Il est également possible d’ajouter un menu déroulant grâce aux classes .dropdown-*.

Testez ce bloc de code en complétement de la précédente manipulation.

code navbar step3

<div class="container">
    <h1>Navbar 3</h1>
</div>
<nav class="navbar navbar-expand navbar-dark bg-dark">
    <a class="navbar-brand" href="#">John Doe</a>
    <ul class="navbar-nav">
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Technology</a>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">HTML, CSS</a>
                <a class="dropdown-item" href="#">JavaScript</a>
                <a class="dropdown-item" href="#">Linux</a>
            </div>
        </li>
        <li class="nav-item"><a class="nav-link " href="#">Travels</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Education</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
    </ul>
</nav>

Pour intégrer un champ de recherche horizontal dans la barre de navigation, on utilise des élements de formulaire comme vus précédement dans un conteneur .d-flex. Afin d’aligner le champ à droite, on peut ajouter .me-auto au menu.

Les enfants immédiats de .navbar sont flexibles avec par défaut justify-content: space-between. Ce comportement peut être ajusté par .justify-content-*.

Testez ce bloc de code en complétement de la précédente manipulation.

code navbar step4

<div class="container">
    <h1>Navbar 4</h1>
</div>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <div class="container-fluid"> <!--ajout de marges horizontales-->
        <a class="navbar-brand" href="#">John Doe</a>
        <ul class="navbar-nav me-auto"> <!--marge finale auto pour alignement gauche-->
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" role="button">Technology</a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#">HTML, CSS</a>
                    <a class="dropdown-item" href="#">JavaScript</a>
                    <a class="dropdown-item" href="#">Linux</a>
                </div>
            </li>
            <li class="nav-item"><a class="nav-link " href="#">Travels</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Education</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
        </ul>
        <form class="d-flex flex-row">
            <input class="form-control me-sm-2" type="search" placeholder="Search">
            <button class="btn btn-outline-warning my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>

3.2. Barre de navigation responsive

Les barres de navigation Bootstrap s’ajustent automatiquement à la taille de l’écran, mais il est souvent préférable d’améliorer leur adaptabilité. Par exemple, sur les petits écrans, on peut masquer le texte du menu et afficher à la place une icône permettant de l’ouvrir.

Pour cela :

On ajoute la classe .navbar-expand-* à .navbar pour définir à partir de quelle taille de fenêtre le menu doit être affiché en texte.
On entoure les éléments à cacher avec .collapse et .navbar-collapse.
On utilise .navbar-toggler et .navbar-toggler-icon pour insérer une icône « burger » qui affiche/masque le menu sur petit écran.
Le toggler réagit aux déclenchements s’il est un bouton. Les attributs data-bs-toggle="collapse" et data-bs-target="#…id des éléments à cacher…" relient ce bouton au dévellopement des éléments cachés.

Testez ce bloc de code en complétement de la précédente manipulation.

code navbar step5

<div class="container">
    <h1>Navbar 5</h1>
</div>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">John Doe</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarContent">
            <ul class="navbar-nav me-auto"> <!--marge finale auto pour alignement gauche-->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" role="button">Technology</a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">HTML, CSS</a>
                        <a class="dropdown-item" href="#">JavaScript</a>
                        <a class="dropdown-item" href="#">Linux</a>
                    </div>
                </li>
                <li class="nav-item"><a class="nav-link " href="#">Travels</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Education</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
            </ul>
            <form class="d-flex flex-row col-6">
                <input class="form-control me-sm-2" type="search" placeholder="Search">
                <button class="btn btn-outline-warning my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
    </div>
</nav>

3.3. Couleur de la barre de navigation

Bootstrap propose deux classes pour modifier les couleurs du texte :

.navbar-dark : applique un texte clair, idéal pour un fond foncé.
.navbar-light : applique un texte foncé, recommandé pour un fond clair.

Ces classes peuvent être combinées aux .bg-* ou tout style CSS background-color.

Testez la modification de couleur de fond et thème clair ou foncé en complétement de la précédente manipulation.

3.4. Positionnement

Par défaut les .navbar suivent le flux de positionnement de la page. Les classes fixed-bottom , fixed-top, sticky-top donnent une position statique aux barres de navigation

Testez dans un nouveau fichier les différents positionnements de la barre de navigation responsive dans une page contenant plusieurs paragraphes lorem ipsum … pour observer le défilement du contenu.

3.5. Scrolling

La classe .navbar-nav-scroll associée à un .navbar-nav (ou à un autre sous-composant de la barre de navigation) active le défilement vertical dans le contenu replié d’une barre de navigation. Par défaut, le défilement s’active à 75vh (soit 75 % de la hauteur de la fenêtre), mais on peut modifier cette valeur avec la propriété CSS personnalisée --bs-navbar-height. Sur des écrans plus grands, lorsque la barre de navigation est déployée, le contenu s’affichera normalement, comme dans une barre de navigation classique.

Reprenez la barre de navigation responsive et appliquez un scrolling sur la liste de menu sur une hauteur de 100px.

4. Autres composants de navigation

4.1. Fil d’Ariane (Breadcrumb)

Le fil d’Ariane aide les utilisateurs et les moteurs de recherche à se repérer dans la structure d’un site en indiquant la position d’une page par rapport aux autres. Avec Bootstrap, il suffit d’ajouter la classe .breadcrumb à un élément <nav> et à une liste, ainsi que .breadcrumb-item aux différents éléments du fil.

Les séparateurs sont / par défaut. La propriété CSS style="--bs-breadcrumb-divider: 'caractère_séparateur';" permet de personnaliser ce séparateur. Par exemple :

Pour le caractère > : style="--bs-breadcrumb-divider: '>';" (fonctionne aussi avec les entités HTML)
Pour supprimer le séparateur : style="--bs-breadcrumb-divider: '';"
Pour un icone svg déclaré localement :

style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E&#34;);"

Testez ce bloc de code dans un nouveau fichier html.

Modifiez le séparateur avec l’icone svg en exemple ci-dessus, l’entité HTML ☞.

4.2. Pagination

Pour créer une pagination, on utilise une liste <ul> avec la classe .pagination. Chaque élément de la liste reçoit .page-item, et les liens à l’intérieur .page-link. Pour une meilleure accessibilité, il est recommandé d’imbriquer la pagination dans un élément <nav> avec un attribut aria-label. L’alignement peut être ajusté avec .justify-content-*.

Testez ce bloc de code dans un nouveau fichier html.

4.3. Repérage dans la page : Scrollspy

Le composant Scrollspy met automatiquement en surbrillance un élément de navigation en fonction de la position de l’utilisateur dans la page.

Pour l’implémenter, il faut : . Ajouter data-spy="scroll" à l’élément contenant la zone défilable (qui doit avoir position: relative). . Assigner des id aux sections concernées. . Utiliser un groupe de liste ou un composant de navigation avec des liens (<a href="#id">) pour suivre le défilement.

Testez ce bloc de code dans un nouveau fichier html.

code scrollspy

<div class="container" data-spy="scroll" >
    <nav class="navbar navbar-expand navbar-dark bg-dark fixed-top" id="exemple-scrollspy">
        <a class="navbar-brand" href="#">John Doe</a>
        <ul class="navbar-nav ml-auto">
            <li class="nav-item"><a class="nav-link" href="#chapter1">Ch. 1</a></li>
            <li class="nav-item"><a class="nav-link" href="#chapter2">Ch. 2</a></li>
            <li class="nav-item"><a class="nav-link" href="#chapter3">Ch. 3</a></li>
            <li class="nav-item"><a class="nav-link" href="#chapter4">Ch. 4</a></li>
            <li class="nav-item"><a class="nav-link" href="#chapter5">Ch. 5</a></li>
        </ul>
    </nav>
    <br>
    <h3 class="pt-5" id="chapter1">Chapter 1</h3>
    <p>Siquis enim militarium vel honoratorum aut nobilis inter suos rumore tenus esset insimulatus fovisse partes
        hostiles, iniecto onere catenarum in modum beluae trahebatur et inimico urgente vel nullo, quasi sufficiente hoc
        solo, quod nominatus esset aut delatus aut postulatus, capite vel multatione bonorum aut insulari solitudine
        damnabatur.</p>

    <h3 id="chapter2">Chapter 2</h3>
    <p>Iam virtutem ex consuetudine vitae sermonisque nostri interpretemur nec eam, ut quidam docti, verborum
        magnificentia metiamur virosque bonos eos, qui habentur, numeremus, Paulos, Catones, Galos, Scipiones, Philos;
        his communis vita contenta est; eos autem omittamus, qui omnino nusquam reperiuntur.</p>

    <h3 id="chapter3">Chapter 3</h3>
    <p>Erat autem diritatis eius hoc quoque indicium nec obscurum nec latens, quod ludicris cruentis delectabatur et in
        circo sex vel septem aliquotiens vetitis certaminibus pugilum vicissim se concidentium perfusorumque sanguine
        specie ut lucratus ingentia laetabatur.</p>

    <h3 id="chapter4">Chapter 4</h3>
    <p>Quid enim tam absurdum quam delectari multis inanimis rebus, ut honore, ut gloria, ut aedificio, ut vestitu
        cultuque corporis, animante virtute praedito, eo qui vel amare vel, ut ita dicam, redamare possit, non admodum
        delectari? Nihil est enim remuneratione benevolentiae, nihil vicissitudine studiorum officiorumque
        iucundius.</p>

    <h3 id="chapter5">Chapter 5</h3>
    <p>Eodem tempore Serenianus ex duce, cuius ignavia populatam in Phoenice Celsen ante rettulimus, pulsatae maiestatis
        imperii reus iure postulatus ac lege, incertum qua potuit suffragatione absolvi, aperte convictus familiarem
        suum cum pileo, quo caput operiebat, incantato vetitis artibus ad templum misisse fatidicum, quaeritatum
        expresse an ei firmum portenderetur imperium, ut cupiebat, et cunctum. Eodem tempore Serenianus ex duce, cuius
        ignavia populatam in Phoenice Celsen ante rettulimus, pulsatae maiestatis imperii reus iure postulatus ac lege,
        incertum qua potuit suffragatione absolvi, aperte convictus familiarem suum cum pileo, quo caput operiebat,
        incantato vetitis artibus ad templum misisse fatidicum, quaeritatum expresse an ei firmum portenderetur
        imperium, ut cupiebat, et cunctum.</p>
</div>

5. Composants informatifs

5.1. Alertes

Les alertes Bootstrap permettent d’afficher des messages contextuels liés aux actions des utilisateurs, comme lors de la soumission d’un formulaire.

5.1.1. Mise en place

Ajouter la classe .alert à un élément <div>.
Personnaliser la couleur avec .alert-{couleur-contextuelle}.
Appliquer .alert-link aux liens pour harmoniser leur couleur avec l’alerte.

Testez ce bloc de code dans un nouveau fichier html.

code alertes

<div class="container">
    <div class="alert alert-primary">Une alerte avec <a href="#" class="alert-link">un lien</a>.</div>
    <div class="alert alert-secondary">Une alerte avec <a href="#" class="alert-link">un lien</a>.</div>
    <div class="alert alert-success">Une alerte avec <a href="#" class="alert-link">un lien</a>.</div>
    <div class="alert alert-warning">Une alerte avec <a href="#" class="alert-link">un lien</a>.</div>
    <div class="alert alert-danger">Une alerte avec <a href="#" class="alert-link">un lien</a>.</div>
    <div class="alert alert-info">Une alerte avec <a href="#" class="alert-link">un lien</a>.</div>
    <div class="alert alert-light">Une alerte avec <a href="#" class="alert-link">un lien</a>.</div>
    <div class="alert alert-dark">Une alerte avec <a href="#" class="alert-link">un lien</a>.</div>
</div>

5.1.2. Fermeture d’une alerte

Pour permettre aux utilisateurs de fermer une alerte, il faut :

Ajouter un bouton avec la classe .close et l’attribut data-bs-dismiss="alert".
Utiliser .alert-dismissible, .fade et .show pour ajuster l’apparence et l’effet de fermeture.

Testez ce bloc de code à la suite du précédent fichier html.

code alerte close

<div class="container">
    <div class="alert alert-warning alert-dismissible fade show" role="alert">
        Vous pouvez fermer cette alerte en cliquant sur la croix à droite
        <button type="button" class="btn-close" data-bs-dismiss="alert" >
        </button>
    </div>
</div>

5.2. Boites modales

Les modales sont des fenêtres de dialogue superposées au contenu principal, restant visibles même lors du défilement grâce à position: fixed.

Pour mettre en place un modal, il faut :

Trois conteneurs imbriqués avec les classes :
- .modal
- .modal-dialog
- .modal-content
Trois sections internes au .modal-content avec :
- .modal-header (en-tête)
- .modal-body (contenu)
- .modal-footer (pied de page)

L’attribut tabindex permet de gérer le focus clavier (une valeur négative l’exclut de la navigation). Pour un contenu long, on peut ajouter ajouter .modal-dialog-scrollable à .modal-dialog afin d’activer le défilement interne. Le centrage vertical est possible via .modal-dialog-centered associé à .modal-dialog.

Testez ce bloc de code dans un nouveau fichier html.

code modal

<div class="container">
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
        Démo modal
    </button>
    <div class="modal fade" id="exampleModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Titre</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>Texte du modal + choix et actions...</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                    <button type="button" class="btn btn-primary">Enregistrer</button>
                </div>
            </div>
        </div>
    </div>
</div>

Testez le centrage et scroll du contenu.

5.3. Boîtes d’aide (Tooltips)

Les tooltips sont de petites fenêtres textuelles qui apparaissent au survol d’un élément.

Mise en place :

Ajouter à la fin de la page html, le code:

<script>
// Initialize tooltips
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>

Ajouter data-bs-toggle="tooltip" à l’élément concerné.
Définir le texte d’aide via title.
Contrôler leur position avec data-bs-placement="top|right|bottom|left".

Testez ce bloc de code dans un nouveau fichier html.

5.4. Popovers

Les popovers ressemblent aux tooltips, mais nécessitent un clic pour s’afficher et permettent d’afficher plus de contenu.

Là aussi il faut :

Ajouter à la fin de la page html, le code:

<script>
// Initialize popover
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})
</script>

Ajouter data-bs-toggle="popover" à l’élément.
Définir un titre avec title et du contenu avec data-content.
Spécifier leur emplacement avec data-bs-placement="top|right|bottom|left".

Complétez le fichier html précédent avec deux boutons popover comme les tooltips.

5.5. Badges

Les badges servent à ajouter une indication, comme un libellé ou un compteur, à un élément.

Ajouter la classe .badge à un élément inline (ex : <span>).
Définir une couleur de fond avec .bg-{primary|success|…}.
Ajouter .badge-pill pour un badge aux contours arrondis.

Les badges s’adaptent automatiquement à la taille de leur parent.

Les badges peuvent être positionnés par les classes .position-relative, .position-absolute, .{top|start}-{0|50|100} …

Testez ce bloc de code dans un nouveau fichier html.

6. Autres composants

6.1. Cards

Le composant card est un conteneur flexible qui permet d’afficher du contenu sous forme de boîte rectangulaire avec une bordure. Il peut contenir un en-tête, un corps et un pied de page.

Les cartes n’ont pas de taille définie par défaut, elles s’adaptent automatiquement pour remplir l’espace disponible dans leur conteneur. De plus, elles ne disposent pas de marges externes.

6.1.1. Structure d’une carte

Pour créer une carte, il faut d’abord ajouter la classe .card à un élément conteneur, comme un <div>. Ensuite, la carte peut être structurée en trois sections distinctes :

Un en-tête avec .card-header
Un corps avec .card-body
Un pied de page avec .card-footer

Testez ce bloc de code dans un nouveau fichier html.

6.1.2. Éléments et classes associées

Une carte peut contenir divers éléments HTML tels que du texte, des images, des listes ou encore des liens. Pour assurer une mise en forme adaptée, il est nécessaire d’utiliser des classes spécifiques de type card-*.

Titres et sous-titres : La classe .card-title est utilisée pour les titres, tandis que .card-subtitle sert aux sous-titres.
Texte : La classe .card-text permet de styliser le contenu textuel.
Liens : Les liens doivent être accompagnés de la classe .card-link.
Image : Plusieurs options sont disponibles pour intégrer des images :
- .card-img permet d’ajouter une image en arrière-plan d’une section spécifique.
- .card-img-top et .card-img-bottom mise forme respectivement d’une image en haut ou en bas de la carte.

L’image doit être placée en premier ou en dernier élément pour occuper toute la largeur de la carte.

Testez ce bloc de code dans un nouveau fichier html.

6.1.3. Disposition des cartes

Avec la classe .card-group, les cartes seront alignées sans espace entre elles.

En revanche, en optant pour une dipossition utiilsant conteneur de ligne et colones, elles seront disposées avec des marges créant un espacement entre chaque carte.

Testez ce bloc de code dans un nouveau fichier html.

code card groupes

<div class="container">
    <h1>Cartes</h1>
    <h2>Card-group :</h2>
    <div class="card-group">
        <div class="card">
            <div class="card-header">En-tête de la première carte</div>
            <div class="card-body">
                <h3 class="card-title">Titre de la première carte</h5>
                    <p class="card-text">Une ligne de texte dans notre première carte.</p>
                    <p class="card-text"><small class="text-muted">Ligne de texte supplémentaire</small></p>
            </div>
            <div class="card-footer">Pied de la première carte</div>
        </div>
        <div class="card">
            <div class="card-header">En-tête de la seconde carte</div>
            <div class="card-body">
                <h3 class="card-title">Titre de la seconde carte</h5>
                    <p class="card-text">Une ligne de texte dans notre seconde carte.</p>
            </div>
            <div class="card-footer">Pied de la seconde carte</div>
        </div>
    </div>

    <h2>Card-grid :</h2>
    <div class="row">
        <div class="col-sm-6">
            <div class="card">
                <div class="card-header">En-tête de la première carte</div>
                <div class="card-body">
                    <h3 class="card-title">Titre de la première carte</h5>
                        <p class="card-text">Une ligne de texte dans notre première carte.</p>
                        <p class="card-text"><small class="text-muted">Ligne de texte supplémentaire</small></p>
                </div>
                <div class="card-footer">En-tête de la première carte</div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="card">
                <div class="card-header">En-tête de la seconde carte</div>
                <div class="card-body">
                    <h3 class="card-title">Titre de la seconde carte</h5>
                        <p class="card-text">Une ligne de texte dans notre seconde carte.</p>
                </div>
                <div class="card-footer">Pied de la seconde carte</div>
            </div>
        </div>
    </div>
</div>

Pour des organisations plus complexes, les classes responsives .row-col-- seront utilisées.

Testez ce bloc de code dans un nouveau fichier html.

code card responsives

<div class="container">
    <h1>Cartes</h1>
    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4">
        <div class="col">
            <div class="card my-3">
                <div class="card-header">En-tête de la première carte</div>
                <div class="card-body">
                    <h3 class="card-title">Titre de la première carte</h5>
                        <p class="card-text">Une ligne de texte dans notre première carte.</p>
                        <p class="card-text"><small class="text-muted">Ligne de texte supplémentaire</small></p>
                </div>
                <div class="card-footer">Pied de la première carte</div>
            </div>
        </div>
        <div class="col">
            <div class="card bg-primary text-light my-3">
                <div class="card-body">
                    <h3 class="card-title">Titre de la carte 2</h5>
                        <p class="card-text">Texte de la carte.</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card my-3">
                <div class="card-body">
                    <p class="card-text"><b>3</b> Une carte avec simplement du texte.</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card bg-warning  my-3">
                <div class="card-header">En-tête de la carte 4</div>
                <div class="card-body">
                    <h3 class="card-title">Titre de la carte</h5>
                        <p class="card-text">Une ligne de texte dans notre carte.</p>
                </div>
                <div class="card-footer">Pied de la seconde carte</div>
            </div>
        </div>
        <div class="col">
            <div class="card  my-3">
                <div class="card-header">En-tête de la carte 5</div>
                <div class="card-body">Une ligne de texte dans notre carte.</div>
            </div>
        </div>
        <div class="col">
            <div class="card  my-3">
                <img src="https://www.w3.org/html/logo/downloads/HTML5_sticker.png" class="card-img-top"
                     alt="Accroche HTML">
                <div class="card-body">
                    <h3 class="card-title">Titre de la carte 6</h5>
                        <p class="card-text">Texte de la carte.</p>
                </div>
            </div>
        </div>
        <div class="col  my-3">
            <div class="card">
                <div class="card-body">
                    <h3 class="card-title">Titre de la carte 7</h5>
                        <p class="card-text">Texte de la carte.</p>
                        <p class="card-text"><small class="text-muted">Ligne de texte supplémentaire</small></p>
                </div>
            </div>
        </div>
    </div>
</div>

6.2. Collapse

Le composant collapse de Bootstrap permet aux utilisateurs d’afficher ou de masquer du contenu en ajustant sa hauteur, simulant ainsi un effet d’effondrement.

6.2.1. Créer un élément repliable

Pour rendre un élément visible ou caché au clic, on lui attribue la classe .collapse et un id.

Ensuite, on crée un déclencheur (bouton ou lien) qui contrôlera son affichage en lui ajoutant l’attribut data-bs-toggle="collapse".

Pour établir le lien entre les deux, on utilise l’attribut data-bs-target avec l’id de l’élément cible ou bien un href avec la même valeur.

Par défaut, l’élément reste masqué. Pour qu’il apparaisse immédiatement, on lui ajoute la classe .show.

Testez ce bloc de code dans un nouveau fichier html.

6.2.2. Collapse multiples

À l’aide de data-bs-target=".multi-collapse" et de classes pour pointer plusieurs élements, un déclencheur peut contôler plusieurs éfondrements.

Complétez le fichier précédent avec le code suivant :

code collapses multiples

<div class="container">
    <p>
        <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button">Bascule élement 1</a>
        <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2">Bascule élement 2</button>
        <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse">Bascule élements 1 et 2</button>
    </p>
    <div class="row">
        <div class="col">
            <div class="collapse multi-collapse" id="multiCollapseExample1">
                <div class="card card-body">
                   Texte du premier élément qui collapse.
                </div>
            </div>
        </div>
        <div class="col">
            <div class="collapse multi-collapse" id="multiCollapseExample2">
                <div class="card card-body">
                    Texte du deuxième élément qui collapse.
            </div>
        </div>
    </div>
</div>

6.3. Accordéons

Le composant accordéon de Bootstrap repose sur la fonctionnalité collapse pour rendre ses sections rétractables. Chaque section de l’accordéon contient une carte qui s’agrandit ou se replie lorsqu’on l’active, garantissant qu’une seule section est ouverte à la fois.

Pour créer un accordéon avec Bootstrap, il faut :

Créer un conteneur principal avec la classe .accordion qui englobe l’ensemble de l’accordéon.
Ajouter des éléments d’accordéon sous forme de .accordion-item.
Définir le bouton de contrôle avec .accordion-button, inséré dans un .accordion-header.
Créer la section collapsible avec .accordion-collapse et un id unique à chaque section pour être ciblée par data-bs-target.
Ajouter le contenu de l’accordéon à l’intérieur d’un .accordion-body.
- L’attribut data-bs-parent="#monAccordeon" de la section collapsible garantit qu’un seul élément est ouvert à la fois.
- La classe .collapse show permet d’afficher la première section par défaut.

Testez ce bloc de code dans un nouveau fichier html.

code accordéon

<div class="container">
    <h1>Accordéon</h1>
    <div class="accordion" id="exempleAccordeon">
        <div class="accordion-item">
            <div class="accordion-header" id="header1">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1">
                    Accordeon item n°1
                </button>
            </div>
            <div id="collapse1" class="collapse show accordion-collapse" data-bs-parent="#exempleAccordeon">
                <div class="accordion-body">
                    <p>Du texte à cacher / afficher grâce au composant collapse.</p>
                    <p><span class="small">Deuxième ligne de texte.</span></p>
                </div>
            </div>
        </div>

        <div class="accordion-item">
            <div class="accordion-header" id="header2">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2">
                    Accordeon item n°2
                </button>
            </div>
            <div id="collapse2" class="collapse accordion-collapse" data-bs-parent="#exempleAccordeon">
                <div class="accordion-body">
                    <p>Du texte à cacher / afficher grâce au composant collapse.</p>
                    <p><span class="small">Deuxième ligne de texte.</span></p>
                </div>
            </div>
        </div>

        <div class="accordion-item">
            <div class="accordion-header" id="header3">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3">
                    Accordeon item n°3
                </button>
            </div>
            <div id="collapse3" class="collapse accordion-collapse" data-bs-parent="#exempleAccordeon">
                <div class="card-body">
                    <p>Du texte à cacher / afficher grâce au composant collapse.</p>
                    <p><span class="small">Deuxième ligne de texte.</span></p>
                </div>
            </div>
        </div>
    </div>
</div>

La classe .accordion-flush est utilsée pour supprimer la couleur de fond par défaut, certaines bordures et les coins arrondis afin d’afficher les accordéons bord à bord avec leur conteneur parent.

En omettant l’attribut data-bs-parent sur chaque .accordion-collapse on permet aux éléments de l’accordéon de rester ouverts lorsqu’un autre élément est activé.

Testez ces deux personnalisations

6.4. Carrousel

Un carrousel est un diaporama permettant de faire défiler divers éléments, comme des images ou du texte. Avec Bootstrap, on peut facilement créer un carrousel en utilisant son composant dédié.

6.4.1. Création d’un carrousel basique

Pour intégrer un carrousel avec Bootstrap, il faut ajouter la classe .carousel à un conteneur principal ainsi que l’attribut data-bs-ride="carousel". L’ajout de la classe .slide permet de générer un effet de transition fluide entre les diapositives.

Les diapositives sont définies dans un élément avec la classe .carousel-inner, qui contient plusieurs éléments .carousel-item. Une des diapositives doit obligatoirement comporter la classe .active pour être affichée au chargement de la page.

Un exemple simple consiste à faire défiler trois images en boucle. Téléchargez pour cela les fichiers :

bootstrap-carrousel-slide-1.jpg ;

bootstrap-carrousel-slide-2.jpg

bootstrap-carrousel-slide-3.jpg

Testez ce bloc de code dans un nouveau fichier html.

code carousel

<div class="container">
    <h1>Carrousel</h1>
    <div id="demo" class="carousel slide carousel-fade" data-bs-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="../img/bootstrap-carrousel-slide-1.jpg" alt="Carrousel slide 1"
                     class="d-block w-100">
            </div>
            <div class="carousel-item">
                <img src="../img//bootstrap-carrousel-slide-2.jpg" alt="Carrousel slide 2"
                     class="d-block w-100">
            </div>
            <div class="carousel-item">
                <img src="../img//bootstrap-carrousel-slide-3.jpg" alt="Carrousel slide 3"
                     class="d-block w-100">
            </div>
        </div>
    </div>
</div>

6.4.2. Contrôles, indicateurs et légendes

On peut enrichir le carrousel avec des contrôles de navigation (flèches précédent/suivant) et des indicateurs pour signaler la diapositive en cours d’affichage.

Les contrôles sont ajoutés grâce aux classes .carousel-control-next et .carousel-control-prev, tandis que les indicateurs utilisent la classe .carousel-indicators. Pour identifier chaque carrousel lorsqu’il y en a plusieurs sur une page, l’attribut id est essentiel.

Il est aussi possible d’ajouter des légendes aux diapositives avec la classe .carousel-caption.

À la suite du précédent fichier html, insérez le carousel avec le contenu :

code carousel avec légende

        <!-- Carrousel -->
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="../img/bootstrap-carrousel-slide-1.jpg" alt="Carrousel slide 1"
                     class="d-block w-100">
                <div class="carousel-caption d-none d-md-block">
                    <h4>Titre de la légende</h4>
                    <p>Légende de la slide n°1.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="../img/bootstrap-carrousel-slide-2.jpg" alt="Carrousel slide 2"
                     class="d-block w-100">
                <div class="carousel-caption d-none d-md-block text-dark">
                    <h4>Titre de la légende</h4>
                    <p>Légende de la slide n°2.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="../img//bootstrap-carrousel-slide-3.jpg" alt="Carrousel slide 3"
                     class="d-block w-100">
                <div class="carousel-caption d-none d-md-block">
                    <h4>Titre de la légende</h4>
                    <p>Légende de la slide n°3.</p>
                </div>
            </div>
        </div>

Remarquez l’usage de la classe .text-dark pour ajuster le contraste de la légende.

Insérez les contrôles et indicateurs avec les codes suivants :

code carousel contrôles

        <!-- Contrôles -->
        <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
            <span class="visually-hidden">Précédent</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
            <span class="visually-hidden">Suivant</span>
        </button>

code carousel indicateurs

        <!-- Indicateurs -->
        <div class="carousel-indicators">
            <button data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
            <button data-bs-target="#demo" data-bs-slide-to="1"></button>
            <button data-bs-target="#demo" data-bs-slide-to="2"></button>
        </div>

6.4.3. Modifier l’animation et la vitesse du carrousel

Pour remplacer l’effet de défilement par un fondu, il suffit d’ajouter la classe .carousel-fade au carrousel.

La classe .carousel-dark change le thème des élément informatifs et de contrôle.

La vitesse de transition entre les diapositives peut être ajustée sur chaque .carousel-item grâce à l’attribut data-bs-interval="valeur", qui prend une valeur en millisecondes.

Testez ces différentes personalisation à la suite du précédent fichier html.