Boots Tarp 5

FORMATION JOBINTECH SQL
FRONT-END: BOOTSTRAP 5
Table des matières
1. Introduction ..................................................................................................................................6
1.1 Le développement des sites web ...........................................................................................6
1.2 Les fonctionnalités de Bootstrap ...........................................................................................7
1.3 La compatibilité avec les navigateurs ...................................................................................7
2. Installer Bootstrap.........................................................................................................................8
2.1. Les objectifs ..........................................................................................................................8
2.2. Installer Bootstrap .................................................................................................................8
2.3. Télécharger la distribution Bootstrap ....................................................................................8
2.4. Lier Bootstrap aux fichiers HTML .......................................................................................9
2.5. Le dossier de distribution ....................................................................................................10
2.5.1. Les fichiers du dossier de distribution .........................................................................10
2.5.2. Le dossier css .................................................................................................................. 11
2.5.3. Le dossier js ....................................................................................................................13
2.6. Un site Bootstrap lié aux fichiers locaux ............................................................................13
1. Le dossier du site ....................................................................................................................13
2. Les liaisons aux fichiers CSS et JS .........................................................................................15
3. Un exemple de page Bootstrap ...............................................................................................15
2.7. Un site Bootstrap lié aux fichiers par CDN.........................................................................17
1. Les réseaux de diffusion de contenu .......................................................................................17
2. Les liaisons au fichier CSS .....................................................................................................17
3. La liaison aux fichiers JS ........................................................................................................18
4. Un exemple de page Bootstrap ...............................................................................................18
2.8. Les types de sites Bootstrap ................................................................................................19
3. La mise en page avec Bootstrap .................................................................................................19
ENSAM RABAT N.ZIDANE BOOTSTRAP 5 Page 1/225

3.1. Définir le viewport ..............................................................................................................20
3.2. La largeur des boîtes ...........................................................................................................20
3.3. Les conteneurs .....................................................................................................................21
3.4. La largeur fixe des conteneurs ............................................................................................21
1. Les requêtes de média.............................................................................................................22
2. La largeur maximale des conteneurs ......................................................................................23
3.5. La largeur fluide des conteneurs .........................................................................................24
3.6. La grille de mise en page.....................................................................................................25
1. Les concepts de construction ..................................................................................................25
2. Définir les classes pour les colonnes ......................................................................................26
3.7. Des exemples de grille ........................................................................................................27
1. Une grille sans taille d’écran ni nombre de colonnes .............................................................27
2. Une grille sans taille d’écran mais avec un nombre de colonnes ...........................................30
3. Une grille avec taille d’écran et nombre de colonnes .............................................................32
4. Une grille avec plusieurs largeurs de colonnes.......................................................................35
3.8. Des grilles spéciales ............................................................................................................37
1. Plusieurs lignes dans une ligne ...............................................................................................37
2. Les lignes incomplètes............................................................................................................38
3. Les lignes débordantes............................................................................................................40
4. Les colonnes sans gouttière ....................................................................................................41
5. Décaler des colonnes ..............................................................................................................41
6. Imbriquer des lignes ...............................................................................................................44
3.9. Les alignements des colonnes .............................................................................................46
1. L’alignement horizontal ..........................................................................................................46
2. L’alignement vertical dans les lignes ......................................................................................48
3. L’alignement vertical dans les colonnes .................................................................................50
3.10. Ordonner les colonnes .....................................................................................................51
4. Le texte .......................................................................................................................................53
4.1. L’objectif .............................................................................................................................53
4.2. L'uniformisation des affichages ..........................................................................................53
4.3. Les règles CSS pour les en-têtes .........................................................................................54
4.3.1. Les sélecteurs d’éléments des en-têtes .........................................................................54
4.3.2. Les sélecteurs de classe des en-têtes ............................................................................55
4.3.3. L’affichage de grands en-têtes .....................................................................................55
4.4. Les paragraphes ...................................................................................................................56
4.5. Les mises en évidence .........................................................................................................57

4.6. Les abréviations...................................................................................................................57
4.7. Les citations.........................................................................................................................58
4.8. Les listes ..............................................................................................................................59
4.9. Afficher du code ..................................................................................................................63
5. Les images, les figures et les carousels ......................................................................................65
5.1. Les images responsives .......................................................................................................65
5.2. Les bordures de l’image ......................................................................................................67
5.3. Aligner les images ...............................................................................................................68
5.4. Les sources des images .......................................................................................................69
5.5. Les figures ...........................................................................................................................70
5.6. Les carousels .......................................................................................................................71
2. Un carousel avec des boutons de contrôle .................................................................................72
3. Un carousel avec des légendes ................................................................................................74
6. Les tableaux ................................................................................................................................75
6.1. Les tableaux simples ...........................................................................................................75
6.2. Les lignes en alternance ......................................................................................................78
6.3. Les tableaux encadrés..........................................................................................................79
6.4. Le survol des lignes .............................................................................................................79
6.5. Les tableaux étroitisés .........................................................................................................79
6.6. Les mises en évidence colorée ............................................................................................80
6.7. La légende des tableaux ......................................................................................................80
6.8. Les tableaux responsives .....................................................................................................81
7. Les formulaires ...........................................................................................................................82
La structure de base ........................................................................................................................82
Les sélecteurs de choix ...................................................................................................................88
La sélection de fichiers ...................................................................................................................93
Des éléments de mise en forme ......................................................................................................93
Ajouter des informations aux champs ............................................................................................96
8. Les composants d'interface .......................................................................................................100
Les badges ....................................................................................................................................100
Les alertes .....................................................................................................................................104
Les barres de progression .............................................................................................................109
Les listes d’éléments .................................................................................................................... 113
Les cartes ......................................................................................................................................124
Les bulles d’aide...........................................................................................................................127
Les bulles d’aide élaborées ..........................................................................................................130

Le fil d’Ariane ..............................................................................................................................131
La pagination ................................................................................................................................132
L’accordéon ..................................................................................................................................135
Les fenêtres modales ....................................................................................................................137
Les roues de chargement ..............................................................................................................142
Les notifications ...........................................................................................................................146
Synchroniser le défilement ...........................................................................................................148
9. Les boutons ...............................................................................................................................154
Les boutons classiques .................................................................................................................155
Les blocs de boutons ....................................................................................................................157
Les groupes de boutons ................................................................................................................159
Les boutons déroulants .................................................................................................................160
10. La navigation ........................................................................................................................164
Une barre de navigation simple....................................................................................................165
Les alignements ............................................................................................................................166
Les options de mise en forme .......................................................................................................166
Une barre de navigation flexible ..................................................................................................168
Une barre de navigation avec bouton déroulant ...........................................................................169
11. Les menus de navigation .......................................................................................................170
Insérer un menu de navigation complet .......................................................................................170
Les options des menus de navigation ...........................................................................................173
12. Les utilitaires .........................................................................................................................175
Les bordures .................................................................................................................................175
Le flottement ................................................................................................................................180
Les jeux de couleurs .....................................................................................................................182
Changer l’affichage des éléments ................................................................................................183
Ajouter de la transparence ............................................................................................................185
Ajouter des ombres portées ..........................................................................................................186
Les espaces pour les colonnes ......................................................................................................188
La taille des colonnes ...................................................................................................................194
Positionner les éléments ...............................................................................................................196
Des classes pour le texte...............................................................................................................197
13. Les templates, les thèmes et les sites ....................................................................................203
Les templates ................................................................................................................................203
Le template Carousel ....................................................................................................................204
Le template Album .......................................................................................................................212

Les thèmes Bootstrap ...................................................................................................................220

1. Introduction
1.1 Le développement des sites web
Depuis longtemps déjà, le développement des sites web a fortement

évolué. Vous devez créer des sites avec une architecture solide, qui
soient élégants, ergonomiques et qui puissent être
parfaitement affichés dans tous les types de support actuel, c’est-à-dire
sur un écran d’ordinateur, sur une tablette ou un smartphone.
Cela nécessite une très bonne connaissance des langages fondateurs
du Web (HTML, CSS et JavaScript) de sorte à pouvoir mener à bien les
projets. Mais il ne faut pas se leurrer, c’est parfois long et difficile.
Pour nous aider dans cette tâche, nous pouvons utiliser des frameworks
(ou des cadriciels selon la terminologie française). Les frameworks sont
des collections de brique de code (HTML, CSS et JavaScript) bien
structurées et prêtes à l’emploi qui nous permettent de partir sur de
solides bases pour la création de nos sites web.
Il existe de très nombreux frameworks, mais le plus utilisé est sans
conteste Bootstrap de Twitter. Au départ il a été créé en interne, pour
unifier les interfaces des applications de Twitter. Puis un des deux
architectes, Mark Otto en a créé un projet ouvert à tous
(http://www.quora.com/Why-did-Twitter-release-
Bootstrap/answer/Mark-Otto) en le mettant à disposition sur GitHub
(https://github.com/twbs/bootstrap/).
Actuellement (en mai 2022) Bootstrap, http://getbootstrap.com, est
disponible en version 5.1.3.

1.2 Les fonctionnalités de Bootstrap
Bootstrap propose de très solides fonctionnalités pour développer nos

sites web, avec une approche résolument « Responsive Web Design ».
Bootstrap utilise aussi les dernières fonctionnalités de mise en page,
avec l’utilisation des modules
CSS3 Flexbox (https://www.w3.org/TR/css-flexbox-1/)
et Grid (https://www.w3.org/TR/css-grid-1/), proposés par le W3C.
Voici les fonctionnalités que nous propose Bootstrap :
Une grille de mise en page pour agencer les différentes boîtes
d’affichage des sites. Cette grille est immédiatement « Responsive Web
Design », cela veut dire que l’affichage va s’adapter aux écrans de
diffusion : ordinateurs, tablette et smartphone.
• Des styles CSS pour mettre en forme le texte, les tableaux et les
formulaires...
• Des styles CSS permettant d’afficher des boutons attrayants et
des images design.
• Des composants d’interface pour dynamiser vos sites web : barre
de menus, groupe de bouton, fil d’Ariane, pagination, vignette
d’image, liste...
• De nombreuses règles CSS qui viennent vous aider pour améliorer
le design de vos pages web de manière élégante : des jeux de
couleurs, des bordures, des flottements et des positions pour les
blocs d’information, des marges supplémentaires...
1.3 La compatibilité avec les navigateurs
Bootstrap utilise les techniques de mise en page Flexbox avec les CSS3,
ce qui implique d’utiliser des navigateurs récents. Pour exploiter des
pages conçues avec Bootstrap, il faut utiliser Google Chrome en version
supérieure ou égale à 60, Firefox supérieur ou égal à 60, Apple Safari
supérieure ou égale 12 et les navigateurs sous iOS supérieur ou égal
12..
Pour la compatibilité des CSS avec les navigateurs, Bootstrap a
fusionné une partie de la

librairie Normelize.CSS (https://necolas.github.io/normalize.css/) et le
reset HTML dans un module CSS unique nommé Reboot.
2. Installer Bootstrap
2.1. Les objectifs
Dans ce chapitre, vous verrez comment installer Bootstrap afin de

l’utiliser dans vos projets de création de sites web. Nous allons
télécharger le framework, étudier les fichiers constitutifs et connaître
les fichiers utiles et indispensables.
Notez qu’à l’écriture de ce livre, mai 2022, c’est la version 5.1.3 de
Bootstrap qui est utilisée. Bootstrap va bien sûr évoluer entre l’écriture
de ce livre et la version que vous allez utiliser. Il peut donc y avoir
quelques différences entre le code utilisé dans ce livre et ce que vous
devrez utiliser.
2.2. Installer Bootstrap
Vous avez plusieurs possibilités pour installer Bootstrap selon votre

profil. Pour les personnes novices en développement web, utilisez le
téléchargement du dossier de distribution ; pour les personnes ayant
une bonne expérience du développement web, utilisez le
téléchargement des sources et enfin, pour les développeurs aguerris,
utilisez une installation par paquets en ligne de commande.
Bootstrap vous aidera dans quatre domaines principaux pour les CSS :
• la mise en page, avec sa grille qui utilise le module du W3C
Flexbox,
• le contenu rédactionnel, avec la typographie, l’insertion des images
et des tableaux,
• les composants qui sont tous les objets d’interface, comme les
alertes, les barres de navigation, les carousels...,
• et les utilitaires qui sont des paramètres de mise en forme comme
le flottement des éléments, les bordures, la position...
2.3. Télécharger la distribution Bootstrap

La première possibilité consiste à télécharger la distribution Bootstrap
qui contient les fichiers CSS et JS.
Sur la page d’accueil, cliquez sur le bouton Download.
Dans la zone Compiled CSS and JS, cliquez sur le bouton Download.
Dans votre dossier de téléchargement, vous récupérez une archive

nommée bootstrap-5.1.3-dist.zip.
Décompressez cette archive pour obtenir un dossier nommé bootstrap-
5.1.3-dist.
2.4. Lier Bootstrap aux fichiers HTML
Si vous préférez éviter de télécharger les fichiers Bootstrap, vous

pouvez les lier à tous vos fichiers HTML de votre site. Cela permet aussi
d’avoir toujours la dernière version de Bootstrap.
Toujours dans la page de téléchargement, utilisez la zone CDN via
jsDelivr.

Cliquez sur le bouton Copy, pour copier le code du lien et du script de
liaison vers Bootstrap.
Dans chaque fichier HTML de votre projet, dans l’élément <header>,

collez ce code copié.
Notez que si vous utilisez des composants JavaScript de Bootstrap,
vous devez aussi inclure les liens vers les
bibliothèques Bootstrap et Popper.js.
Faites de même pour copier et coller les scripts de liaison
vers Bootstrap et Popper.js.
2.5. Le dossier de distribution
2.5.1. Les fichiers du dossier de distribution

Le dossier de distribution que vous avez téléchargé et décompressé se
nomme par défaut bootstrap-5.1.3-dist. Vous pouvez bien sûr le
renommer comme vous voulez, du moment que vous respectiez la
syntaxe web.
Vous pouvez renommer ce dossier bootstrap tout simplement.
Ce dossier bootstrap contient deux sous-dossiers nommés csset js.
2.5.2. Le dossier css
Le dossier css contient tous les fichiers CSS de Bootstrap :

• bootstrap.css : contient toutes les règles CSS de tous les
constituants de Bootstrap. Son équivalent minifié
est bootstrap.min.css. Cela va vous permettre d’utiliser Bootstrap
dans sa totalité.
• bootstrap-grid.css : ne contient que les règles CSS pour la mise en
page en grille avec Flexbox. Son équivalent minifié est bootstrap-
grid.min.css.
• bootstrap-utilities.css : contient les règles CSS pour utiliser les
classes supplémentaires afin de gérer au mieux les mises en page
pour les mobiles. Son équivalent minifié est bootstrap-
utilities.min.css.
• bootstrap-reboot.css : contient les règles CSS pour harmoniser le
rendu dans les navigateurs pour les contenus rédactionnels
uniquement. Son équivalent minifié est bootstrap-reboot.min.css.
Pour vous donner un aperçu de la différence entre un fichier minifié et
non minifié, voici un extrait du fichier bootstrap-grid.css :

Et voici un extrait du même fichier minifié bootstrap-grid.min.css :
Voici un récapitulatif de l’utilisation des fichiers CSS :
Fichiers CSS Mise en page Contenu Composants Utilitaires
bootstrap.css Inclus Inclus Inclus Inclus
bootstrap-grid.css Grille Non inclus Non inclus Flex

seulement seulement
bootstrap- Non inclus Non inclus Non inclus Non inclus

utilities.css

Fichiers CSS Mise en page Contenu Composants Utilitaires
Vous
bootstrap- Non inclus Reboot Non inclus Non inclus

reboot.css seulement
pouvez aussi remarquer des fichiers ayant pour extension .map. Ces
fichiers servent à certains navigateurs pour retrouver les lignes
originales à partir des fichiers minifiés.
2.5.3. Le dossier js
Le dossier js contient les fichiers JavaScript nécessaires à l’utilisation

des composants interactifs de Bootstrap. Vous retrouvez les fichiers
non minifiés .js et minifiés min.js.
Le fichier bootstrap.bundle.js contient en plus du code JavaScript de
Bootstrap, la librairie Popper.js, alors que cette librairie est absente du
fichier bootstrap.js.
2.6. Un site Bootstrap lié aux fichiers locaux
1. Le dossier du site
Dans cet exemple, nous allons voir comment créer un site Bootstrap qui
soit lié aux fichiers CSS et JS locaux. C’est-à-dire que les fichiers de
Bootstrap ont été téléchargés et qu’ils sont placés dans le dossier du
site web.
Le schéma ci-dessous représente les dossiers et fichiers
indispensables pour le bon fonctionnement d’un site web avec le
framework Bootstrap.

À la racine du site, vous aurez, dans cet exemple, le
dossier bootstrap (ou le nom que vous lui avez donné) et ces dossiers
inclus : css et js. Ce dossier bootstrap est le dossier décompressé de la
distribution de Bootstrap. Chacun de ces sous-dossiers comportera les
fichiers indispensables au bon fonctionnement du site. Dans ces deux
dossiers, vous privilégieriez les fichiers minifiés afin de gagner du
temps au chargement des pages par l’utilisation de fichier de plus faible
poids. Par contre pendant la phase de conception, vous pourrez utiliser
les fichiers non minifiés afin de pouvoir appréhender le code avec plus
de facilité de lecture.
Dans le dossier css, vous trouverez le fichier bootstrap.min.css qui
contient toutes les règles CSS de Bootstrap, pour une exploitation
complète de toutes ces fonctionnalités.
Dans le dossier js, se trouve le fichier bootstrap.bundle.min.js qui
contient les scripts JavaScript pour utiliser les composants interactifs
de Bootstrap.
Notez bien que le fichier bootstrap.bundle.min.js contient aussi les
scripts de la librairie Popper.js.
À la racine du site, pour vos créations propres, vous aurez autant de
dossiers et de fichiers HTML et d’images que nécessaire.
Notez bien que cette structure est un exemple et pas une obligation.
Vous êtes libre d’organiser la structure de fichiers que vous le
souhaitez.

Le dossier de cet exemple à télécharger est 02-Installation-01.
2. Les liaisons aux fichiers CSS et JS
Il faut maintenant lier tous les fichiers HTML aux fichiers CSS et JS.
Dans cet exemple, nous avons un fichier HTML nommé index.html.
Voici le code que vous devez avoir :
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Mon site avec Bootstrap</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
...

<script src="bootstrap/js/bootstrap.bundle.min.js"
type="text/javascript"></script>
</body>
</html>
Dans l’élément <head> vous avez la liaison au fichier CSS complet de

Bootstrap, avec l’élément <link>. Le fichier se trouve bien dans le
dossier /bootstrap/css/.
Juste avant la balise de fermeture </body>, apparaît la liaison avec le
fichier JavaScript de Bootstrap qui se trouve dans le
dossier /bootstrap/js/.
3. Un exemple de page Bootstrap
Nous allons maintenant créer une simple page web, avec trois éléments
mis en forme avec des classes Bootstrap :
• une citation, avec l’élément <blockquot>,
• une alerte, dans une boîte <div>,
• une image, avec un élément <img>.
Voici le code utilisé pour la structure de la page :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
...

<script src="bootstrap/js/bootstrap.bundle.min.js"
type="text/javascript"></script>
</body>
</html>
Voici les éléments de contenu, placés dans le <body> :

<blockquote class="blockquote">
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Aenean eu leo
quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
<footer class="blockquote-footer">Cursus Ridiculus Nullam :
<cite title="Titre de la source">Fusce Quam</cite>.</footer>
</blockquote>
<div class="alert alert-primary" role="alert">
Vestibulum Tortor Euismod Porta Egestas
</div>
<p>Un hippopotame :</p>
<img src="images/hippopotame.jpg" class="img-thumbnail" alt="Un hippopotame">
L’élément <blockquote> utilise la classe Bootstrap blockquote .

Dans cet élément, nous trouvons le texte de la citation dans un
élément <p> et la référence de cette citation dans un
élément <footer> avec la classe Bootstrap blockquote-footer.
L’alerte est placée dans un élément <div> qui utilise les classes
Bootstrap alert et alert-primary.
L’image est placée dans un élément <img> qui utilise la classe
Bootstrap img-thumbnail.
Voici le résultat obtenu :

2.7. Un site Bootstrap lié aux fichiers par CDN
1. Les réseaux de diffusion de contenu

Dans cet exemple, nous allons refaire la même page web que dans
l’exemple précédent, mais cette fois nous allons lier les fichiers
Bootstrap par CDN. Rappelons que les CDN (Content Delivery Network)
sont des réseaux de diffusion de contenu. Sur ces serveurs sont
stockées les dernières versions de programmes, de libraires, de
contenus d’utilisateur... Cela permet un accès rapide aux ressources
voulues et évite de télécharger localement des fichiers.
Le dossier de cet exemple à télécharger est 02-Installation-02.
2. Les liaisons au fichier CSS
Dans un premier nous allons lier le fichier bootstrap.min.css de
Bootstrap qui est le plus complet, puisqu’il contient toutes les règles de
toutes les fonctionnalités de tous les constituants de Bootstrap.
Dans l’élément <head>, saisissez cette ligne :
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/
bootstrap.min.css" rel="stylesheet" integrity=
"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
Vous pouvez aussi vous rendre sur la page Introduction de Bootstrap à

cette URL : https://getbootstrap.com/docs/5.1/getting-
started/introduction/ et dans la zone CSS, vous pouvez copier - coller la
ligne de code.
Notez bien qu’il faut insérer cette liaison au fichier CSS de Bootstrap
avant tous les autres fichiers CSS.
3. La liaison aux fichiers JS
Maintenant nous devons lier les deux fichiers JavaScript :
pour Popper.js et pour Bootstrap. Nous allons utiliser le fichier unique
bundle.min.js.
Toujours dans l’écran Getting started - Introduction, dans la
zone Bundle, cliquez sur le bouton Copy, pour copier le code de liaison.
Dans le fichier HTML, avant la balise de fermeture de

l’élément </body>, collez le code copié.
4. Un exemple de page Bootstrap
Vous pouvez reprendre le même contenu que dans l’exemple précédent
pour tester cette page liée aux fichiers CSS et JS par CDN. Le résultat
affiché sera strictement le même.
Voici le code complet de cet exemple :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity=

</head>
<body>
<blockquote class="blockquote">
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Aenean eu leo quam.
Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
<footer class="blockquote-footer">Cursus Ridiculus Nullam :
<cite title="Titre de la source">Fusce Quam</cite>.</footer>
</blockquote>
Vestibulum Tortor Euismod Porta Egestas
</div>
<p>Un hippopotame :</p>
<img src="images/hippopotame.jpg" class="img-thumbnail" alt="Un hippopotame">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/
bootstrap.bundle.min.js" integrity=
"sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
</body>
</html>
2.8. Les types de sites Bootstrap
Nous venons de voir comment installer Bootstrap avec toutes ses

fonctionnalités selon deux méthodes différentes : soit en téléchargeant
les fichiers Bootstrap, soit en les liant aux serveurs CDN. Ces deux
méthodes sont toutes les deux utilisables, mais le fait de pouvoir lier les
fichiers aux serveurs CDN est plus rapide et nécessite moins de
manipulation.
Avec des exemples précédents, nous avons accès à toutes les
fonctionnalités de Bootstrap. Mais il se peut que vous ne souhaitiez
utiliser qu’une partie de Bootstrap. Dans ce cas, il faudra faire le choix
de lier votre site web aux fichiers CSS et JS utiles et nécessaires aux
fonctionnalités voulues. Imaginons que vous souhaitiez n’utiliser que la
grille de mise en page et rien d’autre, vous pouvez alors vous contenter
de lier uniquement le fichier CSS bootstrap-grid.min.css.
Donc c’est bien à vous d’adapter l’utilisation de Bootstrap selon vos
projets, selon les mises en forme, les mises en page et les interactions
que vous souhaitez proposer dans vos sites web.
3. La mise en page avec Bootstrap

Dans ce chapitre nous allons étudier la mise en page des sites web avec
Bootstrap. Bootstrap utilise deux concepts techniques qu’il faut
connaître :
• Bootstrap utilise par défaut une mise en page en Responsive Web
Design. Cela veut dire que les pages des sites web vont
automatiquement s’adapter aux résolutions des médias utilisés
pour les afficher : écrans d’ordinateur, tablettes ou smartphones.
• Bootstrap utilise par défaut le système de grille du W3C avec le
module Flexbox : CSS Flexible Box Layout Module Level
1 (https://www.w3.org/TR/css-flexbox-1/).
3.1. Définir le viewport
Le modèle de mise en page de Bootstrap est "mobile first". Cela veut

dire que les mises en page sont faites d’abord pour les appareils
mobiles. C’est pour cela qu’il convient de définir avec précision le
viewport. Le viewport va permettre de définir les paramètres d’affichage
des pages du site en fonction de l’écran de diffusion.
Dans le <head> de chaque page HTML, vous devez avoir cette ligne :
<meta name="viewport" content="width=device-width, initial-scale=1">
3.2. La largeur des boîtes
Les mises en page de Bootstrap se font principalement avec des

boîtes <div>. Chaque boîte <div> pourra recevoir une dimension.
Vous le savez, les dimensions des boîtes peuvent utiliser deux
systèmes de mesure indiqués dans la propriété CSS3 box-sizing.
Bootstrap utilise la valeur border-box. Avec Bootstrap, nous avons
doncbox-sizing: border-box.
Cela veut dire que le calcul de la largeur des boîtes inclut la largeur des
bordures, border-width, la largeur du remplissage
interne, padding, et la largeur du contenu, width. Voici un schéma
explicatif :

3.3. Les conteneurs
Dès lors que vous souhaitez créer une mise en page avec Bootstrap,
vous devez placer cette mise en page dans un conteneur. Les
conteneurs sont les briques de base de Bootstrap. Les conteneurs sont
des boîtes <div> qui utilisent deux classes Bootstrap.
Si vous souhaitez avoir une mise en page à largeur fixe, mais qui
s’adaptera aux largeurs des médias, vous utiliserez la
classe container. La largeur maximale (propriété CSS max-width)
sera déterminée par la requête de média de Bootstrap.
<div class="container">
Contenu de la mise en page
</div>
Vous pouvez télécharger le dossier de cet exemple, nommé 03-grille-01.

Si vous désirez avoir une mise en page fluide, vous utiliserez la
classe container-fluid. La largeur de la mise en page sera alors
de 100 % de la largeur de l’écran, quel que soit le support, ordinateur,
tablette ou smartphone.
<div class="container-fluid">
Contenu de la mise en page
</div>
Vous pouvez télécharger le dossier de cet exemple nommé 03-grille-02.
3.4. La largeur fixe des conteneurs

1. Les requêtes de média
Les requêtes de média sont basées sur des largeurs d’écran, en
fonction de celles-ci, la mise en page s’adapte. Ces largeurs d’écran
sont définies par des points de rupture (breakpoints en anglais). Il est
bon de rappeler que la mise en page de Bootstrap est Mobile First, ce
qui veut dire que la mise en page est d’abord faite pour les
smartphones. Ensuite, selon chaque point de rupture défini, la mise en
page s’adaptera.
Bootstrap définit six points de rupture :
• Pour un écran plus petit que 576 pixels, nommé X-Small.
• Pour un écran plus grand ou égal à 576 pixels, nommé Small.
• Pour un écran plus grand ou égal à 768 pixels, nommé Medium.
• Pour un écran plus grand ou égal à 992 pixels, nommé Large.
• Pour un écran plus grand ou égal à 1200 pixels, nommé Extra

large.
• Pour un écran plus grand ou égal à 1400 pixels, nommé Extra extra
large.
Notez bien que pour les écrans plus petits que 576 pixels, c’est la mise
en page par défaut qui s’appliquera, sans qu’il soit nécessaire de définir
des règles CSS spécifiques.
Pour chaque point de rupture, Bootstrap définit un suffixe pour les
classes CSS appliquées :
• X_Small : aucun, puisque c’est la classe par défaut.
• Small : sm.
• Medium : md.
• Large : lg.
• Extra large : xl.
• Extra extra large : xxl.
Voici comment se définissent les requêtes de média :
@media (min-width: 576px) { ... }

Bootstrap peut aussi utiliser des requêtes de média avec la notion de
largeur maximale. Voici ces requêtes qui utilisent le paramètre max-
width :
@media (max-width: 575.98px) { ... }
Nous avons aussi la possibilité de cibler très précisément des tailles

d’écran, en utilisant les paramètres min-width et max-width. Voici
quelques exemples :
@media (min-width: 576px) and (max-width: 767.98px) { ... }
Enfin, vous pouvez aussi cibler des tailles d’écran différentes :

2. La largeur maximale des conteneurs
Pour chaque point de rupture, Bootstrap définit une largeur maximale du
conteneur. Voici les largeurs maximales pour chaque point de rupture,
telles qu’elles sont définies dans les règles de style CSS :
@media (min-width: 576px) {
.container-sm, .container {
max-width: 540px;
}
}
.container-md, .container-sm, .container {
max-width: 720px;
}
}
.container-lg, .container-md, .container-sm, .container {
max-width: 960px;
}
}
.container-xl, .container-lg, .container-md, .container-sm, .container {
max-width: 1140px;
}
}
.container-xxl, .container-xl, .container-lg, .container-md,
.container-sm, .container {
max-width: 1320px;
}
}

En amont de la définition de la largeur maximale des conteneurs, la
classe .container définit les valeurs pour la largeur du conteneur. Voici la
règle CSS .container simplifiée dans cet exemple :
.container {
width: 100%;
padding-right: 0.75rem;
padding-left: 0.75rem;
margin-right: auto;
margin-left: auto;
}
• width:100% : le conteneur occupe 100% de la place disponible

dans la largeur maximale définie par la requête de média.
• padding-right: 0.75rem : le remplissage interne à droite est de
0.75 rem.
• padding-left: 0.75rem : le remplissage interne à gauche est de 0.75
rem.
• margin-right: auto : la marge à droite est en automatique.
• margin-left: auto : la marge à gauche est en automatique.
Les marges droite et gauche étant en automatique, cela permet de
centrer horizontalement automatiquement le conteneur.
Voici un schéma détaillé :
3.5. La largeur fluide des conteneurs

Si vous utilisez des conteneurs fluides avec la classe .container-
fluid, ceux-ci ne sont pas impactés par les requêtes de média et leur
largeur sera toujours égale à 100 % de la largeur disponible à l’écran.
Voici la règle CSS simplifiée qui définit ces conteneurs fluides :
.container-fluid {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
Vous retrouvez les mêmes propriétés et valeurs que pour les

conteneurs fixes.
3.6. La grille de mise en page
1. Les concepts de construction

La mise en page avec Bootstrap se fait avec des conteneurs. Chaque conteneur contient
des lignes qui elles-mêmes contiennent des colonnes qui définissent des blocs de
contenu. Dans chaque bloc vous pouvez placer ce que vous souhaitez : du texte, des
images, des barres de navigation...
Ce modèle de mise en page est basé sur le module CSS3 Flexbox du W3C : Flexible Box
Layout Module Level 1 (https://www.w3.org/TR/css-flexbox-1/). Ce module, qui est
encore en Candidate Recommendation au 19 novembre 2018, est parfaitement reconnu
par tous les navigateurs modernes : https://caniuse.com/#search=flex.
Vous devez connaître quelques principes de conception des grilles avec Flexbox et
Bootstrap :

• La grille de Bootstrap est basée sur des conteneurs ayant la
classe .container qui contiennent des lignes ayant la classe .row.
• La grille de Bootstrap est basée sur 12 colonnes par ligne. Donc chaque colonne de
la grille sera alignée sur ces 12 colonnes.
• Chaque colonne a un remplissage interne horizontal (padding) de 15 pixels, ce
qui donne une gouttière de 30 pixels entre chaque bloc. Mais vous pourrez
supprimer cette gouttière, si vous le souhaitez.
• Si vous ne spécifiez pas de largeur pour les colonnes, celles-ci auront une largeur
égale.
• La largeur des colonnes est exprimée en pourcentage.
• Vous pourrez déterminer le nombre de colonnes par ligne pour chaque point de
rupture des requêtes de média, avec des classes spécifiques.
2. Définir les classes pour les colonnes
Nous venons de l’évoquer, la grille se compose d’un conteneur (<div
class="container">) qui contient des lignes (<div class="row">) et des
colonnes (<div class="col-XY-NB">). Vous allez pouvoir déterminer le nombre de
colonnes voulu avec des classes spécifiques qui reprendront l’abréviation des largeurs
des écrans définis pour chaque point de rupture.
Voilà comment se détermine la syntaxe du nom des classes CSS pour les colonnes :
.col-XY-NB.
• .col est le préfixe qui désigne toutes les colonnes.

• XY est l’abréviation des points de rupture :
• sm pour small est pour les petits écrans dont la largeur est supérieure ou
égale à 576 pixels.
• md pour medium est pour les écrans moyens dont la largeur est supérieure ou
• lg pour large est pour les grands écrans dont la largeur est supérieure ou
• xl pour extra large est pour les écrans extra-larges dont la largeur est
supérieure ou égale à 1200 pixels.
• xxl pour extra extra large est pour les écrans extra-extra-larges dont la
largeur est supérieure ou égale à 1400 pixels.
• NB indique le nombre de colonnes voulu dans la ligne.
Pour les très petits écrans, inférieur à 576 pixels, il n’est pas nécessaire d’indiquer une
abréviation de taille, car c’est l’option par défaut.
Donnons deux exemples :
• .col-sm-2 : indique que la ligne contient 2 colonnes pour les petits écrans, donc
pour tous les écrans dont la largeur est inférieure à 576 pixels.

• .col-lg-4 : indique que la ligne contient 4 colonnes pour les écrans larges, donc
pour tous les écrans dont la largeur est inférieure à 992 pixels.
Remarques importantes :
Avec les deux exemples ci-dessous, vous comprenez bien que le nombre de colonnes est
déterminé pour tous les écrans dont la largeur est supérieure à celle indiquée.
Si vous ne déterminez pas de point de rupture avec une abréviation de taille, le nombre de
colonnes indiqué va s’appliquer à toutes les tailles d’écran.
Si vous n’indiquez pas un nombre de colonnes, ce nombre sera égal au nombre de
boîtes <div> indiqué dans la ligne.
3.7. Des exemples de grille
1. Une grille sans taille d’écran ni nombre de colonnes

Dans ce premier exemple, nous allons créer une grille comportant deux
lignes. Dans la première ligne, nous aurons trois boîtes <div> pour
définir le nombre de colonnes, mais nous n’indiquons pas de taille
d’écran, ni un nombre de colonnes précis. Nous aurons donc comme
nom de classe : <div class="col">.
Pour la deuxième ligne, nous avons deux boîtes <div> qui reprennent
les mêmes caractéristiques.
Enfin, pour plus de facilité de rendu, j’ai ajouté des bordures à la
classe .col.
Vous pouvez télécharger le dossier de cet exemple, nommé 03-Grille-03.
Voici le code complet de cet exemple :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/
bootstrap.min.css" rel="stylesheet" integrity=
<style>
.col {
border: 1px solid #333;
}
</style>
</head>
<body>

<p> </p>
<div class="row">
<div class="col">
Maecenas sed diam eget risus...
</div>
<div class="col">
Lorem ipsum dolor sit amet...
</div>
<div class="col">
Aenean eu leo quam. Pellentesque...
</div>
</div>
<div class="row">
<div class="col">
</div>
<div class="col">
Aenean eu leo quam. Pellentesque...
</div>
</div>
</div>
</body>
</html>
Comme nous n’avons pas indiqué de taille d’écran avec des

abréviations, le nombre de colonnes sera toujours le même pour toutes
les tailles d’écrans, des écrans très petits, aux écrans extra-larges.
Comme nous n’avons pas déterminé le nombre de colonnes, celui-ci
sera égal au nombre de boîtes <div> indiquées par ligne.
Voici le rendu sur un écran extra-large :
Voici le rendu obtenu sur un petit écran :

Commençons par analyser l’affichage général obtenu sur un écran
extra-large :
• Nous avons bien un conteneur centré, grâce aux marges
horizontales en auto.
• Nous avons bien une largeur maximale de 1140 pixels, définie pour
les écrans extra-larges.
• Nous avons bien des marges horizontales autour du conteneur,
puisque celui-ci a une largeur maximale inférieure à la largeur de
l’écran.
Analysons l’affichage obtenu pour la première ligne :
• Nous avons trois colonnes, car nous avons défini trois
boîtes <div>.
• La largeur de chaque colonne équivaut au tiers de la largeur
maximale.
• Chaque colonne affiche bien les 0.75 em de remplissage
horizontal.
Analysons l’affichage obtenu pour la deuxième ligne :
• Nous avons deux colonnes, car nous avons défini deux
boîtes <div>.
• La largeur de chaque colonne équivaut à la moitié de la largeur
maximale.

• Chaque colonne affiche bien les 0.75 em de remplissage
horizontal.
Maintenant passons à l’affichage obtenu pour les petits écrans :
• Nous n’avons plus de marges horizontales.
• Le conteneur occupe 100% de la place disponible.
• Les deux lignes conservent le même nombre de colonnes et avec
leur gouttière.
2. Une grille sans taille d’écran mais avec un nombre de colonnes
Pour ce deuxième exemple, nous n’allons pas non plus définir des tailles
d’écran. Par contre, pour certaines colonnes, nous allons déterminer leur
alignement sur la grille des 12 colonnes de Bootstrap.
Les deux lignes contiennent chacune trois colonnes. Seules les
deuxièmes colonnes de chaque ligne ont leur alignement spécifié. Pour
la première ligne, la colonne est alignée sur 6 colonnes avec la
classe .col-6 . Pour la deuxième ligne, la colonne est alignée sur 3
colonnes avec la classe .col-3 .
Voici le code HTML utilisé pour ce conteneur :
<div class="row">
<div class="col">
Maecenas sed diam...
</div>
<div class="col-6">
Lorem ipsum dolor...
</div>
<div class="col">
Aenean eu leo quam...
</div>
</div>
<div class="row">
<div class="col">
</div>
<div class="col-3">
</div>
<div class="col">
</div>
</div>
</div>
Voici l’affichage obtenu sur un écran extra-large :

Voici l’affichage obtenu sur un petit écran :
Seules deux colonnes ont leur largeur d’indiquée : sur 6 colonnes pour la
première et sur 3 colonnes pour la deuxième. Donc ces largeurs
d’alignement sur la grille sont fixées. Les autres colonnes occupent
proportionnellement la place disponible restante.
Dans la première ligne, les deux colonnes occupent 12-6=6 colonnes
restantes, soit 3 chacune.
Dans la deuxième ligne, les deux colonnes occupent 12-3=9 colonnes
restantes, soit 4,5 chacune.
Notez un point important : sur les très petits écrans, la propriété flex-
wrap du module Flexbox autorise à une colonne d’aller à ligne, afin de
conserver une possibilité de lecture confortable.

Voici l’affichage obtenu sur un très petit écran, où la troisième colonne
de la première ligne passe à la ligne :
3. Une grille avec taille d’écran et nombre de colonnes

Dans cet exemple nous allons définir les tailles des écrans et les
largeurs des colonnes. Nous allons créer trois lignes dans cette mise en
page.
La première ligne contient trois colonnes :
• La première colonne est alignée sur 4 colonnes pour les écrans
moyens et supérieurs : <div class="col-md-4">.
• La deuxième colonne est alignée sur 3 colonnes pour les écrans
• La troisième colonne est alignée sur 5 colonnes pour les écrans
• Nous avons bien 4+3+5=12 colonnes.
La deuxième ligne contient aussi trois colonnes :
larges et supérieurs : <div class="col-lg-3">.

• La deuxième colonne est alignée sur 3 colonnes pour les écrans
• La troisième colonne est alignée sur 6 colonnes pour les écrans
• Nous avons bien 3+3+6=12 colonnes.
La troisième ligne contient deux colonnes :
• La première colonne est alignée sur 7 colonnes pour les petits
écrans et supérieurs : <div class="col-sm-7">.
• La deuxième colonne est alignée sur 5 colonnes pour les petits
écrans et supérieurs : <div class="col-sm-5">.
• Nous avons bien 7+5=12 colonnes.
Voici le code concernant le conteneur :
<div class="row">
<div class="col-md-4">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-7">
</div>
<div class="col-sm-5">
Lorem ipsum dolor sit...
</div>
</div>
</div>
Voici l’affichage obtenu sur un écran extra-large :

Voici l’affichage obtenu sur un écran moyen :
Pour la deuxième ligne, les tailles des colonnes étaient définies pour les
écrans larges. Ici nous avons une largeur moyenne, donc la largeur
précédente des colonnes ne s’applique plus. Chaque colonne occupe
toute la largeur disponible de la ligne.
Sur le même principe que précédemment, ce sont les colonnes de la

première ligne qui occupent maintenant toute la place disponible.

Enfin, sur un petit écran, toutes les colonnes sont les unes sous les
autres, occupant toute la place disponible :
4. Une grille avec plusieurs largeurs de colonnes

Vous pouvez parfaitement définir plusieurs largeurs de colonnes pour
une même colonne. Ces différentes largeurs s’appliqueront selon la
largeur d’affichage de la mise en page.
Voici le code utilisé dans le conteneur :
<div class="row">
<div class="col-12 col-md-8">
</div>
Vestibulum id ligula porta...
</div>
</div>
<div class="row">
Nullam id dolor id nibh...
</div>
Nullam id dolor id nibh ultricies...
</div>
Etiam porta sem malesuada...
/div>

</div>
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
</div>
<div class="col-12 col-md-6 col-lg-8">
</div>
</div>
</div>
Analysons le code utilisé :

• Nous avons trois lignes, <div class="row">.
• La première ligne contient deux colonnes.
• La première colonne possède une première classe qui définit un
alignement par défaut sur 12 colonnes, <div class="col-
12">. La deuxième classe définit un alignement sur
8 colonnes, <div class="col-8">, pour les écrans moyens
et supérieurs. Nous avons bien deux classes définies pour cette
boîte <div class="col-12 col-md-8">.
• La deuxième colonne est bâtie sur le même principe. La première
classe définit un alignement par défaut de 12 colonnes et sur 4
colonnes pour les écrans moyens et
supérieurs, <div class="col-12 col-md-4">.
• Vous notez bien que pour les écrans moyens et supérieurs, la
somme des alignements est bien de 12 : 8+4=12.
• La deuxième ligne est aussi construite sur le même principe, avec
cette fois trois colonnes. L’alignement par défaut se fait sur 12
colonnes et pour les écrans moyens et supérieurs, les trois
colonnes sont alignées sur 3, 4 et 5 colonnes. À nouveau, la
somme des trois colonnes fait bien 12.
• La troisième ligne possède deux colonnes dont la largeur varie
selon trois largeurs d’écran. Par défaut l’alignement se fait sur 12
colonnes. Pour les écrans moyens, l’alignement est sur
6 colonnes et sur 4 et 8 colonnes pour les écrans larges et
supérieurs. Voici les classes de la première colonne : <div
class="col-12 col-md-6 col-lg-4"> et celles de la
deuxième colonne : <div class="col-12 col-md-6
col-lg-8">. Comme toujours la somme des colonnes par
taille d’écran fait bien 12.

Voici l’affichage obtenu sur un écran large :
Voici l’affichage obtenu sur un écran moyen :
3.8. Des grilles spéciales
1. Plusieurs lignes dans une ligne

Dans cet exemple nous allons créer une mise en page qui va comporter
dans une seule ligne (<div class="row">) plusieurs colonnes de
largeur égale, réparties dans plusieurs lignes d’affichage. Il vous suffira
d’indiquer le passage à la ligne par la classe class="w-100".
Voici le code utilisé dans le conteneur :
<div class="row">
<div class="col">
Maecenas sed...
</div>
<div class="col">
Lorem ipsum...
</div>
<div class="w-100"></div>
<div class="col">
</div>
<div class="col">
</div>
</div>
</div>

• Dans le conteneur, nous n’avons bien qu’une seule ligne <div
class="row">.
• Toutes les colonnes ont bien la même largeur non spécifiée
: class="col".
• Le passage à la ligne suivante se fait avec la boîte vide de tout
contenu <div class="w-100"></div>.
Voici l’affichage obtenu :
2. Les lignes incomplètes

Vous pouvez parfaitement indiquer des alignements de colonnes dont la
somme ne fasse pas 12. Dans ce cas, vous aurez des lignes
incomplètes.
Voici le code du conteneur :

<div class="row">
<div class="col-4">
</div>
<div class="col-4">
</div>
</div>
<div class="row">
<div class="col-2">
Nullam id dolor id nibh...
</div>
<div class="col-3">
Nullam id dolor...
</div>
<div class="col-5">
Etiam porta sem malesuada...
</div>
</div>
<div class="row">
<div class="col-5">
</div>
<div class="col-6">
</div>
</div>
</div>

• La grille comporte trois lignes.
• Les alignements sont définis par défaut, sans indication de taille
d’écran.
• La première ligne possède deux colonnes, alignées sur 4 colonnes,
soit un alignement global sur 4+4=8 colonnes.
• La deuxième ligne possède trois colonnes, alignées sur 2, 5 et 3
colonnes, soit un alignement global sur 2+5+3=10 colonnes.
• La troisième ligne possède deux colonnes, alignées sur 5 et 6
colonnes, soit un alignement global sur 5+6=11 colonnes.
Dans ce cas, les colonnes sont calées par défaut sur la gauche des
lignes.
Notez que pour plus de facilité, une bordure en tirets de 3 pixels est
placée sur le conteneur. Voici l’affichage obtenu :

3. Les lignes débordantes
À l’inverse de ce que nous venons de voir, nous pouvons nous
demander ce qui se passe si la somme des colonnes est supérieure à
12.
Voici le code du conteneur de cet exemple simple :
<div class="row">
<div class="col-6">
</div>
<div class="col-5">
Cum sociis natoque penatibus...
</div>
<div class="col-4">
Vestibulum id ligula...
</div>
</div>
</div>
Nous avons une seule ligne, <div class="row">, qui contient trois
colonnes. Ces colonnes sont respectivement alignées sur 6 colonnes
(<div class="col-6">), 5 colonnes (<div class="col-5">)
et 4 colonnes (<div class="col-4">). Nous avons donc un
alignement global de 6+5+4=15 colonnes, sur un maximum de 12. Dans
ce cas, la colonne "en trop" passe automatiquement à la ligne.

4. Les colonnes sans gouttière
Nous l’avons évoqué précédemment, par défaut les colonnes ont une
gouttière de 30 pixels entre elles. Chaque colonne possède un
remplissage à gauche et à droite de 0.75 em.
Si vous le désirez, vous pouvez avoir des colonnes sans gouttière avec
la classe .no-gutters appliquée à la ligne.
<div class="row no-gutters">
<div class="col-4">
</div>
<div class="col-4">
</div>
<div class="col-4">
Vestibulum id ligula porta felis...
</div>
</div>
</div>
Notez bien que l’absence de gouttière ne s’applique qu’entre les

colonnes. La première et la dernière colonne ont toujours leur
remplissage à gauche et à droite de 0.75 em.
5. Décaler des colonnes
Le module Flexbox nous permet de décaler des colonnes dans une
ligne, afin d’avoir des blocs de contenu qui soient espacés les uns des
autres. Dans cet exemple nous allons créer une grille de mise en page
avec trois lignes contenant chacune des colonnes décalées, avec la
classe.offset-X. Le suffixe X indique le nombre de colonnes pour le
décalage.

Attention, il faudra toujours que le nombre de colonnes pour les
alignements et les décalages soit égal à 12, pour avoir une mise en
page correcte.
<div class="row">
<div class="col-4">
Cras justo odio...
</div>
<div class="col-4 offset-4">
</div>
</div>
<div class="row">
Sed posuere consectetur...
</div>
</div>
<div class="row">
Sed posuere consectetur...
</div>
</div>
</div>
</div>

• La première ligne contient une première colonne alignée sur 4
colonnes : <div class="col-4">. La deuxième colonne est
aussi alignée sur 4 colonnes (<div class="col-4">), mais
possède en plus un décalage de 4 colonnes avec la classe
supplémentaire .offset-4. Nous avons bien en tout : 4
(alignement) + 4 (décalage) + 4 (alignement) = 12 colonnes.
• La deuxième ligne ne possède qu’une seule colonne. Cette unique
colonne est alignée sur 6 colonnes (<div class="col-6">)
et possède un décalage de 3 colonnes avec la classe
supplémentaire .offset-3. Nous avons bien en tout : 6
(alignement) + 3 (décalage) + 3 (restant) = 12 colonnes.
• La troisième colonne contient deux colonnes identiques. Elles sont
alignées sur 3 colonnes (<div class="col-3">) et
possèdent un décalage de 3 colonnes (.offset-3). Nous

avons bien en tout : 3 (alignement) + 3 (décalage) + 3
(alignement) + 3 (décalage) = 12 colonnes.
Notez bien que dans cet exemple nous n’avons pas indiqué de taille
d’écran, mais vous pouvez bien sûr combiner décalage et tailles d’écran.
Si vous avez un nombre de colonnes inférieur à 12 dans une ligne, vous
pouvez espacer automatiquement la dernière colonne pour qu’elle se
positionne à droite en fin de ligne. Pour cela, il suffit d’utiliser les
classes ms-auto, me-auto et col-auto.
Voici un exemple d’utilisation de ces classes :
<div class="row">
<div class="col-md-4">Lorem ipsum dolor sit amet...</div>
<div class="col-md-4 ms-auto">Ut eget faucibus nisl...</div>
</div>
<div class="row">
<div class="col-md-3 ms-md-auto">Cras tortor elit...</div>
<div class="col-md-3 ms-md-auto">Phasellus in purus in neque...</div>
</div>
<div class="row">
<div class="col-auto me-auto">Fusce tempor tempor justo eu porttitor.</div>
<div class="col-auto">Nullam eget sem in elit pretium volutpat.</div>
</div>
</div>
Analysons le code utilisé.

La première ligne contient deux colonnes :
moyens et supérieurs : .col-md-4.
• La deuxième colonne est aussi alignée sur 4 colonnes pour les
écrans moyens et supérieurs : .col-md-4. Cette colonne utilise
la classe .ms-auto, ce qui permet de pousser sur sa gauche la
colonne qui la précède. Cette colonne est ainsi calée tout à droite
de la ligne.
La deuxième ligne contient deux colonnes :
• Les deux colonnes sont placées sur 3 colonnes (.col-md-3).
• Elles utilisent aussi la classe .ms-md-auto qui permet de
pousser sur leur droite les colonnes qui les précédent et elles se
positionnent sur la droite de la ligne.
La troisième ligne contient deux colonnes :
• La première colonne est placée automatiquement à gauche, .me-
auto, et sa largeur est automatiquement adaptée à la quantité
de son contenu, .col-auto.
• La largeur de la deuxième colonne est aussi automatiquement
adaptée à la quantité de son contenu, .col-auto.
Notez bien que vous pouvez parfaitement appliquer une marge

supplémentaire à un côté d’une colonne pour une taille d’écran
spécifiée. Par exemple les classes mb-2 mr-md-3 indiquent qu’il y a
toujours une marge basse d’une valeur de 2 et une marge à droite d’une
valeur de 3 uniquement pour un affichage sur écran moyen et supérieur.
6. Imbriquer des lignes
Dans le cas de mises en page complexes, vous pouvez avoir besoin
d’imbriquer des lignes dans des cellules. La grille de Bootstrap permet
ces mises en pages complexes.
Dans cet exemple simple, nous allons imbriquer une ligne dans la
deuxième colonne d’une ligne.

<div class="row">
<div class="col-4">
Cras justo odio, dapibus...
</div>
<div class="col-8">
<div class="row">
Vivamus sagittis...
</div>
Cum sociis natoque...
</div>
</div>
</div>
</div>
</div>

• Nous avons une seule ligne dans le conteneur principal, de premier
niveau : <div class="row">.
• La première colonne est alignée sur 4 colonnes : <div
class="col-4">.
• La deuxième colonne est alignée sur 8 colonnes : <div
class="col-8">. Nous avons bien un alignement global sur
12 colonnes (4+8).
• Cette deuxième colonne contient une ligne imbriquée de deuxième
niveau : <div class="row">.
• Cette ligne imbriquée contient deux colonnes de structure
identique. Un alignement par défaut sur 12 colonnes et un
alignement sur 6 colonnes pour les écrans moyens et supérieurs
: <div class="col-12 col-md-6">. Pour les écrans
moyens et supérieurs, nous avons bien un alignement global sur
12 colonnes (6+6).

3.9. Les alignements des colonnes
1. L’alignement horizontal
La propriété justify-content du module CSS3 Flexbox permet de
gérer les alignements horizontaux des colonnes dans une ligne. Cela est
valable quand vous avez des lignes incomplètes, quand la somme des
alignements de colonnes est inférieure à 12. Flexbox peut aligner les
colonnes à gauche (valeur par défaut), au centre, à droite ou répartir les
colonnes dans la ligne.
<div class="row">
<div class="col-4">
</div>
<div class="col-4">
Vestibulum id...
</div>
</div>
<div class="row justify-content-start">
<div class="col-4">
</div>
<div class="col-4">
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
</div>
<div class="col-4">
Vestibulum id...
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
</div>
<div class="col-4">
Vestibulum id...

</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
</div>
<div class="col-4">
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
</div>
<div class="col-4">
</div>
</div>
</div>

• Nous avons six lignes incomplètes avec deux colonnes alignées
sur 4 colonnes chacune, <div class="col-4">, soit un
alignement global sur 8 colonnes.
• Le type d’alignement horizontal se déclare avec une classe
supplémentaire dans la boîte <div> de la ligne.
• La première ligne ne contient pas de classe d’alignement
supplémentaire et par défaut, l’alignement est à gauche.
• La deuxième ligne possède la classe supplémentaire .justify-
content-start qui indique un alignement à gauche.
• La troisième ligne possède la classe supplémentaire .justify-
content-center qui indique un alignement centré.
• La quatrième ligne possède la classe
supplémentaire .justify-content-end qui indique un
alignement à droite.
• La cinquième ligne possède la classe
supplémentaire .justify-content-around qui indique un
alignement réparti.
• La sixième ligne possède la classe supplémentaire .justify-
content-between qui indique un alignement justifié, les
colonnes sont calées à gauche et à droite.
À nouveau pour plus de facilité, une bordure en tirets de 3 pixels est

2. L’alignement vertical dans les lignes
La propriété align-itemsdu module Flexbox permet de gérer
l’alignement vertical des colonnes dans les lignes. Dans cet exemple,
nous avons quatre lignes, <div class="row">, qui possèdent trois
colonnes alignées chacune sur quatre colonnes, avec la classe par
défaut .col. Pour plus de facilité d’affichage, la première colonne de
chaque ligne contient plus de texte, afin de mieux visualiser les
alignements verticaux obtenus.
<div class="row">
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
<div class="row align-items-start">
<div class="col">
</div>
<div class="col">
</div>
<div class="col">

</div>
</div>
<div class="row align-items-center">
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
<div class="row align-items-end">
<div class="col">
Aenean eu leo quam....
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
</div>

• La première ligne ne possède pas de classe spécifique.
L’alignement vertical des colonnes utilise la valeur par défaut, à
savoir un alignement vertical en haut. Mais précisons que chaque
colonne occupe verticalement toute la place disponible.
• La deuxième ligne utilise la classe supplémentaire .align-
items-start qui indique un alignement vertical en haut.
Attention, cette fois la hauteur des colonnes est proportionnelle à
leur contenu. Vous pouvez le voir grâce aux bordures des
colonnes.
• La troisième ligne utilise la classe supplémentaire .align-
items-center qui indique un alignement vertical au milieu.
• La quatrième ligne utilise la classe supplémentaire .align-
items-end qui indique un alignement vertical en bas.
À nouveau pour plus de facilité, une bordure en tirets de 3 pixels est

3. L’alignement vertical dans les colonnes
Les classes supplémentaires assignées aux lignes appliquent
l’alignement sur la totalité des colonnes de la ligne. Vous pouvez
appliquer des alignements verticaux individuellement pour chaque
colonne d’une même ligne. C’est à nouveau une propriété du module
Flexbox qui est utilisée.
<div class="row">
<div class="col align-self-start">
Aenean eu leo quam....
</div>
<div class="col align-self-center">
</div>
<div class="col align-self-end">
</div>
</div>
</div>

• Nous n’avons qu’une seule ligne qui comporte trois colonnes avec
la classe par défaut .col.

• Dans la première colonne, nous avons la classe
supplémentaire .align-self-start qui applique un
alignement vertical en haut.
• Dans la deuxième colonne, nous avons la classe
supplémentaire .align-self-center qui applique un
alignement vertical au centre.
• Dans la troisième colonne, nous avons la classe
supplémentaire .align-self-end qui applique un
alignement vertical en bas.
3.10. Ordonner les colonnes
Par défaut, les colonnes sont affichées dans l’ordre défini dans le code.
Dans une ligne, la première colonne saisie dans le code est affichée en
premier, puis la deuxième saisie dans le code est affichée en deuxième
et ainsi de suite. Vous pouvez décider que cet ordre par défaut ne vous
convient pas. Dans ce cas, Flexbox vous permet d’ordonner les
colonnes comme vous le souhaitez dans les lignes, à l’aide de plusieurs
classes.
<div class="row">
<div class="col">
Colonne 1
</div>
<div class="col">
Colonne 2
</div>
<div class="col">
Colonne 3
</div>
<div class="col">
Colonne 4
</div>
</div>
<div class="row">
<div class="col">

Colonne 1
</div>
<div class="col order-5">
Colonne 2 placée à 5
</div>
<div class="col order-1">
Colonne 3 placée à 1
</div>
<div class="col">
Colonne 4
</div>
</div>
<div class="row">
<div class="col">
Colonne 1
</div>
<div class="col order-first">
Colonne 2 placée première
</div>
<div class="col order-last">
Colonne 3 placée dernière
</div>
<div class="col">
Colonne 4
</div>
</div>
</div>

• La première ligne contient quatre colonnes sans classe
supplémentaire, donc elles s’affichent dans l’ordre de saisie dans
le code.
• La deuxième ligne contient deux colonnes qui ne sont pas
réordonnées. Ces deux colonnes conservent leur ordre
d’affichage fixé par l’ordre de saisie dans le code. Cette même
ligne contient deux colonnes qui ont des classes
supplémentaires. La colonne saisie en numéro 2 dans le code,
possède la classe supplémentaire .order-5. Le suffixe de
cette classe indique le nouvel ordre d’affichage, ici la colonne doit
être affichée en cinquième position, soit en dernière position.
Même s’il n’y a que quatre colonnes, la valeur du suffixe n’a pas
d’importance, du moment qu’elle est la plus grande de toute. Le
suffixe aurait pu être 25, l’affichage obtenu aurait été le même. La
troisième colonne saisie dans le code, possède la classe
supplémentaire .order-1. Cette colonne s’affiche donc en
première position dans la ligne, mais après les colonnes qui ne
sont pas réordonnées.

La deuxième ligne contient aussi quatre colonnes, deux non réordonnée
(la première et la quatrième) et deux réordonnées. La deuxième colonne
saisie dans le code possède la classe supplémentaire .order-
first. Cela impose qu’elle soit positionnée en première place, quelles
que soient les classes des autres colonnes de la ligne. La troisième
colonne saisie dans le code possède la classe
supplémentaire .order-last. Cela impose qu’elle soit positionnée
en dernière place, quelles que soient les classes des autres colonnes de
la ligne.
4. Le texte
4.1. L’objectif
Bootstrap propose une série de règles CSS pour la mise en forme typographique du texte. Nous
allons passer en revue toutes ces règles CSS.
4.2. L'uniformisation des affichages
1. Le rendu des navigateurs

Comme nous l’avons déjà évoqué précédemment, les navigateurs n’ont pas tous le même rendu
pour toutes les propriétés des CSS. Il existe encore des différences plus ou moins importantes. Il
convient donc d’uniformiser ces rendus.
C’est l’objectif des styles Reboot de Bootstrap. Sachez que Reboot est basé sur Normalize de
Nicolas Gallagher (https://necolas.github.io/normalize.css/).
2. Le corps de la page
Avec Reboot, les éléments <html> et <body> se voient attribuer plusieurs règles par défaut.
Les polices de caractères ciblent les principaux navigateurs pour un affichage optimal. Bootstrap
utilise San Francisco pour iOS, Segoe UI pour Windows, Roboto pour Android et Helvetica
Neue et Arial pour les autres affichages. La taille de caractère est basée sur 16 pixels, avec la
valeur 1 rem.
L’élément <body> utilise une interligne line-height: 1.5;, une couleur de caractère color: #212529,
un alignement du texte text-align: left et une couleur d’arrière-plan background-color: #fff.
Pour la mise en page, tous les éléments utilisent la propriété box-sizing: border-box;.

Bien sûr tous les éléments inclus vont hériter de ces propriétés globales, sauf s’ils redéfinissent
leurs propres valeurs.
3. Les marges des en-têtes, des paragraphes, des listes et du texte préformaté
Les en-têtes, de <h1> à <h6>, et les paragraphes, <p>, n’ont pas de marge supérieure. La marge
inférieure des en-têtes est de margin-bottom: .5rem et celle des paragraphes est à 1rem.
Les listes, <ul>, <ol> et <dl>, n’ont pas de marge supérieure, mais une marge inférieure margin-
bottom: 1rem. Les listes imbriquées n’ont pas de marge inférieure.
Le texte préformaté, <pre>, n’a pas de marge supérieure, mais une marge inférieure margin-bottom:
1rem.
4. D’autres éléments
Les tableaux ont leur titre, l’alignement du texte, les bordures et le remplissage uniformisé. Les
formulaires ont de nombreuses propriétés impactées par le Reboot. D’autres éléments,
comme <address>, <blockquote>, <abbr> et <summary> ont aussi des propriétés ajustées.
4.3. Les règles CSS pour les en-têtes
Tous les exemples de ce titre peuvent être téléchargés dans le dossier nommé 04-Typographie-01.
4.3.1. Les sélecteurs d’éléments des en-têtes

Bootstrap propose une mise en forme de tous les en-têtes, de <h1> à <h6>.
Voici les règles CSS communes aux en-têtes
h6, h5, h4, h3, h2, h1 {

margin-top: 0;
margin-bottom: 0.5rem;
font-weight: 500;
line-height: 1.2;
}
Voici les tailles de caractères utilisées :

h1 {
font-size: 2.5rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.75rem;
}
h4 {
font-size: 1.5rem;
}
h5 {
font-size: 1.25rem;
}

h6 {
font-size: 1rem;
}
Voici un exemple simple d’utilisation des en-têtes
de <h1> à <h6> :
<h1>En-tête de niveau 1</h1>
4.3.2. Les sélecteurs de classe des en-têtes

Notez que Bootstrap propose des classes
nommées .h1, .h2, .h3, .h3, .h5 et .h6, qui utilisent les mêmes
propriétés que les en-têtes vus précédemment.
Ces classes peuvent s’utiliser dans des paragraphes par exemple :
<p class="h1">Paragraphe avec la classe <code>.h1</code></p>
4.3.3. L’affichage de grands en-têtes

Bootstrap nous propose des classes spéciales pour afficher les en-têtes
avec une grande taille de caractère. Dans les éléments
de <h1> à <h4>, il faut utiliser les classes .display-
1 à .display-4.
Voici le code utilisé dans cet exemple :

<h1 class="display-1">Affichage de niveau 1</h1>
4.4. Les paragraphes
Bootstrap propose une mise en forme spéciale pour mettre en évidence

certains paragraphes avec la classe .lead.
Le dossier de cet exemple à télécharger est nommé 04-Typographie-02.
<p>Etiam porta sem malesuada...</p>
<p class="lead">Etiam porta sem malesuada...</p>
<p>Etiam porta sem malesuada...</p>
Les paragraphes <p> utilisent les propriétés de Reboot que nous avons
évoquées précédemment :
p {
margin-top: 0;
margin-bottom: 1rem;
}
Dans notre exemple, le deuxième utilise la classe .lead, dont voici ses
propriétés :
.lead {
font-size: 1.25rem;
font-weight: 300;
}

4.5. Les mises en évidence
Bootstrap nous propose des mises en forme spécifiques pour les mises
en évidence de textes dans des paragraphes.
Voici le code de cet exemple :
<p>Cras mattis <mark>consectetur</mark> purus sit amet fermentum.</p>
<p>Cras mattis <del>consectetur</del> purus sit amet fermentum.</p>
<p>Cras mattis <s>consectetur</s> purus sit amet fermentum.</p>
<p>Cras mattis <ins>consectetur</ins> purus sit amet fermentum.</p>
<p>Cras mattis <u>consectetur</u> purus sit amet fermentum.</p>
<p>Cras mattis <small>consectetur</small> purus sit amet fermentum.</p>
<p>Cras mattis <strong>consectetur</strong> purus sit amet fermentum.</p>
<p>Cras mattis <em>consectetur</en> purus sit amet fermentum.</p>
Utilisez les outils d’analyse de code de vos navigateurs pour lister

toutes les propriétés et les valeurs utilisées dans ces classes.
4.6. Les abréviations
Bootstrap propose deux mises en forme pour mettre évidence des

abréviations. La première passe par l’utilisation de l’élément <abbr>, la

deuxième consiste à lui adjoindre une classe
dédiée nommée .initialism.
Voici l’exemple du code utilisé dans ces deux exemples :
<p>Vous utilisez l'<abbr title="HyperText Markup Language v4">html 4</abbr> ou
l'<abbrtitle="HyperText Markup Language v5" class="initialism">html5</abbr></p>
Le sélecteur abbr affiche le curseur en forme de point d’interrogation

et applique une bordure inférieure pointillée.
Voici les propriétés du sélecteur abbr :
abbr[title] {
text-decoration: underline dotted;
cursor: help;
}
La classe .initialism applique une taille de caractère plus petite et

met toutes les lettres en capitales :
abbr.initialism {
font-size: 0.875em ;
text-transform: uppercase;
}
4.7. Les citations
Bootstrap propose deux mises en forme pour mettre évidence des

abréviations. La première passe par l’utilisation de l’élément <abbr>, la
deuxième consiste à lui adjoindre une classe
dédiée nommée .initialism.
Voici l’exemple du code utilisé dans ces deux exemples :

<p>Vous utilisez l'<abbr title="HyperText Markup Language v4">html 4</abbr> ou
l'<abbrtitle="HyperText Markup Language v5" class="initialism">html5</abbr></p>
Le sélecteur abbr affiche le curseur en forme de point d’interrogation

et applique une bordure inférieure pointillée.
Voici les propriétés du sélecteur abbr :
abbr[title] {
text-decoration: underline dotted;
cursor: help;
}
La classe .initialism applique une taille de caractère plus petite et

met toutes les lettres en capitales :
abbr.initialism {
font-size: 0.875em ;
text-transform: uppercase;
}
4.8. Les listes
Le dossier à télécharger pour tous les exemples de cette section est nommé 4-Typographie-06.
1. Les listes classiques
De manière tout à fait classique, utilisez les éléments <ul> et <ol> pour créer vos listes non
ordonnées et ordonnées :
<p>Une liste non ordonnée :</p>
<ul>
<li>Pommes</li>
<li>Ananas</li>
<li>Poires</li>
<li>Fraises</li>

</ul>
<p>Une liste ordonnée :</p>
<ol>
<li>Pommes</li>
<li>Ananas</li>
<li>Poires</li>
<li>Fraises</li>
</ol>
Bootstrap applique les règles CSS du Reboot:
dl, ol, ul {
margin-top: 0;
}
2. Les listes sans style
Vous pouvez créer des listes sans style, c’est-à-dire sans ornementation, avec la classe .list-
unstyled :
<p>Une liste sans style :</p>
<ul class="list-unstyled">
<li>Pommes</li>
<li>Ananas</li>
<li>Poires</li>
<li>Fraises</li>
</ul>
Voici les propriétés CSS de la classe .list-unstyled :

.list-unstyled {

padding-left: 0;
list-style: none;
}
3. Les listes en ligne
Par défaut les items de la liste s’affichent les uns sous les autres. Vous pouvez, si vous le souhaitez,
placer les items les uns à côté des autres, sur la même ligne avec la classe .list-inline pour
l’élément <ul> et la classe .list-inline-item pour les éléments <li>.
<p>Une liste en ligne :</p>
<ul class="list-inline">
<li class="list-inline-item">Pommes</li>
<li class="list-inline-item">Ananas</li>
<li class="list-inline-item">Poires</li>
<li class="list-inline-item">Fraises</li>
</ul>
Voici l’affiche obtenu ::
Voici les propriétés CSS de la classe .list-inline :

.list-inline {
padding-left: 0;
list-style: none;
}
Voici les règles CSS utilisées par la classe .list-inline-item :
.list-inline-item:not(:last-child) {
margin-right: .5rem;
}
.list-inline-item {
display: inline-block;
}
4. Les listes de définitions

Les listes de définitions sont insérées avec les éléments <dl> pour spécifier la liste, <dt> pour
spécifier le terme à définir et <dd> pour spécifier la définition du terme. Pour mettre en forme ces
listes, Bootstrap préconise de les insérer dans une grille.
Voici le code utilisé :
<p>Une liste de définitions dans une grille :</p>
<dl class="row">
<dt class="col-sm-3">Tristique Ligula</dt>
<dd class="col-sm-9">Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam.
Pellentesque ornare sem lacinia quam venenatis vestibulum.
</dd>
<dt class="col-sm-3">Commodo Sem Cras</dt>
<dd class="col-sm-9">Curabitur blandit tempus porttitor.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Nulla vitae elit libero, a pharetra augue.</dd>
<dt class="col-sm-3">Malesuada porta</dt>
<dd class="col-sm-9">Morbi leo risus, porta ac consectetur
ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus.</dd>
</dl>
</div>

• La liste de définitions est globalement placée dans un conteneur : <div class="container">.
• La liste <dl> utilise la classe .row pour définir la ligne de la grille.
• Chaque terme <dt> et chaque définition <dd> sont placés dans des colonnes avec les
classes .col-XX-YY que nous avons étudiées dans le chapitre précédent. Dans ces exemples,

la taille de l’écran est -sm- pour les petits écrans. Les alignements sur la grille se font sur 3
et 9 colonnes, pour un total de 12 colonnes.
4.9. Afficher du code
Le dossier à télécharger pour tous les exemples de cette section est nommé 4-Typographie-07.
1. L’élément <code>
Pour les pages web nécessitant d’afficher du code dans une ligne, Bootstrap modifie nativement la
mise en forme de l’élément <code>.
Voici un exemple d’utilisation de l’élément <code> :
<p>Utilisez la classe <code>.ma-classe</code> pour l'en-tête.</p>
Voici les règles CSS utilisées :

code {
font-size: 0.875em;
color: #d63384;
word-wrap: break-word;
}
Bootstrap utilise des fontes à chasse fixe pour afficher le texte du code.
2. L’élément <pre>
Toujours pour les développeurs, Bootstrap propose d’utiliser l’élément <pre> pour afficher du code
sur plusieurs lignes.
Voici un exemple d’utilisation de l’élément <pre> :
<p>Utilisez cette syntaxe :</p>
<pre>
.ma-classe {
color: #efefef;
font-size: 90%;
}
</pre>

Voici la règle CSS utilisée :

pre {
display: block;
margin-top: 0;
overflow: auto;
font-size: 0.875em;
}
3. L’élément <variable>
L’élément <variable>, utilisé pour indiquer une variable, est aussi mis en forme par Bootstrap, avec
une simple mise en italique.
Le code de l’exemple :
<p>La variable <var>$page</var> dans la boucle</p>
L’affichage obtenu :
4. L’élément <kbd>
L’élément <kbd> permet d’indiquer l’utilisation des touches d’un clavier. La mise en évidence de
son contenu est forte.
Le code de l’exemple :
<p>Utilisez les touches <kbd>Ctrl</kbd> et <kbd>S</kbd>.</p>
La règle CSS utilisée :

kbd {

padding: 0.2rem 0.4rem;
font-size: 0.875em;
color: #fff;
background-color: #212529;
border-radius: 0.2rem;
}
5. L’élément <samp>
L’élément <samp> permet de signaler la présence d’un échantillon.
<p>Voici le résultat :</p>
<samp>Lorem Bibendum Pellentesque Etiam</samp>
5. Les images, les figures et les carousels
Voyons dans ce chapitre les classes Bootstrap qui permettent de mettre en forme les images, les
figures et les carousels. Les images sont de simples illustrations insérées dans le contenu de la page,
alors que les figures comportent une illustration et une légende. Les carousels permettent une
interaction avec les visiteurs.
5.1. Les images responsives
Bootstrap utilise par défaut des images responsives qui vont donc s’adapter aux tailles des écrans de
diffusion.
Le dossier à télécharger des exemples pour les images et les figures est nommé 05-Images-01.
Voici le code d’un exemple simple d’une image insérée dans une grille :
<div class="row">
<div class="col">

<p>Une photo de Venise :</p>
<img src="venise.jpg" class="img-fluid" alt="Un canal à Venise">
</div>
</div>
</div>
Voici l’affichage obtenu sur un grand écran, l’image occupe toute la place disponible dans la
colonne :
Voici l’affichage obtenu sur un petit écran, l’image occupe aussi toute la place disponible dans la
colonne mais elle est réduite proportionnellement :
Voici la règle CSS de la classe .img-fluid :

.img-fluid {

max-width: 100%;
height: auto;
}
5.2. Les bordures de l’image
La classe .img-thumbnail permet d’afficher une bordure fine et des coins arrondis à une image qui
reste responsive :
<div class="row">
<div class="col">
<p>La même photo de Venise, avec une fine bordure :</p>
<img src="venise.jpg" class="img-thumbnail"
alt="Un canal à Venise">
</div>
</div>
Voici la règle CSS de la classe .img-thumbnail :

.img-thumbnail {
padding: .25rem;
background-color: #fff;

border: 1px solid #dee2e6;
border-radius: .25rem;
max-width: 100%;
height: auto;
}
5.3. Aligner les images
Les classes .float-start et .float-end permettent d’aligner à droite et à gauche, les images dans une
même colonne d’une grille.
Voici le code de cet exemple simple :
<div class="row">
<div class="col">
<img src="dorsoduro-01.jpg" class="float-start" alt="Dorsoduro à Venise">
<img src="dorsoduro-02.jpg" class="float-end" alt="Dorsoduro à Venise">
</div>
</div>
Voici l’affichage obtenu sur un écran de taille moyenne :
Voici les règles CSS des classes utilisées :

.float-start {
float: left !important;
}
.float-end {
float: right !important;
}
Vous pouvez centrer une image avec la classe .text-center appliquée à la colonne <div class="col
text-center"> :
<div class="row">
<div class="col text-center">
<img src="dorsoduro-03.jpg" class="rounded"
alt="Dorsoduro à Venise">
</div>
</div>
Voici l’affichage obtenu sur un écran de taille moyenne :
Voici la règle CSS de la classe .text-center :

.text-center {
text-align: center!important;
}
L’image de cet exemple utilise aussi la classe .rounded qui permet d’appliquer un coin arrondi aux
images. Voici la classe CSS utilisée :
.rounded {
border-radius: 0.25rem !important;
}
5.4. Les sources des images
Dans le design de vos sites web, vous pouvez souhaiter prendre en considération les types d’écrans
de vos visiteurs. Ceux-ci peuvent avoir des écrans standards ou des écrans à haute définition. Pour
ces derniers il faut prévoir des images à haute définition aussi. Pour mettre en place cette dualité,
vous devez utiliser les éléments <picture>, <source> et <img>.
Voici une structure simple :
<picture>
<source srcset="venise-hd.jpg" type="image/svg+xml">
<img src="venise.jpg" class="img-fluid img-thumbnail"
alt="Venise">
</picture>
Analysons cette structure classique :

• Tous les éléments sont insérés dans l’élément <picture>.
• L’image à haute définition est placée dans l’élément <source>.
• L’image standard est placée dans l’élément classique <img>.
5.5. Les figures
Les figures dans l’élément <figure>, comportent l’image dans l’élément <img>, et sa légende dans
l’élément <figcaption>.
Voici la structure de cet exemple :
<div class="row">
<div class="col text-center">
<figure class="figure">
<img src="dorsoduro-01.jpg" class="figure-img
img-fluid rounded" alt="Venise">
<figcaption class="figure-caption">Basilique
Santa Maria della Salute.</figcaption>
</figure>
</div>
</div>
Notez que l’élément <figure> utilise la classe .figure, que l’image <img> utilise notamment la
classe .figure-img et que l’élément <figcaption> utilise la classe .figure-caption. Toutes ces classes
participent à l’élaboration de la mise en forme.
Voici les classes utilisées pour cette mise en forme :

.figure {

}
.figure-img {
margin-bottom: .5rem;
line-height: 1;
}
.figure-caption {
font-size: 90%;
color: #6c757d;
}
article, aside, dialog, figcaption, figure, footer, header,
hgroup, main, nav, section {
display: block;
}
5.6. Les carousels
Le dossier à télécharger contenant les exemples de cette section est nommé 05-Images-02.
Les fichiers des trois exemples sont nommés index1.html, index2.html et index3.html.
1. Un carousel simple
Pour ce premier exemple (index1.html), nous allons créer un carousel qui va permettre un
défilement automatique des images. Voici la structure de cet exemple :
<div id="venise" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100"
src="dorsoduro-01.jpg" alt="Dorsoduro">
</div>
<div class="carousel-item">
</div>
</div>
</div>
</div>
Le conteneur général est une boîte <div> ayant un identifiant et une classe
dédiée : <div id="venise" class="carousel slide" data-bs-ride="carousel">.

Le carousel en lui-même est dans une boîte <div> avec aussi une classe
dédiée : <div class="carousel-inner">.
Ensuite, chaque image est placée dans une nouvelle boîte <div>, avec la classe .carousel-item.
Notez que la première image du carousel a en plus la classe .active.
Chaque image est insérée dans un élément classique <img>, avec la classe dédiée .d-block. La
classe .w-100 permet d’indiquer que l’image doit occuper 100 % de la place disponible dans son
conteneur.
Voici le carousel au chargement de la page :
Voici le carousel avec un changement d’image :
2. Un carousel avec des boutons de contrôle
Pour ce deuxième exemple (index2.html), nous allons ajouter des boutons de contrôle afin que les
visiteurs puissent naviguer à leur guise entre les images. Nous afficherons aussi des indicateurs
d’ordre pour l’affichage des images.
<div id="venise-btn" class="carousel slide" data-bs-ride="carousel">

<div class="carousel-indicators">

<button type="button" data-bs-target="#venise-btn" data-bs-slide-to=
"0" class="active" aria-current="true" aria-label="Slide 1"></button>
"1" aria-label="Slide 2"></button>
"2" aria-label="Slide 3"></button>
</div>

<img class="d-block w-100" src="dorsoduro-01.jpg" alt="Dorsoduro">
</div>
</div>
</div>
</div>

<button class="carousel-control-prev" type="button"
data-bs-target="#venise-btn" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Précédent</span>
</button>
<button class="carousel-control-next" type="button"
data-bs-target="#venise-btn" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Suivant</span>
</button>
</div>
</div>
Nous avons la même structure que précédemment pour le carousel,

mais avec un nouvel identifiant :
<div id="venise-btn" class="carousel slide" data-bs-ride="carousel">
Les indicateurs de position des images sont placés dans la boîte <div
class="carousel-indicators">, sous la forme de boutons
numérotés. Voici le code du premier indicateur :
"0" class="active" aria-current="true" aria-label="Slide 1"></button>
Le carousel est identique et est placé dans la boîte <div

class="carousel-inner">.
Dans cette même boîte, les deux boutons d’action permettent de passer
d’une slide à l’autre.
Voici l’affichage obtenu sur l’image centrale :

3. Un carousel avec des légendes
Le dernier exemple (index3.html) permet de parfaire l’affichage du

carousel. Nous pouvons insérer des légendes pour chaque image, avec
une boîte <div class="carousel-caption d-none d-md-
block">.
<div id="venise-legende" class="carousel slide"
data-bs-ride="carousel">
<div class="carousel-caption">
<h5>Basilique Santa Maria della Salute</h5>
<p>Vue de la rive opposée</p>
</div>
</div>
<h5>Fin du Grand Canal</h5>
<p>Vu de Santa Maria della Salute</p>
</div>
</div>
<h5>Des gondoles à Santa Maria della Salute</h5>
<p>Vue sur le parvis</p>
</div>
</div>
</div>
</div>
Pour avoir ces légendes, il suffit d’ajouter une boîte <div> sous
chaque image. Cette boîte <div> utilise la classe

dédiée .carousel-caption. Dans cette boîte <div>, vous pouvez
insérer n’importe quel élément HTML.
Voici l’affichage obtenu avec des petites images :
6. Les tableaux
Dans ce chapitre nous allons étudier ce que nous propose Bootstrap pour la mise en forme des
tableaux.
6.1. Les tableaux simples
1. Les tableaux en pleine largeur

La classe .table de Bootstrap permet de mettre en forme de manière sobre les tableaux. Dans ces
exemples, les tableaux sont placés dans une grille avec un conteneur, une ligne et une colonne.
Le dossier à télécharger pour cet exemple est nommé 06-Tableaux-01.
Voici le code HTML utilisé pour ce premier exemple :
<div class="row">
<div class="col">
<table class="table">
<thead>
<tr>
<th>Numéro</th>
<th>Titre</th>
<th>Auteur</th>
<th>Pages</th>

</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>La nuit</td>
<td>Bidule</td>
<td>234</td>
</tr>
<tr>
<td>2</td>
<td>L'aube</td>
<td>Truc</td>
<td>194</td>
</tr>
<tr>
<td>3</td>
<td>Le jour</td>
<td>Machin</td>
<td>334</td>
</tr>
<tr>
<td>4</td>
<td>Le crépuscule</td>
<td>Tartempion</td>
<td>234</td>
</tr>
</tbody>
</table>
</div>
</div>

</div>
Notez que la largeur du tableau occupe 100% de la place disponible de son parent, la boîte <div> de
la colonne.
Voici les principales règles CSS utilisées pour la mise en forme de ce tableau :
.table {
width: 100%;
color: #212529;
vertical-align: top;
border-color: #dee2e6;
}
.table > thead {
vertical-align: bottom;
}
thead,tbody,tfoot,tr,td,th {
border-color: inherit;
border-style: solid;
border-width: 0;
}
2. Les tableaux à fond sombre
Si vous souhaitez avoir un tableau ayant un fond sombre, ajoutez la classe .table-dark à
l’élément <table> :
<table class="table table-dark">
...
</table>

La classe .table-dark ajoute ces propriétés :

.table-dark {
color: #fff;
background-color: #373b3e;
}
3. Les en-têtes de tableaux
Si vous avez opté pour un tableau classique, clair, vous pouvez afficher un en-tête sombre avec
l’ajout de la classe <thead class="thead-dark">. Et inversement, avec un tableau sombre, vous
pouvez afficher un en-tête clair avec <thead class="thead-light">.
6.2. Les lignes en alternance
Pour avoir des lignes grises et blanches en alternance, ajoutez la classe .table-striped à
l’élément <table>.
<table class="table table-striped">
...
</table>
Voici l’affichage du tableau obtenu, avec ses lignes grises en alternance :
Le fond grisé est appliqué aux éléments <td> avec le sélecteur : nth-of-type(odd) :
Vous pouvez aussi utiliser cette classe avec un tableau sombre : <table class="table table-
striped table-dark">.

6.3. Les tableaux encadrés
Pour avoir un tableau encadré, ajoutez la classe .table-bordered à l’élément <table>.

Voici le code HTML de cet exemple :
<table class="table table-bordered">
...
</table>
L’affichage du tableau avec sa bordure externe :
Vous pouvez obtenir un résultat similaire pour les tableaux sombre en ajoutant cette même
classe : <table class="table table-bordered table-dark">.
6.4. Le survol des lignes
Vous pouvez activer une mise en évidence des lignes survolées par le pointeur de la souris. Ajoutez
la classe .table-hover à l’élément <table>.
Le code HTML de cet exemple :
<table class="table table-hover">
...
</table>
La mise en évidence de la deuxième ligne de données survolée :
6.5. Les tableaux étroitisés

La classe .table-sm permet d’obtenir des largeurs de cellules plus petites en diminuant le
remplissage interne des cellules avec la propriété padding. Ajoutez cette classe à l’élément <table>.
Voici le code HTML de cet exemple :
<table class="table table-sm">
...
</table>
6.6. Les mises en évidence colorée
Vous pouvez utiliser sur les cellules (<td>) et/ou sur les lignes (<tr> ou sur le tableau (<table>)),
des classes qui permettent d’afficher un fond coloré.
• La classe .active affiche un fond gris.
• La classe .primary affiche un fond bleu pâle.
• La classe .secondary affiche un fond gris clair.
• La classe .danger affiche un fond rouge clair.
• La classe .info affiche un fond vert pâle.
• La classe .light affiche un fond blanc.
• La classe .dark affiche un fond gris foncé.
6.7. La légende des tableaux
Pour ajouter une légende à vos tableaux, utilisez l’élément <caption>.

<caption>Des livres à la bibliothèque</caption>
...
</table>

Voici les propriétés de l’élément caption :

caption {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
color: #6c757d;
text-align: left;
}
6.8. Les tableaux responsives
Pour que vos tableaux soient responsives, il faut ajouter la classe .table-responsive à
l’élément parent du tableau, l’élément <div> de la colonne de la grille dans cet exemple.
<div class="row">
<div class="col table-responsive">
...
</table>
</div>
</div>
</div>
Cette classe va permettre d’utiliser une barre de défilement pour visualiser les tableaux très larges.
Voici l’exemple d’un tableau large affiché dans une petite largeur d’écran :

Voici les propriétés de la classe .table-responsive :
.table-responsive {
overflow-x: auto;
}
Vous avez la possibilité de déterminer pour quelle taille d’écran, cette propriété doit être active en
ajoutant à la classe .table-responsive, les suffixes -sm, -md, -lg et -xl. Exemple pour les écrans
moyens et supérieurs : .table-responsive-md.
7. Les formulaires
Dans ce chapitre, nous allons étudier les styles CSS proposés par Bootstrap pour mettre en forme
les formulaires et leurs éléments inclus : les champs de saisie, les cases à cocher, les boutons radio...
Avec de nombreux exemples, nous allons aussi étudier la mise en page des formulaires à l’aide de
classes dédiées et avec les colonnes de la grille de Bootstrap.
La structure de base
1. Le formulaire Bootstrap
Le dossier à télécharger pour cet exemple est nommé 07-Formulaires-01.
Pour insérer un formulaire, nous allons utiliser une grille Bootstrap très simple, avec un
conteneur <div class="container">, une ligne <div class="row"> et une colonne <div class="col">.
Le formulaire est placé dans un élément <form> possédant l’attribut role="form". Ensuite, chaque
élément du formulaire sera inséré dans une boîte <div>. Les éléments insérés auront des classes
spécifiques pour leur mise en forme.
Voici un exemple simple avec deux champs de saisie, une case à cocher et un bouton de validation :

<form role="form">
<div class="mb-3">
<label for="lemail" class="form-label">Adresse mail</label>
<input type="email" class="form-control" id="lemail" placeholder=
"Indiquez votre adresse mail">
<div id="emailText" class="form-text">Votre adresse mail ne sera pas
divulguée.</div>
</div>
<div class="mb-3">
<label for="pw" class="form-label">Mot de passe</label>
<input type="password" class="form-control" id="pw" placeholder=
"Indiquez votre mot de passe">
<div id="pwText" class="form-text">Douze caractères minimum.</div>
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="accepter">
<label class="form-check-label" for="accepter">Accepter les conditions</label>
</div>
<button type="submit" class="btn btn-primary">Envoyer</button>
</form>
Détaillons cette structure :

• Les champs de saisie sont placés dans des boîtes <div class="mb-3">. La classe .mb-
3 permet d’avoir une marge inférieure supplémentaire.

• Les deux champs de saisie utilisent la même structure. Nous avons une étiquette de
champ <label> et un champ de saisie <input>. Ces deux éléments utilisent des classes
Bootstrap spécifiques pour leur mise en forme : .form-label et .form-control.
• Les aides qui s’affichent sous les champs sont placées dans des boîtes <div> avec la
classe .form-text.
• La case à cocher est placée dans une boîte <div class="mb-3 form-check">. La case à
cocher et le texte utilisent des classes spécifiques : .form-check-input et .form-check-label.
Voici les principales classes utilisées dans cet exemple :
.form-control {
display: block;
width: 100%;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-label {
margin-bottom: 0.5rem;
}
.form-text {
margin-top: 0.25rem;
font-size: 0.875em;
color: #6c757d;

}
Dans les formulaires, Bootstrap utilise de très nombreux sélecteurs et de très nombreuses classes.
Nous n’allons pas tous les détailler. Vous pouvez vous reporter à la documentation officielle de
Bootstrap afin d’avoir tous les éléments de détails voulus.
2. La hauteur des champs
Bootstrap nous offre la possibilité de déterminer la hauteur des champs, avec les classes .form-
control-lg et .form-control-sm.
<form role="form">
<div class="mb-3">
<label for="lemail">Adresse mail</label>
<input type="email" class="form-control"
id="lemail" placeholder="Hauteur par défaut">
</div>
<div class="mb-3">
input type="email" class="form-control form-control-lg"
id="lemail" placeholder="Grande hauteur">
</div>
<div class="mb-3">
<input type="email" class="form-control form-control-sm"
id="lemail" placeholder="Petite hauteur">
</div>
</form>

Voici les propriétés des deux classes utilisées :
.form-control-lg {
min-height: calc(1.5em + 1rem + 2px);
padding: 0.5rem 1rem;
font-size: 1.25rem;
}
.form-control-sm {
min-height: calc(1.5em + 0.5rem + 2px);
font-size: 0.875rem;
}
Pour avoir des libellés qui soient adaptés à ces hauteurs de champ, utilisez les classes .col-form-
label-lg avec .form-control-lg et .col-form-label-sm avec .form-control-sm, pour les
éléments <label> et <legend>.
3. Les champs en lecture seule
Si vous avez besoin d’afficher des champs en lecture seule, utilisez l’attribut standard readonly. Cet
attribut applique la mise en forme standard des navigateurs ; pour avoir la mise en forme Bootstrap,
utilisez la classe .form-control-plaintext dans le champ concerné.
Voici le code de cet exemple simple, où la classe est appliquée sur le champ du mot de passe :
<form role="form">

<div class="mb-3">
<input type="email" class="form-control"
id="lemail" placeholder="Indiquez votre adresse mail">
</div>
<div class="mb-3">
<label for="mdp">Mot de passe</label>
<input type="text" readonly class="form-control-plaintext"
id="mdp" placeholder="Mot de passe">
</div>
</form>
Voici les propriétés de la classe .form-control-plaintext :

.form-control-plaintext {
display: block;
width: 100%;
padding: 0.375rem 0;
margin-bottom: 0;
line-height: 1.5;
color: #212529;
background-color: transparent;
border: solid transparent;
border-width: 1px 0;
}

Les sélecteurs de choix
1. Les cases à cocher et les boutons radio standards

Les cases à cocher et les boutons radio s’insèrent dans une boîte avec une classe dédiée :
<div class="form-check">, avec l’élément HTML standard des formulaires, mais avec à nouveau
une classe dédiée : <input class="form-check-input">.
<form role="form">
<p>Choisissez une ou plusieurs options</p>
<div class="form-check">
<input class="form-check-input" type="checkbox"
value="" id="choix1">
<label class="form-check-label" for="choix1">Choix 1</label>
</div>
</div>
</div>
<p> </p>
<p>Choisissez une option</p>
<input class="form-check-input" type="radio"
name="btradio" id="choixa" value="choixa">
<label class="form-check-label" for="choixa">Choix A</label>
</div>

<input class="form-check-input" type="radio"
name="btradio" id="choixb" value="choixb">
<label class="form-check-label" for="choixb">Choix B</label>
</div>
<input class="form-check-input"
type="radio" name="btradio" id="choixc" value="choixc">
<label class="form-check-label" for="choixc">Choix C</label>
</div>
</form>
2. Les cases à cocher et les boutons radio en ligne

Vous pouvez afficher ces éléments en ligne, les uns à côté des autres avec la classe
supplémentaire .form-check-inline qui s’ajoute à la boîte <div> qui contient les cases à cocher et les
boutons radio.
...
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" value="" id="choix1">
</div>

...
Voici les propriétés CSS utilisées par cette classe :

.form-check-inline {
margin-right: 1rem;
}
.form-check-inline .form-check-input ~ .valid-feedback {
margin-left: 0.5em;
}
.form-check-inline .form-check-input ~ .invalid-feedback {
margin-left: 0.5em;
}
3. Les sélecteurs à bascule
Les sélecteurs à bascule sont une mise en forme spécifique des cases à cocher. Ces sélecteurs
utilisent la classe .form-switch.
Voici le code d’un exemple simple :
<form role="form">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch"
</div>

</div>
</div>
</form>
Les trois sélecteurs à bascule (switch en anglais) sont placés dans des boîtes <div>, utilisant la
classe déjà vue, .form-check, des cases à cocher et la nouvelle classe .form-switch pour afficher sa
forme en sélecteur à bascule.
Les choix 1 et 3 sont cochés, le choix 2 n’est pas coché.

4. Les boutons à bascule
Les boutons sont une autre forme de cases à cocher qui utilisent la classe .btn-check. Le dossier à
télécharger pour cet exemple est nommé 07-Formulaires-07.
Voici le code d’un exemple simple :
<form role="form">
<div class="mb-3">
<input type="checkbox" class="btn-check" id="choix1" autocomplete="off">
v<label class="btn btn-primary" for="choix1">Choix 1</label>
</div>
<div class="mb-3">
<label class="btn btn-primary" for="choix2">Choix 2</label>
</div>

<div class="mb-3">
<label class="btn btn-primary" for="choix3">Choix 3</label>
</div>
</form>
Les choix 1 et 2 sont cochés, le choix 3 n’est pas coché. La couleur bleu d’un bouton sélectionné
est plus foncée que celle d’un bouton non coché.
5. Les listes d’options
Bootstrap vous propose de personnaliser l’affichage des listes d’options de l’élément <select> avec
la classe dédiée .custom-select.
<form role="form">
<div class="mb-3">
<p>Choisissez une ville :</p>
<select class="form-select" aria-label="Choisir une ville">
<option value="venise">Venise</option>
<option value="paris">Paris</option>
<option value="londres">Londres</option>
<option value="madrid">Madrid</option>
</select>
</div>
<button type="submit" class="btn btn-primary">Envoyer
</button>

</form>
Notez que les attributs multiple et size sont bien pris en compte.
La sélection de fichiers
La sélection de fichiers sur l’ordinateur des internautes est une action très courante. Pour insérer un
sélecteur de fichier, il suffit d’utiliser un élément input, avec l’attribut type="file" et vous pouvez
aussi utiliser la classe form-control.
<form role="form">
<div class="mb-3">
<label for="fichier" class="form-label">Sélectionnez un fichier :</label>
<input class="form-control" type="file" id="fichier">
</div>
</form>
Des éléments de mise en forme
1. Utiliser des étiquettes flottantes

Les étiquettes des champs sont des éléments indispensables dans les formulaires. Mais pour
gagner un peu de place, vous pouvez les faire « flotter » dans les champs de saisie. Pour cela,

utilisez une boîte <div> avec la classe .form-floating. Dans chaque boîte <div>, placez
l’élément input et l’élément label. Notez qu’il est préconisé d’insérer d’abord l’élément input.
<form role="form">
<div class="form-floating mb-3">
<input type="text" class="form-control" id="nom" placeholder="Votre nom">
<label for="nom">Nom</label>
</div>
<div class="form-floating mb-3">
<input type="text" class="form-control" id="prenom" placeholder="Votre prénom">
<label for="prenom">Prénom</label>
</div>
<button type="submit" class="btn btn-primary mb-2">Envoyer</button>
</form>
Les règles CSS utilisées sont très nombreuses, voyons ici celles qui s’appliquent aux étiquettes :
.form-floating > label {
position: absolute;
top: 0;
left: 0;
height: 100%;
padding: 1rem 0.75rem;
pointer-events: none;
border: 1px solid transparent;

transform-origin: 0 0;
transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}
2. L’aide contextuelle
En plus de l’aide affichée dans le champ avec l’attribut placeholder, vous pouvez afficher une aide
contextuelle pour chaque champ que vous souhaitez. Pour ce faire, utilisez par exemple
l’élément <small> avec les classes .form-text et .text-muted.
Voici un exemple simple :
<form role="form">
<div class="form-group">
<input type="email" id="lemail" class="form-control"
placeholder="Indiquez votre adresse mail">
<small id="lemail" class="form-text text-muted">
Saisissez dans ce champ votre adresse mail, sans oublier le caractère @.
</small>
</div>
</form>
L’aide contextuelle placée dans l’élément <small> est liée au champ <input> par l’attribut id.
Voici les sélecteurs utilisés dans cette mise en forme :
.text-muted {
color: #6c757d!important;
}

.form-text {
margin-top: 0.25rem;
font-size: 0.875em;
color: #6c757d;
}
.small, small {
font-size: 80%;
font-weight: 400;
}
3. La validation des formulaires
Vous avez la possibilité de vérifier, de valider les saisies effectuées dans les champs des
formulaires, à l’aide de scripts JavaScript, PHP ou autres. Bootstrap propose des classes dédiées à
l’affichage des champs valides avec .is-valid, et non valides avec .is-invalid.
Les champs valides sont alors encadrés d’une bordure verte et les champs non valides sont
encadrés d’une bordure rouge.
Ajouter des informations aux champs
1. L’objectif
Bootstrap donne la possibilité d’ajouter des éléments d’information avant ou après les champs de
saisie. Ces informations peuvent être de tout ordre : des signes monétaires, des consignes courtes,
des symboles, des boutons...
Le dossier à télécharger pour les exemples de cette section est nommé 07-Formulaires-12.
2. Ajouter des informations supplémentaires
Dans cet exemple, nous allons ajouter des informations supplémentaires simples aux champs de
saisie. Ces éléments d’information seront placés soit à gauche, soit à droite des champs ou soit des
deux côtés.
<form role="form">
<div class="input-group mb-3">
<span class="input-group-text" id="prenom">Prénom</span>
<input type="text" class="form-control" placeholder="Votre prénom"
aria-label="prenom" aria-describedby="prenom">
</div>

<span class="input-group-text" id="nom">Nom</span>
<input type="text" class="form-control" placeholder="Votre nom"
aria-label="nom" aria-describedby="nom">
</div>
<input type="text" class="form-control" placeholder="Votre adresse
mail" aria-label="Adresse mail" aria-describedby="adresse-mail">
<span class="input-group-text" id="adresse-mail">prenom.nom@exemple.fr</span>
</div>
<label for="votre-url">URL de votre site web</label>
<span class="input-group-text" id="site-web">https://www.exemple.com/</span>
<input type="text" class="form-control" aria-label="site-web"
aria-describedby="site-web">
</div>
<span class="input-group-text" id="euro">€</span>
<input type="text" class="form-control" placeholder="Montant de l'inscription"
aria-label="Inscription en euros" aria-describedby="Inscription en euros">
<span class="input-group-text" id="centimes">.00</span>
</div>
<span class="input-group-text" id="infos-comp">Informations<br>
complémentaires</span>
<textarea class="form-control" aria-label="Informations complémentaires"
aria-describedby="Informations complémentaires"></textarea>
</div>
</form>

Voyons comment se structure l’ajout de ces informations supplémentaires. L’ensemble est placé
dans une boîte <div> utilisant la classe .input-group. Dans cet exemple, les boîtes <div> utilisent en
plus la classe .mb-3 pour ajouter une marge supplémentaire en bas de la boîte, pour espacer les
différents éléments.
L’information supplémentaire est insérée dans un élément <span> utilisant la classe dédiée .input-
group-text. Puis, vient ensuite l’objet de formulaire. Dans le premier exemple, c’est un champ de
saisie <input type="text" class="form-control"...>. Ce champ utilise la classe .form-control.
Bien sûr, l’ordre d’insertion des éléments <span> et <input> détermine l’ordre d’affichage dans la
page web.
3. Les champs de saisie multiples
Bootstrap vous permet d’insérer plusieurs champs dans le même conteneur. Cela vous permet de
gagner de la place.
<span class="input-group-text" id="prenom-nom">Prénom et nom</span>
<input type="text" class="form-control" placeholder="Votre prénom"
aria-label="prenom" aria-describedby="prenom">
<input type="text" class="form-control" placeholder="Votre nom"
aria-label="nom" aria-describedby="nom">
</div>

Nous avons toujours une boîte <div> avec la classe .input-group. Dans celle-ci, nous avons dans
l’ordre, un élément <span> pour l’affichage de l’information, et deux éléments <input>, pour les
deux champs de saisie.
4. Les informations supplémentaires multiples
Dans le premier exemple, nous avons placé des informations supplémentaires à gauche et à droite
du champ de saisie. Mais vous pouvez parfaitement placer plusieurs informations supplémentaires
du même côté.
Voici un exemple simple :
<div class="input-group">
<input type="text" class="form-control" aria-label="Montant en euros">
<span class="input-group-text" id="en-euros">€</span>
<span class="input-group-text" id="ss-cent">Sans les centimes</span>
</div>
Dans la boîte <div> classique, nous avons cette fois dans l’ordre l’élément <input> pour le champ
de saisie, suivi par les deux éléments <span> pour afficher les informations voulues.
5. Insérer des boutons

Vous pouvez insérer des boutons d’action à la place des informations supplémentaires.
<form role="form">
<label class="input-group-text" for="inputGroupFile01">Sélectionner
un fichier</label>
<input type="file" class="form-control" id="inputGroupFile01">
</div>
</form>

Dans cet exemple, toujours dans une boîte <div> classique, nous avons un élément <span> pour
afficher l’information voulue qui est suivie par un élément <input type="file"...> pour insérer un
bouton de sélection de fichiers.
8. Les composants d'interface
Dans ce chapitre nous allons étudier les composants d’interface qui peuvent être utilisés dans des
interfaces d’administration d’applications web. Mais rien ne vous empêche de les utiliser dans vos
pages web pour des cas particuliers.
Les badges
1. L’objectif
Les badges de Bootstrap permettent de mettre en évidence des mots importants, les liens
notables, des compteurs divers. Il suffit d’utiliser la classe .badge dans un
élément <span> ou <a> par exemple. Une deuxième classe dédiée va permettre de colorer ce badge.
Le dossier à télécharger pour cet exemple est nommé 08-Interface-01.
2. Les badges colorés
Dans ce premier exemple, nous allons placer des mots dans des badges colorés. Les classes qui
permettent de colorer les badges et les textes sont les suivantes :
• .bg-primary : bleu.
• .bg-secondary : gris.
• .bg-success : vert.
• .bg-danger : rouge.
• .bg-warning : orangé.
• .bg-info : bleu-vert.
• .bg-light: gris très clair.
• .bg-dark : noir.
<p>
Nibh Ornare <span class="badge bg-primary">Primary</span><br />
Fusce Ridiculus <span class="badge bg-secondary">Secondary</span><br />
Fringilla Amet <span class="badge bg-success">Success</span><br />
Vehicula Ipsum <span class="badge bg-danger">Danger</span><br />
Vestibulum Sem <span class="badge bg-warning">Warning</span><br />

Mollis Porta <span class="badge bg-info">Info</span><br />
Egestas Inceptos <span class="badge bg-light">Light</span><br />
Fermentum Euismod <span class="badge bg-dark">Dark</span>
</p>
Voici les propriétés CSS de la classe .bagde :

.badge {
padding: 0.35em 0.65em;
font-size: 0.75em;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
}
3. Les badges arrondis
La classe supplémentaire .rounded-pill permet d’obtenir des badges aux coins arrondis.
<p>
Nibh Ornare <span class="badge rounded-pill badge-primary">Primary</span><br />
Fusce Ridiculus <span class="badge rounded-pill badge-secondary">Secondary</span><br />

Fringilla Amet <span class="badge rounded-pill badge-success">Success</span><br />
Vehicula Ipsum <span class="badge rounded-pill badge-danger">Danger</span><br />
Vestibulum Sem <span class="badge rounded-pill badge-warning">Warning</span><br />
Mollis Porta <span class="badge rounded-pill badge-info">Info</span><br />
Egestas Inceptos <span class="badge rounded-pill badge-light">Light</span><br />
Fermentum Euismod <span class="badge rounded-pill badge-dark">Dark</span>
</p>
Voici les propriétés CSS de la classe .rounded-pill :

.rounded-pill {
border-radius: 50rem !important;
}
4. Les badges pour les liens
Vous pouvez parfaitement placer des badges dans des liens pour les mettre encore plus en évidence.
<p>
Nibh Ornare <a href="#" class="badge badge-pill badge-primary">Primary</a><br />
Fusce Ridiculus <a href="#" class="badge badge-pill badge-secondary">Secondary</a><br />
Fringilla Amet <a href="#" class="badge badge-pill badge-success">Success</a><br />
Vehicula Ipsum <a href="#" class="badge badge-pill badge-danger">Danger</a><br />
Vestibulum Sem <a href="#" class="badge badge-pill badge-warning">Warning</a><br />
Mollis Porta <a href="#" class="badge badge-pill badge-info">Info</a><br />
Egestas Inceptos <a href="#" class="badge badge-pill badge-light">Light</a><br />
Fermentum Euismod <a href="#" class="badge badge-pill badge-dark">Dark</a>

</p>
5. Insérer des badges dans du texte

Vous pouvez insérer des badges dans du texte, avec des éléments <span> et les classes vues
précédemment.
Voici le code de ces exemples :
<h1>En-tête niveau 1 <span class="badge bg-primary">NV1</span></h1>
<h2>En-tête niveau 2 <span class="badge bg-secondary">NV2</span></h2>
<h3>En-tête niveau 3 <span class="badge bg-success">NV3</span></h3>
<h4>En-tête niveau 4 <span class="badge bg-danger">NV4</span></h4>
<h5>En-tête niveau 5 <span class="badge bg-warning">NV5</span></h5>
<h6>En-tête niveau 6 <span class="badge bg-info">NV6</span></h6>
6. Insérer un badge dans un bouton

Très utilisés dans les interfaces web, les badges d’indication numérique peuvent s’insérer dans des
boutons. À nouveau, nous retrouvons les classes vues précédemment. Voici le code de cet exemple
simple :
<p>
<button type="button" class="btn btn-primary">Notifications
<span class="badge bg-danger">4</span>
</button>
</p>
Les alertes
1. L’objectif
Les alertes sont plutôt faites pour les interfaces d’administration des CMS, mais vous pouvez les
utiliser pour mettre en évidence des propos importants dans votre site web.
2. Les alertes simples
Pour afficher une carte Bootstrap, il vous suffit d’utiliser, par exemple, une boîte <div> avec la
classe .alert et une classe supplémentaire pour colorer l’arrière-plan de la boîte. Les couleurs sont
les mêmes que pour les badges, mais elles sont plus pastel.
<h2 class="titre">Les alertes simples</h2>
<div class="alert alert-primary role="alert"">Donec id elit non mi porta
gravida at eget metus. Vestibulum id ligula porta felis euismod semper.</div>
<div class="alert alert-secondary role="alert"">Donec id elit non mi porta
<div class="alert alert-success role="alert"">Donec id elit non mi porta
<div class="alert alert-danger role="alert"">Donec id elit non mi porta
<div class="alert alert-warning role="alert"">Donec id elit non mi porta
<div class="alert alert-info role="alert"">Donec id elit non mi porta

<div class="alert alert-light role="alert"">Donec id elit non mi porta
<div class="alert alert-dark role="alert"">Donec id elit non mi porta
Voici les propriétés de la classe .alert :

.alert {
position: relative;
padding: 1rem 1rem;
border: 1px solid transparent;
}
Voici en exemple les propriétés de la classe .alert-primary :
.alert-primary {
color: #084298;
background-color: #cfe2ff;
border-color: #b6d4fe;
}
3. Les alertes avec des liens

Vous pouvez insérer des liens dans vos alertes avec la classe .alert-link. Voici le code de cet
exemple :
<h2 class="titre">Les alertes avec des liens</h2>
<div class="alert alert-primary" role="alert">Donec id elit
non mi <a href="#" class="alert-link">porta gravida</a>.</div>
<div class="alert alert-secondary" role="alert">Donec id elit
<div class="alert alert-success" role="alert">Donec id elit
<div class="alert alert-danger" role="alert">Donec id elit
<div class="alert alert-warning role="alert"">Donec id elit
<div class="alert alert-info role="alert"">Donec id elit
<div class="alert alert-light role="alert"">Donec id elit
non mi <a href="#" class="alert-link">porta gravida </a>.</div>
<div class="alert alert-dark role="alert"">Donec id elit

Voici les règles et propriétés de la classe .alert-link :
.alert-link {
font-weight: 700;
}
4. Des alertes riches en texte
Dans une boîte d’alerte vous pouvez parfaitement insérer beaucoup de texte. La boîte <div> peut
contenir tous les éléments HTML que vous souhaitez.
Voici un exemple :
<h3>Ridiculus Vestibulum Malesuada Elit</h3>
<p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat
a ante venenatis <em>dapibus posuere</em> velit aliquet.</p>

<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ullamcorper <strong>nulla non metus</strong> auctor fringilla. Nulla vitae
elit libero, a pharetra augue. Integer posuere erat a ante venenatis dapibus
posuere velit aliquet.</p>
</div>
5. Fermer une fenêtre d’alerte

Si vous utilisez les alertes dans une interface d’administration, il faut donner la possibilité aux
utilisateurs de fermer ces fenêtres d’alerte. Pour ce faire, ajoutez un bouton d’action dans votre
boîte <div>.
<div class="row">
<div class="col">
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Bibendum Lorem Fringilla !</strong>
<br>
Praesent commodo cursus magna...
<button type="button" class="btn-close" data-bs-dismiss="alert"
aria-label="Close"></button>
</div>
</div>

</div>
Voici les principaux éléments du code :
• <div class="alert alert-warning alert-dismissible fade show" role="alert"> : c’est la boîte qui
contient toute la structure. Elle utilise plusieurs classes CSS dédiées possédant le
libellé alert.
• Nous avons ensuite le contenu textuel de la boîte.
• Pour terminer, nous avons le bouton <button type="button" class= "btn-
close"...></button> qui permet de fermer la fenêtre d’alerte.
Les barres de progression
1. L’objectif
Les barres de progression sont très utilisées dans les interfaces d’administration des applications
web. Bootstrap nous propose une série de barres de progression mises en forme de manière variée.
Le dossier à télécharger pour ces exemples est nommé 08-Interface-03.
2. La barre de progression simple
Commençons par une barre de progression simple, sur fond bleu.
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%"
aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
• Le conteneur de la barre de progression est placé dans une boîte : <div class="progress">.
• La barre de progression en elle-même est ajoutée dans une autre boîte <div> imbriquée dans
la précédente :
aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
• La classe utilisée est .progress-bar.
• La largeur d’affichage est indiquée dans le style en ligne : style="width: 25%".
• Pour l’accessibilité, les valeurs d’affichage, minimale et maximale, sont indiquées dans les
attributs aria.
Vous pouvez aussi utiliser cette syntaxe où la largeur est indiquée dans la boîte <div> de la barre de
progression, avec la classe .w-X. Le suffixe X indique la largeur. Dans ce cas, il n’est pas
nécessaire d’utiliser l’attribut style :
<div class="progress-bar w-25" role="progressbar"
aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
3. L’étiquette de la valeur
Vous pouvez afficher la valeur de la barre de progression sous la forme d’une étiquette en indiquant
cette valeur comme contenu de la boîte <div> de la barre de progression.
Voici le code à utiliser :
<div class="progress-bar" role="progressbar"
style="width: 25%;" aria-valuenow="25" aria-valuemin="0"
aria-valuemax="100">25%</div>
</div>
4. La hauteur de la barre
Vous pouvez spécifier la hauteur, c’est-à-dire l’épaisseur de la barre de progression, avec
l’attribut style appliqué au conteneur de la barre.
Voici deux exemples, avec des hauteurs fixées à 10 pixels et à 40 pixels :
<div class="progress" style="height: 10px;">
<div class="progress-bar" role="progressbar" style="width: 25%;"
aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
<div class="progress" style="height: 40px;">

<div class="progress-bar" role="progressbar" style="width: 25%;"
aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
5. Les barres de progression colorées

Vous pouvez ajouter des classes pour avoir une couleur de fond différente :
• .progress-bar-success : fond vert.
• .progress-bar-info : fond cyan.
• .progress-bar-warning : fond orange.
• .progress-bar-danger: fond rouge.
Voici les sélecteurs utilisés pour appliquer un fond coloré :
.bg-success {
background-color: #28a745!important;
}
.bg-info {
background-color: #17a2b8!important;
}
.bg-warning {
background-color: #ffc107!important;
}
.bg-danger {
background-color: #dc3545!important;
}

6. Les barres de progression hachurées
Pour avoir des fonds hachurés et colorés, utilisez la classe .progress-bar-striped dans la
boîte <div> de la barre de progression.
<div class="progress-bar progress-bar-striped bg-success"
role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
7. Les barres de progression animées

Vous pouvez animer vos barres de progression hachurées avec la classe supplémentaire .progress-
bar-animated appliquée à la boîte <div> de la barre.
<div class="progress-bar progress-bar-striped
progress-bar-animated" role="progressbar" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>
Voici l’affichage, non animé, obtenu :
8. Les barres de progression empilées

Pour terminer, sachez que vous pouvez « empiler » les barres de progression en ajoutant un style en
ligne où est indiquée la largeur souhaitée pour chaque partie de la barre de progression multiple.
<div class="progress-bar bg-success" role="progressbar"

style="width: 30%" aria-valuenow="30" aria-valuemin="0"
aria-valuemax="100"></div>
<div class="progress-bar bg-info" role="progressbar" style="width: 20%"
</div>
Les listes d’éléments
1. L’objectif
Bootstrap nous propose une élégante liste d’éléments <ul>, avec la classe .list-group. Vous pouvez
afficher ce que vous voulez dans cette liste : texte, liens...
2. Une liste simple
Premier exemple simple : une liste de texte. Tous les items <li> sont affichés les uns sous les autres.
Le code utilisé :
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
L’affichage de cette liste simple :

3. L’élément actif
Vous pouvez mettre en évidence un élément <li> comme étant "actif" dans la liste des items, avec la
classe .active.
Voici un exemple pour le premier item :
<li class="list-group-item active">Cras justo odio</li>
<li class="list-group-item">Morbi leo risus</li>
</ul>
Voici l’affichage obtenu, le fond de l’item est bleu :

4. Un élément désactivé
Dans le même esprit, vous pouvez mettre en évidence un item <li> comme étant désactivé, avec la
classe .disabled.
Voici un exemple pour le troisième item :
<li class="list-group-item disabled">Morbi leo risus</li>
</ul>
Voici l’affichage obtenu, le texte de l’item est grisé :
5. Une liste horizontale

Avec l’ajout de la classe .list-group-horizontal, vous pouvez afficher vos listes horizontalement :
<ul class="list-group list-group-horizontal">
<li class="list-group-item">Aenean</li>
<li class="list-group-item">Dapibus</li>
<li class="list-group-item">Morbi</li>
<li class="list-group-item">Porta</li>
<li class="list-group-item">Vestibulum</li>
</ul>

6. Les listes de boutons
Vous pouvez parfaitement utiliser ce type de liste d’items pour créer des liens avec des boutons. Il
suffit d’utiliser des éléments <a> à la place des éléments <li>. Chaque élément <a> doit avoir la
classe supplémentaire .list-group-item-action. Les classes précédentes peuvent être utilisées.
Voici un exemple :
<a href="#" class="list-group-item
list-group-item-action active">Cras justo odio</a>
list-group-item-action">Dapibus ac facilisis in</a>
list-group-item-action disabled">Morbi leo risus</a>
list-group-item-action">Porta ac consectetur ac</a>
list-group-item-action">Vestibulum at eros</a>
</ul>
p
7. Liste sans bordure

La classe .list-group-flush appliquée à l’élément <ul> permet de ne pas afficher les bordures et les
coins arrondis :
Voici un exemple :
<ul class="list-group list-group-flush">
<li class="list-group-item disabled">Morbi leo risus</li>
</ul>
8. Les listes colorées

Avec les classes .list-group-item-couleur vous pouvez colorer l’arrière-plan des items de la liste. Le
suffixe couleur reprend les mêmes termes vus précédemment, pour obtenir les couleurs pastelles.
<li class="list-group-item list-group-item-primary">
Cras justo odio</li>
<li class="list-group-item list-group-item-secondary">
Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-success">
Morbi leo risus</li>
<li class="list-group-item list-group-item-danger">

Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-warning">
Vestibulum at eros</li>
<li class="list-group-item list-group-item-info">
Fermentum Mollis Porta</li>
<li class="list-group-item list-group-item-light">
Bibendum Magna Amet</li>
<li class="list-group-item list-group-item-dark">
Elit Dapibus Condimentum</li>
</ul>
9. Les listes avec des badges

Vous pouvez intégrer des badges dans vos listes d’items, avec la syntaxe vue précédemment. Les
éléments <li> possèdent des classes flex supplémentaires pour permettre l’alignement des badges
sur la droite.
<li class="list-group-item d-flex justify-content-between align-items-center">

Dolor Justo Tristique
<span class="badge bg-primary rounded-pill">8</span>
</li>
Mollis Commodo Bibendum
</li>
Nibh Ullamcorper Magna
</li>
</ul>
10. Les listes riches en texte

Vous pouvez parfaitement utiliser les listes d’items pour avoir des listes qui soient riches en texte,
avec des liens pour chaque item. Cette structure utilise de nombreuses classes vues précédemment.
Voici un exemple :
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action
flex-column align-items-start active">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Parturient Risus Adipiscing</h5>
<small>Publié il y a 2 jours</small>
</div>
<p class="mb-1">Cras justo...</p>
<small>Venenatis Condimentum Fermentum Ornare.</small>
</a>
flex-column align-items-start">
<h5 class="mb-1">Consectetur Purus Nibh</h5>
<small class="text-muted">Publié il y a 5 jours</small>
</div>
<p class="mb-1">Nullam id dolor...</p>
<small class="text-muted">Egestas Etiam Commodo Magna.</small>
</a>
flex-column align-items-start">
<h5 class="mb-1">Bibendum Ultricies Ornare</h5>
<small class="text-muted">Publié il y a 7 jours</small>
</div>
<p class="mb-1">Vestibulum id ligula...</p>
<small class="text-muted">Vehicula Pharetra Egestas Mattis.</small>
</a>
</div>

11. Les listes d’items et de textes
Vous pouvez associer une liste d’items et du texte à afficher. Quand l’utilisateur clique sur un item
de la liste, cela affiche un texte associé.
Voici cette structure très élaborée :
<div class="row mt-4">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active"
id="list-fusce-list" data-toggle="list" href="#list-fusce" role="tab"
aria-controls="fusce">Fusce dapibus</a>
<a class="list-group-item list-group-item-action"
id="list-nullam-list" data-toggle="list" href="#list-nullam" role="tab" aria-
controls="nullam">Nullam quis</a>
<a class="list-group-item list-group-item-action"
id="list-donec-list" data-toggle="list" href="#list-donec" role="tab"
aria-controls="donec">Donec id elit</a>

<a class="list-group-item
list-group-item-action" id="list-morbi-list" data-toggle="list"
href="#list-morbi" role="tab" aria-controls="morbi">Morbi leo risus</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active"
id="list-fusce" role="tabpanel" aria-labelledby=
"list-fusce-list"><strong>Fusce dapibus</strong> tellus ac cursus
commodo...</div>
<div class="tab-pane fade" id="list-nullam"
role="tabpanel" aria-labelledby="list-nullam-list"><strong>Nullam
quis</strong> risus eget urna mollis...</div>
<div class="tab-pane fade" id="list-donec"
role="tabpanel" aria-labelledby="list-donec-list"><strong>Donec id
elit</strong> non mi porta...</div>
<div class="tab-pane fade" id="list-morbi"
role="tabpanel" aria-labelledby="list-morbi-list"><strong>Morbi leo
risus</strong> porta ac consectetur ac...</div>
</div>
</div>
</div>
Étudions cette structure :
• Nous avons une ligne dans la grille Bootstrap : <div class="row mt-4">. Cette ligne possède
la classe supplémentaire .mt-4 pour avoir une marge supplémentaire en haut de la
boîte <div>, afin d’avoir plus d’espace par rapport à la ligne précédente.
• La première colonne est alignée sur 4 colonnes : <div class="col-4">. La deuxième
colonne est alignée sur 8 colonnes : <div class="col-8">.
• La première colonne contient la liste des items dans une boîte : <div class="list-group"
id="list-tab" role="tablist">

Chaque item est un lien <a>. Chaque lien possède un identifiant unique id que l’on retrouve sous la
forme de la valeur de l’attribut aria-labelledby dans les textes à afficher. Chaque item possède
l’attribut href dont la valeur est l’identifiant de la boîte <div> contenant le texte à afficher.
• La deuxième colonne contient les textes à afficher dans une boîte : <div class="tab-
content" id="nav-tabContent">
Chaque texte est placé dans une boîte <div> possédant, notamment, un identifiant id qui est utilisé
dans le lien associé dans la liste des items.
Voici l’affichage obtenu au chargement de la page :
Voici l’affichage obtenu lorsque l’utilisateur a cliqué sur le lien du deuxième item :
12. Les listes numérotées

Vous pouvez aussi numéroter vos listes avec l’élément <ol> ayant la classe .list-group-
numbered. Voici le code de cet exemple simple :
<ol class="list-group list-group-numbered">
<li class="list-group-item">Aenean</li>
<li class="list-group-item">Dapibus</li>
<li class="list-group-item">Morbi</li>
<li class="list-group-item">Vestibulum</li>
</ol>

Les cartes
1. L’objectif
Les cartes, cards en anglais, permettent d’afficher des informations produit avec, par exemple, une
image d’illustration et du texte d’information. Vous avez la possibilité de structurer le texte avec des
en-têtes et des pieds de page.
2. Une carte simple
Pour ce premier exemple, nous allons afficher une carte simple avec une illustration et un texte
d’information.
<div class="card" style="width: 300px;">
<img class="card-img-top" src="dorsoduro-01.jpg" alt="Santa Maria della Salute">
<div class="card-body">
<h5 class="card-title">Venise</h5>
<h6 class="card-subtitle">Le Dorsoduro</h6>
<p class="card-text">La basilique Santa Maria<br> della Salute</p>
</div>
</div>

La carte est dans le conteneur <div class="card">. La classe .card permet le bon affichage de
l’ensemble. Nous avons ici un style en ligne qui détermine la largeur de la carte qui est fixée selon
la largeur de l’image utilisée.
L’image est insérée dans un classique élément <img>, avec sa classe dédiée .card-img-top qui
permet de placer l’image en haut de la carte.
Le texte d’information est placé dans une boîte <div>, avec la classe .card-body. Dans cette boîte se
trouvent trois éléments HTML de texte. Un titre <h5> avec la classe .card-title, un sous-
titre <h6> avec la classe .card-subtitle et le texte <p> avec la classe .card-text.
3. Des cartes plus élaborées
Pour ce deuxième exemple, nous allons insérer plusieurs cartes et ajouter plusieurs éléments
d’interface : des titres, des boutons, un fond coloré, une bordure.
<div class="card-group" style="color: white;">
<div class="card bg-warning border-dark">
<img class="card-img-top" src="dorsoduro-01.jpg" alt="Risus Porta">
<div class="card-img-overlay">
<h5 class="card-title">Quam Fringilla</h5>
</div>
<h5 class="card-title">Risus Porta</h5>
<p class="card-text">Curabitur blandit...</p>
<a href="#" class="btn btn-primary"> Tristique Ipsum</a>
</div>
<div class="card-footer">
<small>Risus Nullam Tellus</small>
</div>
</div>
<div class="card bg-success border-dark">
<img class="card-img-top" src="dorsoduro-02.jpg" alt="Elit Amet">
<h5 class="card-title">Vestibulum Ridiculus</h5>
</div>

<h5 class="card-title">Elit Amet</h5>
<p class="card-text">Cras justo odio...</p>
<a href="#" class="btn btn-primary">Mattis Nibh</a>
</div>
<small>Mollis Vestibulum Risus Nullam</small>
</div>
</div>
<div class="card bg-danger border-dark">
<img class="card-img-top" src="dorsoduro-03.jpg"
alt="Sollicitudin Ornare Malesuada">
<h5 class="card-title">Ipsum Dolor</h5>
</div>
<h5 class="card-title">Sollicitudin Ornare Malesuada</h5>
<p class="card-text">Curabitur blandit...</p>
<a href="#" class="btn btn-primary">Vulputate Mollis</a>
</div>
<small>Fermentum Ultricies Dapibus Elit </small>
</div>
</div>
</div>

Voyons les éléments supplémentaires qui permettent cette mise en forme très chargée :
• Nous avons un nouveau conteneur général qui permet l’affichage des trois cartes avec la
boîte <div class="card-group" style="color: white;">. C’est la classe .card-group qui permet
l’affichage des cartes les unes à côté des autres. Comme nous allons avoir des fonds colorés,
j’ai ajouté un style en ligne pour avoir le texte en blanc : style="color: white;".
• Chaque conteneur individuel des cartes utilise deux nouvelles classes. La classe .bg-
couleur permet d’avoir un arrière-plan coloré, bg pour background. Le
suffixe couleur détermine la couleur d’arrière-plan, avec les préfixes que nous avons déjà
vus précédemment. Tous les conteneurs individuels ont la même bordure noire, insérée avec
la classe .border-dark. Vous pouvez choisir la couleur des bordures avec les mêmes suffixes.
• Nous avons un autre titre, <h5 class="card-title">, qui s’affiche au-dessus de l’image. Ce
sur-titre est placé dans la boîte <div class="card-img-overlay">.
• Dans le corps de la carte, nous avons un bouton qui s’affiche sous le texte, avec
l’élément <a href="#" class="btn btn-primary">. La couleur du bouton suit toujours le
même principe des suffixes vus précédemment.
• Enfin, sous le corps de la carte, nous avons un pied de page qui est inséré dans la
boîte <div class="card-footer">.
Les bulles d’aide
1. L’objectif
Les bulles d’aide sont des éléments très communs dans les interfaces d’administration des CMS
notamment. Cela permet aux utilisateurs d’avoir une aide contextuelle sur les fonctionnalités de
l’application. Mais bien sûr, vous pouvez utiliser ces bulles d’aide dans les pages web de vos sites.
2. Les paramètres techniques

Les bulles d’aide de Bootstrap fonctionnent avec la librairie Popper.js (https://popper.js.org/). Il
faut donc impérativement que votre page fasse référence à cette librairie.
Si vous utilisez le lien vers bootstrap.bundle.min.js, comme nous l’avons toujours fait
précédemment, la bibliothèque Popper.js y est liée, donc il n’y aura pas de problèmes de
JavaScript.
Le deuxième paramètre technique est l’initialisation des bulles d’aide. Il faut pour cela ajouter avant
la fermeture de l’élément <body> une commande JavaScript après les liens aux scripts :

<script>
var tooltipTriggerList =
[].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
</body>
3. Un exemple de bulles d’aide
Vous avez la possibilité d’indiquer où doit apparaître le texte de la bulle d’aide : en haut, à gauche,
en bas ou à droite. De plus, vous pouvez insérer une mise en forme HTML dans le texte.
<div class="row mt-5">
<div class="col">
<button type="button" class="btn btn-secondary"
data-toggle="tooltip" data-placement="top" title="Donec ullamcorper
nulla non metus auctor fringilla">
Bulle d'aide en haut
</button>
</div>
<div class="col">
data-toggle="tooltip" data-placement="right" title="Aenean eu
leo quam. Pellentesque ornare sem lacinia">
Bulle d'aide à droite

</button>
</div>
<div class="col">
data-toggle="tooltip" data-placement="bottom" title="Donec id
elit non mi porta gravida at eget metus">
Bulle d'aide en bas
</button>
</div>
<div class="col">
data-toggle="tooltip" data-placement="left" title="Ullamcorper
nulla non metus auctor fringilla">
Bulle d'aide à gauche
</button>
</div>
<div class="col">
data-toggle="tooltip" data-placement="bottom" data-html="true"
title="Vestibulum id <em>ligula</em> porta felis <strong>euismod
</strong> semper">
Bulle d'aide mise en forme
</button>
</div>
</div>
• Chaque bulle d’aide est placée dans un bouton <button type="button">. Les classes
utilisées, .btn btn-secondary sont uniquement utiles pour la mise en forme du bouton.
• L’attribut data-toggle="tooltip" est utilisé pour accéder aux fonctionnalités des bulles d’aide
avec l’initialisation dans le script que nous avons vu précédemment.

• L’attribut data-placement="position" permet de déterminer la position d’affichage de la
bulle d’aide. Les valeurs de position sont : top pour en haut, right pour à droite, bottom pour
en bas et left pour à gauche.
• L’attribut title permet d’insérer le texte de la bulle d’aide. Si vous souhaitez avoir une mise
en forme du texte de la bulle d’aide, utilisez l’attribut data-html="true" et insérez des
éléments HTML dans l’attribut title.
Voici l’affichage obtenu, pour une bulle d’aide en haut :
Voici l’affichage obtenu pour une bulle d’aide avec une mise en forme HTML :
Les bulles d’aide élaborées
Nous pouvons aussi insérer des bulles d’aide plus élaborée d’un point de vue mise en forme. Les
remarques techniques précédentes sont toujours valables et indispensables pour cet exemple. Le
dossier à télécharger pour cet exemple est nommé 08-Interface-07.
Voici le code complet utilisé pour cet exemple :
<div class="row">
<div class="col">
<button type="button" class="btn btn-primary"
data-bs-container="body" data-bs-toggle="popover"
data-bs-placement="right" title="Mollis Fusce Bibendum" data-bs-content=
"Cras justo odio...">Cliquez pour obtenir de l'aide</button>
</div>
</div>
</div>

bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgY
sOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


<script>
var popoverTriggerList =
[].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>
Voici l’affichage obtenu lorsque l’utilisateur clique sur le bouton :

• La bulle d’aide est insérée dans un bouton <button type="button">. Les classes .btn et .btn-
primary permettent la mise en forme du bouton.
• C’est l’attribut data-bs-toggle="popover" qui permet d’accéder aux fonctionnalités des
bulles d’aide, en liaison avec le script d’initialisation. L’attribut data-bs-
placement="right" détermine la position d’affichage du texte de la bulle d’aide.
• Le titre affiché de la bulle d’aide est placé dans l’attribut title="Mollis...". Et c’est dans
l’attribut data-bs-content="Cras justo..." que vous insérez le texte de la bulle d’aide.
• Le libellé du bouton est placé comme contenu du bouton.
Le fil d’Ariane

Le fil d’Ariane est un élément très commun dans les interfaces des sites web. Il permet aux visiteurs
du site de savoir quelle est la page active et quel est le chemin parcouru pour y parvenir.
Voici le code très simple utilisé :
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Accueil</a></li>
<li class="breadcrumb-item"><a href="#">Projets</a></li>
<li class="breadcrumb-item active" aria-current="page">Equipe</li>
</ol>
</nav>
C’est un élément <nav> qui est utilisé. La liste des pages parcourues est placée dans un
élément <ol>, avec la classe .breadcrumb. Chaque page est placée dans un item de la liste, <li>,
avec la classe dédiée .breadcrumb-item. La page active, celle qui est affichée dans le navigateur du
visiteur, a en plus la classe .active.
Dans le fil d’Ariane, le nom des pages visitées s’affiche avec une couleur bleue, la page active est
affichée en gris.
La pagination
1. L’objectif
Lorsque vous avez beaucoup de contenus à afficher dans une seule page, vous avez tout intérêt à
utiliser un système de pagination. Cela va permettre aux visiteurs de savoir qu’il y a encore du
contenu à afficher et ils vont pouvoir se repérer facilement dans les nombreuses pages à visiter.
Ce système de pagination est très fréquent, aussi bien dans les interfaces d’administration des CMS
par exemple, que dans les pages web des sites.
2. Un fil d’Ariane simple
Pour ce premier exemple, nous allons afficher un fil d’Ariane simple. Voici le code utilisé :
<nav aria-label="Navigation simple">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Précédent</a></li>

<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">Suivant</a></li>
</ul>
</nav>
Le système de pagination est placé dans un élément <nav>. La liste des pages est placée dans un
élément <ul> avec la classe .pagination pour sa mise en forme. Chaque page est placée dans un
item <li> de la liste, ayant la classe .page-item. Chaque lien est inséré dans un élément <a>, avec la
classe .page-link utilisée pour la mise en forme.
3. Utiliser des icônes
À la place des libellés Précédent et Suivant, vous pouvez utiliser des icônes ou des symboles.
<nav aria-label="Navigation avec icônes">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Précédent">
<span aria-hidden="true">«</span>
<span class="sr-only">Précédent</span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Suivant">
<span aria-hidden="true">»</span>
<span class="sr-only">Suivant</span>
</a>

</li>
</ul>
</nav>
La structure générale est la même que précédemment. Seuls les liens <a> des premier et dernier
item <li> changent. Pour l’accessibilité des sites web, les éléments <a> et <span> utilisent les
attributs aria.
Le premier élément <span> contient le symbole à afficher. Pour le premier <li> c’est le chevron
ouvrant, «, avec l’entité de caractère « et pour le dernier <li>, c’est », avec ». Ce
premier élément <span> contient l’attribut aria-hidden="true" pour ne pas afficher ces symboles
dans les navigateurs des personnes ayant un handicap.
Le deuxième élément <span> contient les libellés Précédent et Suivant, mais avec la classe.sr-
only, ils ne sont pas affichés dans les navigateurs sans assistance pour les personnes handicapées.
4. Des éléments de mise en forme

Si vous souhaitez rendre inactif un item de la liste des pages, comme la première ou la dernière,
utilisez la classe .disabled : <li class="page-item disabled">. Le lien est alors inactif et le libellé est
grisé.
Si vous souhaitez afficher de manière particulière la page active, celle qui est affichée, utilisez cette
syntaxe :
<li class="page-item active">
<span class="page-link">
2
<span class="sr-only">Page active</span>
</span>
</li>
Le bouton de la page active possède un arrière-plan bleu et un texte blanc.
Si vous souhaitez avoir un fil d’Ariane plus grand, utilisez la classe .pagination-lg dans
l’élément <ul> : <ul class="pagination pagination-lg">. La classe .pagination-sm permet d’avoir un
affichage plus petit.

L’accordéon
Les accordéons permettent d’afficher beaucoup de contenu dans peu de place dans la page. Le
dossier à télécharger pour ces exemples est nommé 08-Interface-10.
<div class="accordion" id="accordeon">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button"
data-bs-toggle="collapse" data-bs-target="#collapseOne"
aria-expanded="true" aria-controls="collapseOne">Lorem Ipsum</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show"
aria-labelledby="headingOne" data-bs-parent="#accordeon">
<div class="accordion-body">
Fusce dapibus, tellus ac cursus commodo...
</div>
</div>
</div>
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#collapseTwo"
aria-expanded="false" aria-controls="collapseTwo">Fusce dapibus</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse"
aria-labelledby="headingTwo" data-bs-parent="#accordeon">
Pellentesque ornare sem lacinia quam...
</div>

</div>
</div>
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false"
aria-controls="collapseThree">Pellentesque ornare</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse"
aria-labelledby="headingThree" data-bs-parent="#accordeon">
Donec id elit non mi porta gravida...
</div>
</div>
</div>
</div>
Toute la structure de l’accordéon est placée dans une boîte <div> ayant pour
classe .accordion. L’accordéon doit aussi avoir un identifiant unique, id="accordeon" dans cet
exemple.
Chaque volet de l’accordéon est placé dans une boîte <div> ayant pour classe : .accordion-item.
Chaque volet possède un titre placé dans cet exemple, dans des éléments <h2> et ils doivent aussi
posséder un identifiant unique.
Dans chaque élément <h2>, nous avons un bouton <button>. Chaque bouton utilise la
classe .accordion-button pour la mise en forme. Chaque attribut data-bs-target="#collapseOne" sera
utilisé pour refermer un volet quand l’utilisateur en ouvrira un autre, à l’aide de l’attribut data-bs-
toggle="collapse". L’attribut aria-expanded="true" permet de définir si un volet doit être ouvert ou
pas au chargement de la page.
Ensuite, le contenu de chaque volet est placé dans une boîte <div> ayant les classes .accordion-
collapse et .collapse pour la mise en forme. La classe .show permet la mise en forme des volets qui
sont ouverts. Chaque volet possède aussi un identifiant unique qui est utilisé pour ouvrir ou fermer
chaque volet. L’attribut data-bs-parent="#accordeon" permet de déterminer l’accordéon « parent »
de chaque volet.
Puis, dans la boîte <div class="accordion-body">, nous avons le contenu de chaque volet.

Voici l’affichage obtenu à l’ouverture du deuxième volet :
Les fenêtres modales
1. L’objectif
Les fenêtres modales sont très utilisées dans les interfaces d’administration pour avertir l’utilisateur
d’une action importante. Ces fenêtres apparaissent suite à une action de l’utilisateur, comme par
exemple cliquer sur un bouton de suppression. L’utilisateur ne peut qu’utiliser un élément
d’interaction dans cette fenêtre, avant de faire autre chose. Comme toujours, vous pouvez aussi
utiliser les fenêtres modales dans vos sites web.
2. Une fenêtre modale simple
Voici le code utilisé pour cette fenêtre modale simple :

<button type="button" class="btn btn-primary" data-bs-toggle="modal"
data-bs-target="#fenetre1">Etiam Nibh Dolor</button>


<div class="modal fade" id="fenetre1" tabindex="-1"
aria-labelledby="titrefenetre" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="titrefenetre">Mattis
Vulputate Bibendum</h5>
<button type="button" class="btn-close"
data-bs-dismiss="modal" aria-label="Fermer"></button>
</div>
<div class="modal-body">
Cras justo odio, dapibus ac facilisis in...
</div>
<div class="modal-footer">
data-bs-dismiss="modal">Lorem</button>
<button type="button" class="btn btn-primary">Ipsum</button>
</div>
</div>
</div>
</div>
Voici l’affichage initial du bouton seul :
Voici l’affichage de la fenêtre, après que l’utilisateur ait cliqué sur le bouton :

Voyons la structure de cet exemple.
• Dans un premier temps, nous avons le bouton qui permet d’afficher la fenêtre modale :
• <button type="button" class="btn btn-primary" data-bs-toggle="modal"
• data-bs-target="#fenetre1">
• Etiam Nibh Dolor
</button>
L’attribut le plus important est data-bs-target="#fenetre1". Il utilise l’identifiant de la fenêtre afin de
pouvoir afficher celle-ci.
• Ensuite nous avons la fenêtre qui est placée dans la boîte <div> principale :
• <div class="modal fade" id="fenetre1" tabindex="-1"
L’attribut le plus important est l’identifiant de cette fenêtre : id="fenetre1". C’est lui qui est utilisé
dans le bouton pour afficher cette fenêtre modale.
• Ensuite, nous avons deux conteneurs, deux boîtes <div> pour insérer la structure de la
fenêtre : <div class="modal-dialog"> et <div class="modal-content">.
La fenêtre se compose de trois parties : l’en-tête, le corps et le pied de page.
L’en-tête de la fenêtre est affiché dans la boîte <div class="modal-header">. Le titre de la fenêtre
est placé dans l’élément <h5 class="modal-title" id="titrefenetre">Mattis Vulputate
Bibendum</h5>. La classique case de fermeture en haut à droite de la barre de titre, est placée dans
un élément de type bouton :
<button type="button" class="bouton-close" data-bs-dismiss="modal"
aria-label="Fermer"></button>
Le corps de la fenêtre est placé dans la boîte <div class="modal-body">Cras justo odio...</div>.
Vous pouvez parfaitement y placer les éléments HTML que vous souhaitez et faire une mise en
forme.

Le pied de page de la fenêtre contient deux boutons, un pour annuler l’action et un autre pour la
confirmer. Le pied de page est placé dans la boîte <div class="modal-footer">. Les deux boutons
sont des éléments de type <button>.
3. Les options des fenêtres modales
Vous pouvez centrer verticalement la fenêtre modale dans la fenêtre du navigateur, avec la classe
supplémentaire .modal-dialog-centered, à placer dans la boîte <div class="modal-dialog modal-
dialog-centered">.
Si vous souhaitez avoir une fenêtre modale très large, ajoutez la classe .modal-lg dans la boîte <div
class="modal-dialog modal-lg">.
Par contre, si vous souhaitez avoir une fenêtre modale de petite largeur, utilisez la classe .modal-
sm dans la boîte <div class="modal-dialog modal-lg">.

Si vous souhaitez utiliser la barre de défilement dans une fenêtre modale, ajoutez la classe .modal-
dialog-scrollable, dans la boîte : <div class="modal-dialog" ...> :
<div class="modal fade" id="fenetre4" tabindex="-1"
<div class="modal-dialog modal-dialog-scrollable modal-sm">
<div class="modal-content">
...
</div>
</div>
</div>

Les roues de chargement
Vous pouvez télécharger le dossier de ces exemples, nommé 08-Interface-12.

1. L’objectif
Bootstrap nous propose d’utiliser des "roues de chargement", des spinners en anglais. C’est une
roue animée qui indique aux utilisateurs qu’il y a une attente en cours. Cela peut être la classique
attente d’un chargement, ou toute autre fonctionnalité qui prend un peu de temps.
2. La roue simple
Dans ce premier exemple simple, nous allons insérer une roue de chargement constituée d’un trois
quart de cercle qui tourne sur lui-même.

<div class="spinner-border" role="status">
<span class="sr-only">Chargement en cours...</span>
</div>
Nous avons une simple boîte <div> qui utilise la classe .spinner-border. Dans cette boîte, se trouve
un élément <span class="visually-hidden"> nécessaire pour les personnes en situation de handicap.
Voici l’affichage obtenu qui est animé dans le navigateur :
Vous pouvez ajouter des classes pour colorer cette roue :

<div class="spinner-border" role="status">
<span class="visually-hidden">Chargement en cours...</span>
</div>
<div class="spinner-border text-primary" role="status">
</div>
<div class="spinner-border text-secondary" role="status">
</div>
<div class="spinner-border text-success" role="status">
</div>
<div class="spinner-border text-danger" role="status">
</div>
<div class="spinner-border text-warning" role="status">
</div>
<div class="spinner-border text-info" role="status">
</div>

<div class="spinner-border text-light" role="status">
</div>
<div class="spinner-border text-dark" role="status">
</div>
Nous retrouvons toutes les classes permettant de colorer les composants que nous avons déjà vus de
nombreuses fois.
3. La roue grossissante
Nous pouvons aussi utiliser le growing spinner qui est une roue pleine qui grossit et rétrécit en
boucle.
<div class="spinner-grow" role="status">
</div>
Seule la classe de la boîte <div> change : .spinner-grow.
Voici l’affichage obtenu au début de l’animation :
Voici l’affichage obtenu à la fin de l’animation :
Avec les mêmes classes que précédemment, vous pouvez colorer ces roues grossissantes.
4. La taille des roues
Avec l’ajout de la classe .spinner-border-sm, vous allez obtenir une roue de petite taille :
<div class="spinner-border spinner-border-sm" role="status">
</div>

<div class="spinner-grow spinner-grow-sm" role="status">
</div>
Mais vous pouvez indiquer la taille personnalisée que vous souhaitez en stylisant directement les
roues dans la boîte <div>.
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
</div>
Voici les affichages obtenus :
5. Utiliser des boutons

Bootstrap permet d’insérer ces roues de chargement dans des boutons, ce qui est très pratique. Voici
le code utilisé :
<div class="row">
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status"
aria-hidden="true"></span>
</button>

span class="spinner-border spinner-border-sm" role="status"
aria-hidden="true"></span>
Chargement en cours...

</button>
</div>
<div class="row">
<span class="spinner-grow" role="status" aria-hidden="true"></span>
</button>

<span class="spinner-grow" role="status" aria-hidden="true"></span>
Chargement en cours...
</button>
</div>
Nous retrouvons les classes précédemment utilisées, cette fois appliquées aux boutons <button>.
Voici l’affichage obtenu qui est animé, bien sûr :
Les notifications

1. L’objectif
Dans les interfaces utilisateurs, il est très courant d’avoir des notifications qui s’affichent suite à
une action. Bootstrap nous propose d’afficher des notifications avec des composants
nommés Toasts.
Il est important de bien comprendre que ce composant est géré en grande partie par vos soins.
Premier point, par défaut, les notifications Toasts ne s’affichent pas ! En effet, les notifications sont
prévues pour apparaître uniquement lorsque cela est nécessaire. Donc c’est à vous de décider quand
doit s’afficher une notification Toast. Pour cela, vous pouvez utiliser les méthodes
JavaScript associées aux notifications. Voici l’URL de la documentation sur ces méthodes
JavaScript : https://getbootstrap.com/docs/4.3/components/toasts/#javascript-behavior. Dans les
exemples ci-dessous, nous ajouterons la classe .show à la notification, afin qu’elle s’affiche

immédiatement. Deuxième point important, c’est à vous d’afficher les notifications Toasts au bon
endroit dans l’interface utilisateur.
2. Une notification simple
Nous allons afficher une notification simple avec ce code :
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="carre.png" class="rounded mr-2" alt="Alerte">
<strong class="mr-auto">Administration</strong>
<small>10 minutes</small>
<button type="button" class="btn-close" data-bs-dismiss="toast"
</div>
<div class="toast-body">
Attention, vous avez deux nouveaux messages.
</div>
</div>
Ce composant est constitué de plusieurs parties :
• Le conteneur général est la boîte <div class="toast show">. Elle utilise la
classe .toast indispensable à son bon affichage et la classe supplémentaire .show qui permet
d’avoir un affichage immédiat dans la fenêtre du navigateur.
• La boîte <div class="toast-header"> permet l’affichage d’une barre de titre pour la
notification. Cette barre peut contenir une image avec l’élément <img>, un titre dans
l’élément <strong>, un texte dans l’élément <small> et un bouton de fermeture avec
l’élément <button>. Bien sûr, libre à vous de personnaliser cet affichage avec les éléments
que vous souhaitez y voir apparaître.
• La deuxième boîte, <div class="toast-body">, contient le texte de la notification.
Notez que, par défaut, les notifications sont légèrement transparentes. En effet, elles utilisent la
propriété backdrop-filter qui fait partie du module CSS Filter Effects Module Level
2 (https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty). Ce module est encore à l’état de
brouillon au W3C, donc cette propriété ne sera pas forcément reconnue par tous les navigateurs.
3. Une notification personnalisée
Voici un exemple d’une notification avec un contenu personnalisé :
<div class="toast show" role="alert" aria-live="assertive"
aria-atomic="true">
<div class="toast-header">
<strong class="mr-auto text-primary">Administration</strong>
<small>10 minutes</small>
<button type="button" class="btn-close" data-bs-dismiss="toast"
</div>
<div class="toast-body">
<span class="text-warning">Attention</span>, vous avez
<strong>deux</strong> nouveaux messages dans votre boîte aux lettres.
<br>
<img src="lettre.png">
</div>
</div>
Synchroniser le défilement
1. Les objectifs
Dans les pages ayant beaucoup de contenu, les visiteurs apprécient de savoir où ils en sont dans un
sommaire qui est affiché, en fonction du défilement de la page. Ce sommaire peut être une barre de
navigation ou une liste de liens.
Lorsque le visiteur utilisera la barre de défilement, les éléments du menu ou de la liste changeront
d’aspect quand le visiteur arrivera à leurs niveaux.

2. Utiliser une barre de navigation
Voici la structure que nous allons mettre en place. Notez qu’elle est placée dans une simple
boîte <div class="col">.
Dans la partie supérieure nous avons une barre de navigation, avec des éléments de menu placés
dans la barre et dans un menu déroulant :
<div class="col">
<nav id="navbar-example1" class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Mes voyages</a>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link" href="#projets">Projets</a>
</li>
<a class="nav-link" href="#equipe">Equipe</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown"
href="#" role="button" aria-expanded="false">Destinations</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#venise">Venise</a></li>
<li><a class="dropdown-item" href="#londres">Londres</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#madrid">Madrid</a></li>
</ul>
</li>
</ul>
</nav>
</div>
Le point important à bien noter, c’est que tous les éléments de menu utilisent l’élément HTML <a>.
C’est obligatoire pour que l’"écoute" de la barre de défilement puisse se faire. Deuxième point
important, vous voyez que les références des liens ciblent des ancres identifiées.
Voici l’affichage obtenu, avec le menu déroulant déroulé :

Le deuxième élément de structure est la boîte <div> qui contient le texte qui est affiché, avec des
titres qui sont en relation directe avec les liens de la barre de navigation. Voici le code utilisé :
<div data-bs-spy="scroll" data-bs-target="#navbar-example1" class=
"scrollspy" data-bs-offset="0" class="scrollspy-example" tabindex="0">
<h4 id="projets">Projets</h4>
<p>Nullam id dolor id nibh ultricies vehicula...</p>
<h4 id="equipe">Equipe</h4>
<p>Nullam id dolor id nibh ultricies...</p>
<h4 id="venise">Venise</h4>
<p>Morbi leo risus, porta ac consectetur ac...</p>
<h4 id="londres">Londres</h4>
<p>Curabitur blandit tempus porttitor...</p>
<h4 id="madrid">Madrid</h4>
</div>
Détaillons la structure de la boîte <div> :
• Elle utilise l’attribut data-bs-spy="scroll" qui permet l’écoute de l’utilisation de la barre de
défilement.
• Nous avons l’attribut data-bs-target="#navbar-example1" qui cible l’identifiant #navbar-
example1. Cet identifiant définit la barre de navigation : <nav id="navbar-example1" ...>.
• La boîte utilise la classe .scrollspy. Cette classe est strictement obligatoire. C’est elle qui
permet de cibler l’élément où se trouve le contenu qui utilisera la barre de défilement. Cela
peut être l’élément <body> ou tout autre élément.
• Voici les propriétés CSS de cette classe qui est placée dans l’élément <head> de la page :
.scrollspy {
position: relative;
height: 600px;
margin-top: .5rem;

overflow: auto;
}
La propriété position: relative est strictement obligatoire. Les autres propriétés dépendent de la mise
en forme que vous souhaitée.
Dans cette boîte <div>, nous avons tout le contenu qui sera affiché et visible avec la barre de
défilement. Notez que chaque titre <h4> utilise un identifiant qui est exploité dans les références
des liens de la barre de navigation.
Voici un extrait de l’affichage obtenu, avec la barre de défilement :
Maintenant toute la structure est bien en place. Utilisons-la. Il faut que l’utilisateur place son
pointeur au-dessus de la zone "écoutée", c’est-à-dire au-dessus du contenu textuel dans cet
exemple. Au fur et à mesure qu’il utilise la barre de défilement, le composant va repérer les
identifiants des titres <h4> et va mettre en évidence le lien associé dans la barre de navigation.
Voici l’affichage obtenu lorsque l’utilisateur a fait défiler le contenu jusqu’à faire apparaître le
titre Equipe :
3. Utiliser une liste groupée de liens

Dans ce nouvel exemple, nous allons utiliser une liste de liens. Dans cette structure, la navigation
est placée dans une première colonne à gauche, dans une boîte <div class="col-4"> et le texte dans

une deuxième colonne à droite, dans une boîte <div class="col-8">. Ces deux boîtes sont placées
dans une ligne : <div class="row">.
Nous allons mettre en place le même principe d’écoute de l’utilisation de la barre de défilement.
Nous allons utiliser un groupe de liens affichés sous forme d’une liste verticale de liens <a>. Voici
sa structure :
<div class="col-4">
<nav id="navbar-example2" class="navbar navbar-light bg-light
flex-column align-items-stretch p-3">
<a class="navbar-brand" href="#">Mes voyages</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#projets2">Projets</a>
<a class="nav-link" href="#equipe2">Equipe</a>
<a class="nav-link" href="#destinations2">Destinations</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#venise2">Venise</a>
<a class="nav-link ms-3 my-1" href="#londres2">Londres</a>
<a class="nav-link ms-3 my-1" href="#madrid2">Madrid</a>
</nav>
</nav>
</nav>
</div>
Notez les identifiants utilisés :
• id="navbar-example2" pour la barre de navigation.
• Chaque lien <a> cible un
identifiant : href="#projets2", href="#equipe2", href="#destinations2"...
Pour le texte à "écouter", nous avons cette structure :
<div class="col-8">
<div data-bs-spy="scroll" data-bs-target="#navbar-example2"
data-bs-offset="0" tabindex="0">
<h4 id="projets2">Projets</h4>
<p>Fusce dapibus, tellus ac cursus commodo...</p>

<h4 id="equipe2">Equipe</h4>
<p>Integer posuere erat a ante venenatis...</p>
<h4 id="destinations2">Destinations</h4>
<p>Nulla vitae elit libero, a pharetra augue...</p>
<h4 id="venise2">Venise</h4>
<p>Aenean eu leo quam. Pellentesque...</p>
<p>Curabitur blandit tempus porttitor....</p>
<h4 id="londres2">Londres</h4>
<p>Integer posuere erat a ante venenatis...</p>
<h4 id="madrid2">Madrid</h4>
<p>Integer posuere erat a ante venenatis dapibus...</p>
</div>
</div>
La boîte <div> utilise les mêmes classes que dans l’exemple précédent. Chaque
titre <h4> possède un identifiant unique qui est utilisé dans chaque cible des liens de la barre de
navigation.
Voici un extrait de l’affichage initial obtenu :

Lorsque l’utilisateur fait défiler le contenu rédactionnel dans la colonne de droite, la barre de
navigation de la colonne de gauche active de manière synchronisée le lien correspondant.
Dans cet exemple, nous sommes bien au niveau de Londres qui est un sous-menu
de Destinations. Les deux liens sont donc bien activés dans la barre de navigation.
9. Les boutons
Les boutons sont des éléments d’interface quasi indispensables dans les sites web, mais aussi dans
les interfaces d’administration des applications web. Bootstrap propose une gamme de boutons très
importante ce qui permet des usages multiples. Vous allez insérer des boutons avec la classe .btn.
Notez bien que cette classe peut s’appliquer aux éléments <a>, <input> et <button>, ce qui nous
offre de nombreuses possibilités d’intégration.

Les boutons classiques
Le dossier à télécharger pour ces exemples est nommé 09-Boutons-01.

1. Les boutons simples
Pour ce premier exemple, nous allons insérer trois boutons avec les trois éléments utilisables avec
la classe .btn : <a>, <input> et <button>.
<a class="btn btn-primary" href="#" role="button">Elément <a></a>
<button class="btn btn-primary" type="submit">Elément <button></button>
<input class="btn btn-primary" type="button" value="Elément input">
Les trois éléments utilisent la classe .btn pour avoir la fonctionnalité de bouton et la classe .btn-
primary pour obtenir l’aspect standard des boutons Bootstrap.
2. Les boutons colorés
Vous pouvez ajouter les classes .btn-couleur pour colorer les boutons. Le suffixe couleur indique la
couleur à appliquer. Les valeurs de couleur sont celles que nous avons vues de nombreuse fois
précédemment.
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
Notez que la classe .btn-link utilise un fond transparent.
3. Les boutons en contour

La classe .btn-outline-couleur permet de ne pas avoir de fond, mais uniquement un contour coloré.
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
4. La taille des boutons

Les classes .btn-lg et btn-sm permettent de définir des boutons larges (lg pour large) et
petits (sm pour small).
<button type="button" class="btn btn-primary">Standard</button>
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-sm">Petit</button>
5. Les états des boutons

La classe .active indique explicitement que le bouton est actif et son arrière-plan est légèrement
plus foncé. L’attribut disabled indique classiquement que le bouton est inactif.
<button type="button" class="btn btn-primary">Standard</button>
<button type="button" class="btn btn-primary active">Bouton actif</button>
<button type="button" class="btn btn-primary" disabled>Bouton inactif</button>

Les blocs de boutons
Vous pouvez insérer des boutons en bloc qui soient responsives et affichés en pleine largeur. Pour
cela, nous allons utiliser des classes « utilitaires » dédiées à la mise en forme.
1. Des boutons en pleine largeur
Voyons ce premier exemple :
<div class="col">
<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">Bouton 1</button>
</div>
</div>
Voici l’affichage obtenu sur une largeur d’écran plus petite :
Les boutons s’adaptent bien à la largeur disponible dans la colonne qui dépend de la largeur de
l’écran de diffusion.

Dans la colonne, la boîte <div> contenant les boutons utilise deux classes. La classe .d-grid permet
d’utiliser une grille flexible d’affichage et la classe .gap-2 permet de définir un espace vertical entre
les éléments enfants.
Avec ces deux classes, les boutons sont placés dans une grille responsive et sont espacés
verticalement les uns des autres.
2. Des boutons de largeur imposée
Dans ce deuxième exemple, nous imposons un point de rupture à la largeur moyenne des écrans
(md, pour medium, pour les écrans plus grand ou égal à 768 pixels), avec la classe .d-md-block.
<div class="col">
<div class="d-grid gap-2 d-md-block">
</div>
</div>
Avec une taille d’écran large, les boutons ont une largeur réduite imposée :
Avec une taille d’écran inférieure au point de rupture, les boutons sont en pleine largeur dans la
colonne :
3. Des boutons centrés

Enfin, avec la classe .mx-auto vous pouvez centrer automatiquement les boutons dans la largeur de
la colonne où ils sont placés. Dans cet exemple, la boîte <div> est alignée sur 6 colonnes (.col-6).
<div class="col">
<div class="d-grid gap-2 col-6 mx-auto">
</div>
</div>

Les groupes de boutons
Vous pouvez regrouper des boutons ayant des fonctionnalités associées. Chaque bouton aura sa
propre action.
Le dossier à télécharger pour cet exemple est nommé 09-Boutons-03.
Voici le code utilisé pour cet exemple :
<div class="btn-toolbar" role="toolbar"
aria-label="Groupe de boutons">
<div class="btn-group me-2" role="group" aria-label="Premier groupe">
<button type="button" class="btn btn-secondary"> Crassus</button>
<button type="button" class="btn btn-secondary"> Justo</button>
<button type="button" class="btn btn-secondary">Odio</button>
<button type="button" class="btn btn-secondary"> Dapibus</button>
</div>
<div class="btn-group me-2" role="group" aria-label="Second groupe">
<button type="button" class="btn btn-secondary"> Facilisis</button>
<button type="button" class="btn btn-secondary"> Egestas</button>
<button type="button" class="btn btn-secondary"> Risus</button>
</div>
<div class="btn-group" role="group" aria-label="Troisième groupe">
<button type="button" class="btn btn-secondary"> Pellent</button>
</div>
</div>
Voici l’affichage initial obtenu :
Après avoir cliqué sur un des boutons (Dapibus dans cet exemple), celui-ci s’affiche avec un fond
plus foncé et un contour :
Le conteneur général du groupe de boutons est la boîte <div class="btn-toolbar" role="toolbar"
aria-label="Groupe de boutons">. Elle possède la classe dédiée .btn-toolbar. Cette barre de bouton
possède trois groupes de boutons qui sont chacun placé dans une boîte <div class="btn-group me-
2" role="group" aria-label= "Premier groupe">. Chaque boîte utilise la classe dédiée .btn-
group. Dans chaque groupe nous avons autant d’éléments <button type="button" class="btn btn-
secondary"> qu’il est nécessaire.
Les boutons déroulants
1. L’objectif
Les boutons déroulants permettent d’afficher un menu déroulant suite à un clic sur un bouton. Le
bouton va utiliser les classes .btn et .dropdown-toggle et peuvent s’appliquer soit à un élément <a>,
soit à un élément <button>.
2. Un bouton déroulant simple
Voici le code utilisé pour ce premier exemple :
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button"
id="boutonderoulant" data-bs-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Lorem Ipsum
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Sem Vulputate</a>
<a class="dropdown-item" href="#">Ullamcorper Egestas</a>
<a class="dropdown-item" href="#">Dapibus Tellus </a>
</div>
</div>
Voici l’aperçu initial :
Voici le bouton déroulé, suite à un clic :

Étudions la structure de ce bouton déroulant.
Le conteneur général est une boîte ’<div> ayant la classe
dédiée .dropdown : <div class="dropdown">.
Le bouton déclencheur est un élément <button>, avec les classes de mise en
forme .btn et .dropdown-toggle. Il possède un identifiant id="boutonderoulant" qui sera utilisé par
le menu. L’attribut data-toggle="dropdown" en fait un menu déroulant. Le contenu de cet
élément <button> est le libellé affiché du bouton. Nous avons aussi les attributs d’accessibilité aria.
<button class="btn btn-primary dropdown-toggle" type="button"
id="boutonderoulant" data-bs-toggle="dropdown" aria-haspopup="true"
Lorem Ipsum
</button>
Le menu est placé dans une autre boîte <div>, avec les classes dédiées dropdown-menu et un
attribut d’accessibilité aria qui reprend la valeur de l’identifiant du bouton déclencheur :
<div class="dropdown-menu" aria-labelledby="boutonderoulant">
Les items du menu déroulant sont des éléments <a> ayant la classe dédiée .dropdown-item.
3. Des boutons colorés
Vous pouvez appliquer une couleur d’arrière-plan au bouton déclencheur avec les classes .btn-
couleur. Le suffixe couleur utilise comme toujours les couleurs vues précédemment.
Un exemple, avec un bouton à fond coloré rouge, avec la classe .btn-danger :
<button type="button" class="btn btn-danger dropdown-toggle"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Lorem
</button>
4. Des boutons divisés
Pour une meilleure ergonomie, vous pouvez diviser le bouton déclencheur en deux parties. La
première partie contient le libellé et la deuxième contient un symbole pour dérouler le menu.

<div class="btn-group">
<button type="button" class="btn btn-info">Lorem Ipsum</button>
<button type="button" class="btn btn-info dropdown-toggle
dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true"
<span class="visually-hidden">Lorem Ipsum</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Porta Sit</a>
<a class="dropdown-item" href="#">Fusce Vestibulum</a>
<a class="dropdown-item" href="#">Ornare Euismod</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Fusce Egestas</a>
<a class="dropdown-item" href="#">Ipsum Fringilla</a>
</div>
</div>
Voici l’affichage à l’état initial, avec le pointeur au-dessus de la partie droite du bouton, qui
déclenche l’ouverture du menu et qui apparaît avec un fond plus foncé :
Voici l’affichage du menu déroulé où vous pouvez voir que ce menu est divisé en deux parties :
Étudions la structure.

• Le conteneur général est une boîte <div> avec la classe spéciale .btn-group que nous avons
déjà rencontrée précédemment.
• Le bouton déclencheur est donc divisé en deux parties. La première partie affichant le
libellé, est un élément <button> comme précédemment. La deuxième partie qui affiche le
symbole du triangle, est aussi un élément <button> qui reprend les mêmes classes de mise
en forme. Nous avons en plus deux classes qui permettent d’afficher le symbole du
triangle, .dropdown-toggle et .dropdown-toggle-split. Nous retrouvons les attributs data-bs-
toggle et aria, vus précédemment.
• Dans ce deuxième élément <button>, nous avons un élément <span> pour assurer
l’accessibilité des sites web pour les personnes handicapées.
• Dans le menu en lui-même, nous retrouvons ce que nous avons vu précédemment. Le
diviseur est une boîte <div> avec la classe spécifique .dropdown-divider.
5. Les dimensions des boutons déroulants
La classe .btn-lg permet d’avoir un bouton et un menu plus large, plus haut. Cette classe est à placer
dans le bouton déclencheur :
<button class="btn btn-primary btn-lg dropdown-toggle"
type="button" id="boutonlarge" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Même principe pour avoir un petit bouton déroulant avec la classe .btn-sm :
<button class="btn btn-primary btn-sm dropdown-toggle"
type="button" id="petitbouton" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Voici les trois tailles de bouton : standard, large et petite :
6. L’orientation du symbole
Par défaut, le symbole du bouton déroulant est un triangle qui pointe vers le bas. La
classe .dropup placée dans le conteneur général permet de faire pointer le triangle vers le haut.
<div class="dropdown dropup">
La classe .dropright permet de faire pointer le triangle vers la droite et .dropleft vers la gauche.
7. L’état des items

La classe .active permet d’afficher un item de menu comme étant actif, avec un fond coloré. La
classe .disabled permet, au contraire, d’afficher un item inactif, avec une couleur de texte grise.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="etat"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Lorem Ipsum
</button>
<div class="dropdown-menu" aria-labelledby="etat">
<a class="dropdown-item" href="#">Sem Vulputate</a>
<a class="dropdown-item active" href="#">Ullamcorper Egestas</a>
<a class="dropdown-item" href="#">Dapibus Tellus</a>
<a class="dropdown-item disabled" href="#">Egestas Ultricies</a>
<a class="dropdown-item" href="#">Ligula Ornare</a>
</div>
</div>
10. La navigation
Bootstrap vous propose d’insérer des barres de navigation dans vos pages web. Ces barres de
navigation vont utiliser la classe .nav, avec pour chaque item, soit une liste <ul>, soit des
éléments <a>. Notez bien que la classe .nav utilise le module CSS3 Flexbox, donc elle peut
bénéficier de tous les avantages de cette mise en forme et de cette mise en page.
Le dossier à télécharger pour ces exemples est nommé 10-Navigation-01.

Une barre de navigation simple
1. Une navigation avec une liste

Pour ce premier exemple, nous allons créer une barre de navigation qui utilisera une liste <ul> pour
insérer les items de cette navigation.
<ul class="nav">
<a class="nav-link active" href="#">Lorem</a>
</li>
<a class="nav-link" href="#">Ipsum</a>
</li>
<a class="nav-link" href="#">Adipiscing</a>
</li>
<a class="nav-link disabled" href="#">Amet</a>
</li>
</ul>
Étudions la structure de cet exemple.

La barre de navigation est insérée dans un élément <ul>, avec la classe .nav. Chaque item est dans
un élément <li> ayant la classe .nav-item. Enfin, le lien est placé comme contenu d’élément <a>,
avec la classe .nav-link. Notez que nous pouvons préciser des liens actifs, avec la classe .active et
inactifs avec .disabled.
2. Une navigation des liens
L’autre possibilité pour créer une barre de navigation est de n’utiliser que des liens <a> dans un
élément <nav>. Cette syntaxe est plus concise et plus sémantique.
<nav class="nav">

</nav>
Le rendu est strictement identique à l’exemple précédent.
La structure est très simple. Nous avons un élément <nav> avec la classe .nav et chaque lien est
dans un élément <a> avec la classe .nav-link.
Les alignements
Par défaut la barre de navigation est alignée sur la gauche de son conteneur. Comme la
classe .nav utilise Flexbox, nous pouvons modifier l’alignement.
La classe supplémentaire .justify-content-center appliquée à l’élément <nav> permet de centrer la
barre de navigation : <nav class="nav justify-content-center">.
Voici l’affichage obtenu, avec une colonne ayant une bordure pour mieux visualiser l’alignement :
La classe supplémentaire .justify-content-end appliquée à l’élément <nav> permet d’aligner à droite

la barre de navigation : <nav class="nav justify-content-end">.
La classe supplémentaire .flex-column appliquée à l’élément <nav> permet d’aligner verticalement

la barre de navigation : <nav class="nav flex-column">.
Les options de mise en forme
1. Utiliser des onglets

Bootstrap nous propose plusieurs classes supplémentaires pour mettre en forme les barres de
navigation. La classe .nav-tabs permet d’afficher les liens sous forme d’onglets. Le rendu est
meilleur avec une structure utilisant une liste <ul> :
<ul class="nav nav-tabs">
</li>
</li>
</li>
<a class="nav-link" href="#">Amet</a>
</li>
</ul>
2. Utiliser des boutons

La classe .nav-pills permet d’afficher les liens sous forme de boutons. Vous pouvez utiliser une
structure avec une liste <ul> (<ul class="nav nav-pills">), ou une structure avec des éléments <a>.
Voici le code avec les éléments <nav> et <a> :
<nav class="nav nav-pills">
<a class="nav-item nav-link active" href="#">Lorem</a>
<a class="nav-item nav-link" href="#">Ipsum</a>
<a class="nav-item nav-link" href="#">Adipiscing</a>
<a class="nav-item nav-link" href="#">Amet</a>
</nav>
Notez bien qu’avec cette structure, les éléments <a> utilisent les deux classes .nav-item et .nav-link.

3. Une barre de navigation justifiée
Par défaut, la barre de navigation s’aligne à gauche de son conteneur. Avec la classe .nav-justified,
vous pouvez justifier la barre et occuper toute la place disponible dans le conteneur. Cette classe
s’applique à l’élément <nav> : <nav class="nav nav-pills nav-justified">.
Voici l’affichage obtenu, avec une colonne ayant une bordure et un remplissage interne pour mieux
visualiser l’alignement :
Une barre de navigation flexible
Comme la classe .nav est basée sur Flexbox, nous pouvons créer des barres de navigation qui
s’adaptent selon la taille de l’écran.
<nav class="nav nav-pills flex-column flex-sm-row">
<a class="nav-link" href="#">Amet</a>
</nav>
L’élément <nav> utilise la classe .flex-column pour indiquer que par défaut, les éléments enfants
doivent s’afficher en colonne, les uns sous les autres. Puis nous avons la classe .flex-sm-row qui
indique que les éléments doivent s’afficher en ligne pour les petits écrans et plus. C’est donc cette
règle qui s’applique sur les écrans de petite taille et les plus grands. Pour les écrans très petits, de
taille inférieure à 576 pixels, c’est l’affichage vertical qui est utilisé.
Voici l’affichage sur un petit écran et supérieur :
Voici l’affichage obtenu sur un très petit écran :

Une barre de navigation avec bouton déroulant
Dans le chapitre précédent, nous avons vu les boutons déroulants, et bien vous pouvez parfaitement
les intégrer dans une barre de navigation.
<ul class="nav nav-pills">
</li>
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown"
href="#" role="button" aria-haspopup="true" aria-expanded="false">Ipsum</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Ligula</a>
<a class="dropdown-item" href="#">Vulputate</a>
<a class="dropdown-item" href="#">Ullamcorper</a>
</div>
</li>
</li>
</li>
</ul>

Nous retrouvons une structure déjà connue, avec les items placés dans une liste <ul>. C’est le
deuxième lien, Ipsum dans cet exemple, qui est un bouton déroulant. Ce bouton déroulant
reprend la même structure que celle vue dans le chapitre précédent.
Voici l’affichage obtenu avec le bouton déroulé :
11. Les menus de navigation
Les menus de navigation de Bootstrap vous permettent d’insérer dans les en-têtes de vos sites web
des menus très élaborés pour que les visiteurs puissent naviguer et atteindre rapidement telle ou
telle page du site. De très nombreuses fonctionnalités pourront être utilisées dans les menus e
navigation afin que l’expérience utilisateur soit la meilleure.
Insérer un menu de navigation complet

Le dossier à télécharger pour ces exemples est nommé 11-Menu-Nav-01.
1. La structure générale
Dans l’exemple qui suit, nous allons insérer un menu de navigation très complet, avec un titre qui
pourra être celui de votre site ou de votre entreprise, des éléments de menus classiques et
hiérarchiques et un champ de recherche.
<nav class="navbar navbar-expand-lg navbar-light bg-light">

<a class="navbar-brand" href="#">
<img src="terre.png" width="30" height="30" alt="">

</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#menuprincipal" aria-controls="menuprincipal"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="menuprincipal">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<a class="nav-link active" aria-current="page" href="#">Lorem</a>
</li>
</li>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
role="button" data-bs-toggle="dropdown" aria-expanded="false">Egastas</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Molis</a></li>
<li><a class="dropdown-item" href="#">Etiam</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Bidendum</a></li>
</ul>
</li>
<a class="nav-link disabled">Elit</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Rechercher"
aria-label="Rechercher">

<button class="btn btn-outline-success" type="submit">Rechercher</button>
</form>
</div>
</div>
</nav>
Voici l’affichage obtenu avec le menu hiérarchique déroulé :
2. Le conteneur général
Toute la structure du menu de navigation est insérée dans un élément <nav>. Cet élément
possède plusieurs classes :
• .navbar permet de mettre en forme le menu de navigation.
• .navbar-expand-lg est la classe qui permet de rendre le menu responsive. Pour des écrans
larges (avec le suffixe lg), le menu est étendu. Pour des tailles d’écran inférieures, le menu
est réduit à un bouton dit "hamburger".
Voici le menu de navigation réduit :
• .navbar-light permet d’avoir une mise en forme avec un jeu de couleurs claires. La
classe .navbar-dark permet d’avoir un jeu de couleurs foncées.
• .bg-light permet d’avoir des arrière-plans clairs.
3. La dénomination du site
Le premier élément affiché est la marque de votre entreprise ou le nom de votre site :
<a class="navbar-brand" href="#">Mon site</a>
Si vous désirez plutôt avoir un logo, utilisez cette syntaxe, avec une image à la place du texte :
<a class="navbar-brand" href="#">
<img src="terre.png" width="30" height="30" alt="">

</a>
4. Le menu hamburger
Sur les petits écrans, le menu se réduit à un bouton. Ce bouton est nommé "hamburger" par les
designers, du fait de son aspect usuel avec ces trois traits horizontaux qui font penser aux couches
d’un hamburger !
Ce bouton est inséré avec un élément <button> ayant toutes les classes CSS nécessaires pour son
affichage et tous les attributs aria pour l’accessibilité des sites web.
data-bs-target="#menuprincipal" aria-controls="menuprincipal"
</button>
5. Le menu de navigation
Le menu de navigation est inséré dans une boîte <div>. Cette boîte possède un
identifiant, id="menuprincipal", qui est repris dans le bouton hamburger : data-bs-
target="#menuprincipal" aria-controls="menuprincipal".
Pour sa mise en forme ce menu utilise deux classes Bootstrap.
<div class="collapse navbar-collapse" id="menuprincipal">
6. Les items du menu
Nous retrouvons ici la même structure vue précédemment pour les barres de navigation. Tous les
items du menu de navigation sont placés dans une liste <ul> ayant des classes pour sa mise en
forme : <ul class="navbar-nav me-auto mb-2 mb-lg-0">. Chaque item est placé dans un item de
liste <li>, avec à nouveau des classes utilisées pour la mise en forme des items.
7. Le champ de recherche
Le champ de recherche n’est pas inséré dans la liste <ul>, mais dans un
élément <form> classique, avec des classes spécifiques pour sa mise en forme.
Les options des menus de navigation
1. Insérer un texte
Vous pouvez parfaitement insérer du texte dans un menu de navigation. Il vous suffit d’insérer là où
vous le souhaitez un élément <span> avec la classe .navbar-text.

Dans cet exemple, le texte est affiché juste après le nom du site ou de l’entreprise :
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Mon site</a>
<span class="navbar-text">Menu de navigation</span>
data-bs-target="#menudeux" aria-controls="menudeux" aria-expanded="false"
aria-label="Toggle navigation">
</button>
<div class="collapse navbar-collapse" id="menudeux">
<ul class="navbar-nav mr-auto">
<a class="nav-link" href="#">Lorem <span class=
"visually-hidden">Lorem</span></a>
</li>
</li>
<a class="nav-link" href="#">Elit</a>
</li>
</ul>
</div>
</div>
</nav>
voici l’affichage obtenu :
2. Les jeux de couleurs

Bootstrap propose plusieurs jeux de couleurs pour les menus de navigation. Ces classes sont à
placer dans le conteneur général, dans l’élément <nav> :
• navbar-light bg-light : jeu de couleurs claires. Couleur de l’arrière-plan : background-
color: #f8f9fa.
• navbar-dark bg-dark : jeu de couleurs sombres. Couleur de l’arrière-plan : background-
color: #343a40.
• navbar-dark bg-primary : jeu de couleur bleu. Couleur de l’arrière-plan : background-
color: #007bff.
Vous pouvez aussi personnaliser la couleur de l’arrière-plan avec un style en ligne :
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
3. Le positionnement du menu de navigation
Lorsque vous avez des pages avec beaucoup de contenu, il peut être intéressant pour les visiteurs de
bloquer le menu de navigation en haut de la fenêtre du navigateur par exemple.
Pour ce faire, utilisez les classes dédiées, fixed-top et fixed-bottom, dans le conteneur général, dans
l’élément <nav> :
• <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light"> pour fixer le menu
de navigation en haut.
• <nav class="navbar fixed-bottom navbar-expand-lg navbar-light bg-light"> pour fixer le
menu de navigation en bas.
Le dossier à télécharger pour cet exemple est nommé 11-Menu-Nav-02.
12. Les utilitaires
Bootstrap vous propose une série de règles CSS qui permettent de mettre en forme des éléments
d’interface, comme des bordures, des jeux de couleurs, des flottements de boîtes, d’alignement
vertical...2
Les bordures
Bootstrap propose plusieurs classes pour ajouter des bordures simples ou colorées aux éléments
HTML voulus.
Les exemples de ce titre sont à télécharger dans le dossier nommé 12-Utilitaires-01.
1. Ajouter une bordure
La classe .border permet d’ajouter une bordure à tous les côtés d’un élément.
Voici le code de cet exemple très simple :
<div class="border" style="width: 300px;">
Integer posuere...
</div>
Voici les propriétés utilisées par cette classe :

.border {
border: 1px solid #dee2e6!important;
}
2. Gérer les bordures sur les côtés
Bootstrap vous permet aussi de supprimer une bordure d’un des côtés de l’élément qui en contient.
Pour cela, il suffit d’ajouter la classe .border-cote-0, où le libellé cote indique quel côté ne doit pas
avoir de bordure :
• .border-top-0 : pas de bordure côté haut.
• .border-left-0 : pas de bordure côté gauche.
• .border-bottom-0 : pas de bordure côté bas.
• .border-right-0 : pas de bordure côté droit.
• .border-0 : pas de bordure nulle part.
<div class="border border-0" style="width: 100px; float: left;
margin-right: 10px;">Elit Ipsum Mattis Pharetra</div>
<div class="border border-top-0" style="width: 100px; float: left;
<div class="border border-right-0" style="width: 100px; float: left;

<div class="border border-bottom-0" style="width: 100px; float: left;
<div class="border border-left-0" style="width: 100px; float:
left;">Elit Ipsum Mattis Pharetra</div>
Vous notez que j’ai ajouté des styles en ligne, afin de mieux visualiser le résultat.
Voici les propriétés utilisées pour ne pas afficher le côté droit :

.border-right-0 {
border-right: 0!important;
}
À l’inverse, vous pouvez choisir de n’avoir qu’une seule bordure d’un côté. Dans ce cas, utilisez les
classes : .border-top, .border-end, .border-bottom et .border-start.
Voici le code des exemples :
<div class="border-top" style="width: 100px; float: left;
<div class="border-end" style="width: 100px; float: left;
<div class="border-bottom" style="width: 100px; float: left;
<div class="border-start" style="width: 100px; float: left;">Elit
Ipsum Mattis Pharetra</div>
Voici la règle CSS pour obtenir une bordure au-dessus :
.border-top {
border-top: 1px solid #dee2e6 !important;
}
Le principe est le même pour les autres côtés.
3. Les jeux de couleurs

Bootstrap vous propose de colorer les bordures avec des couleurs dont nous avons déjà utilisé les
suffixes : primary, secondary, success, danger...
<div class="border border-primary" style="width: 100px;
float: left; margin-right: 10px;">Primary</div>
<div class="border border-secondary" style="width: 100px;
float: left; margin-right: 10px;">Secondary</div>
<div class="border border-success" style="width: 100px;
float: left; margin-right: 10px;">Success</div>
<div class="border border-danger" style="width: 100px;
float: left; margin-right: 10px;">Danger</div>
<div class="border border-warning" style="width: 100px;
float: left; margin-right: 10px;">Warning</div>
<div class="border border-info" style="width: 100px;
float: left; margin-right: 10px;">Info</div>
<div class="border border-light" style="width: 100px;
float: left; margin-right: 10px;">Light</div>
<div class="border border-dark" style="width: 100px;
float: left; margin-right: 10px;">Dark</div>
<div class="border border-white" style="width: 100px;
float: left; margin-right: 10px;">White</div>
Voici la couleur appliquée pour la classe .border-danger :

.border-danger {
border-color: #dc3545!important;
}
4. Les coins arrondis
Vous pouvez appliquer des coins arrondis de 0.25rem pixels à l’ensemble de l’élément, ou
seulement sur un côté. Vous pouvez aussi obtenir un rond parfait.

<div class="border rounded" style="width: 150px; float: left;
margin-right: 10px;">Integer posuere...</div>
<div class="border rounded-top" style="width: 150px; float: left;
<div class="border rounded-right" style="width: 150px; float: left;
<div class="border rounded-bottom" style="width: 150px; float: left;
<div class="border rounded-left" style="width: 150px; float: left;
<div class="border rounded-circle" style="width: 100px; height: 100px;
float: left; background-color: gray;"> </div>
Voici la propriété de la classe .rounded :

.rounded {
border-radius: .25rem!important;
}
Voici les propriétés de la classe .rounded-right :
.rounded-right {
border-top-right-radius: .25rem!important;
border-bottom-right-radius: .25rem!important;
}
Voici la propriété de la classe .rounded-circle :
.rounded-circle {
border-radius: 50%!important;
}
Vous pouvez aussi utiliser directement les classes .rounded-sm et .rounded-lg, pour obtenir des
coins arrondis de petite taille (small) et de grande largeur (large).
Voici un exemple simple d’application :
<img src="image.jpg" alt="image" class="rounded-sm">
<img src="image.jpg" alt="image" class="rounded-lg">
Vous pouvez aussi déterminer l’épaisseur des bordures avec cinq tailles prédéfinies. Voici le code
de cet exemple :
<div class="border border-1 border-primary" style="width: 100px;
float: left; margin-right: 10px;">border-1</div>
<div class="border border-2 border-secondary" style="width: 100px;
<div class="border border-3 border-success" style="width: 100px;
<div class="border border-4 border-danger" style="width: 100px;
<div class="border border-5 border-warning" style="width: 100px;
Voici la règle CSS pour obtenir une bordure d’épaisseur de 3 pixels :

.border-3 {
border-width: 3px !important;
}
Le principe est le même pour les autres épaisseurs.
Le flottement
La technique des boîtes flottantes a longtemps été utilisée pour créer des mises en page, mais cette
technique est obsolète avec l’avènement du module CSS 3 Flexbox. Actuellement le flottement est
utilisé pour ce pour quoi il est fait, à savoir habiller une image par du texte, en faisant flotter
l’image à gauche ou à droite, dans son élément parent.
L’exemple de ce titre est à télécharger dans le dossier nommé 12-Utilitaires-02.
1. Appliquer un flottement
Bootstrap vous propose deux classes pour appliquer un flottement. La classe .float-start applique un
flottement à gauche et .float-end, à droite.

<div class="border" style="width: 400px;">
<img src="terre.png" class="float-start" alt="Terre" />
Integer posuere erat...
</div>
Le conteneur est une boîte <div> ayant une bordure et une largeur fixée. Dans cette dernière, nous
avons l’insertion de l’image, <img> avec la classe .float-left pour l’image à habiller. Toujours dans
ce conteneur nous avons ensuite le texte qui est habillé.
Voici la propriété CSS de cette classe :

.float-start {
float: left!important;
}
2. Le flottement responsive
Actuellement les mises en page des sites web se doivent d’être totalement responsives. C’est pour
cela que Bootstrap vous propose de faire flotter les images selon la taille des écrans de diffusion,
avec des classes dédiées : .float-XX-start|end.
• Le paramètre XX indique la taille de l’écran. Nous retrouvons les valeurs déjà connues
de sm pour les petits écrans et supérieurs, md pour les écrans moyens et supérieurs...
Reportez-vous au chapitre La mise en page avec Bootstrap pour retrouver les tailles des
écrans dans les requêtes des médias.
• Le paramètre start|end indique le côté du flottement voulu : start à gauche, ou end à droite.
Par exemple la classe .float-md-start indique que l’image doit flotter à gauche uniquement pour les
écrans de taille moyenne et plus.

Les jeux de couleurs
Nous avons déjà de nombreuses fois utilisé les jeux de couleurs de Bootstrap. Ces couleurs
s’utilisent dans des classes, la plupart du temps en tant que suffixe.
Pour associer une couleur à du texte, il faut utiliser la classe .text-couleur, où le
suffixe couleur indique la couleur voulue. Pour mettre un arrière-plan en couleur, la classe à utiliser
est .bg-couleur.
Voici les couleurs de Bootstrap :
• primary : couleur bleue, #007bff.
• secondary : couleur gris-foncée, #6c757d.
• success : couleur verte, #28a745.
• danger : couleur verte, #dc3545.
• success : couleur verte, #28a745.
• warning : couleur jaune, #ffc107.
• info : couleur bleue-verte, #17A2B4.
• light : couleur grise très claire, #f8f9fa.
• dark : couleur grise foncée, #343a40.
• white : couleur blanche, #fffff.
Voici un exemple, à télécharger dans le dossier nommé 12-Utilitaires-03, avec une couleur
d’arrière-plan et pour le texte :
<div class="mb-2 bg-primary text-warning">.bg-primary</div>
<div class="mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="mb-2 bg-success text-primary">.bg-success</div>
<div class="mb-2 bg-danger text-light">.bg-danger</div>
<div class="mb-2 bg-warning text-dark">.bg-warning</div>
<div class="mb-2 bg-info text-white">.bg-info</div>
<div class="mb-2 bg-light text-dark">.bg-light</div>
<div class="mb-2 bg-dark text-info">.bg-dark</div>
<div class="mb-2 bg-white text-danger">.bg-white</div>
Voilà l’affichage obtenu :

Changer l’affichage des éléments
1. Les types d’affichage

Vous le savez, l’HTML prévoit un type d’affichage pour chaque élément. Les en-têtes,
de <h1> à <h6>, s’affichent les uns sous les autres, tout comme les paragraphes <p>. Ces éléments
s’affichent avec la propriété display: block.
Les éléments de mise en forme, comme <em>, <strong> ou <span> s’affichent dans la ligne de leur
conteneur. Ces éléments s’affichent avec la propriété display: inline.
Vous avez d’autres types d’affichage plus spécialisé pour les tableaux par exemple.
Dans certains cas de figure, vous pouvez souhaiter changer l’affichage par défaut. Le cas le plus
usuel est la construction de barre de navigation à partir de liste d’items. Les items de votre barre de
navigation peuvent être insérés dans des éléments <li> ou <div>. Mais les
éléments <li> et <div> s’affichent en mode block, les uns sous les autres. Pour avoir une barre de
navigation horizontale, vous devez changer ce comportement par défaut, pour avoir un affichage en
ligne, de type inline.
En plus de pouvoir changer le type d’affichage, Bootstrap permet de le faire selon la taille de
l’écran de diffusion, ce qui augmente encore le fort potentiel de ces classes.
2. Changer l’affichage
Pour changer l’affichage par défaut des éléments, Bootstrap met à notre disposition des classes
dédiées : .d-affichage. Le suffixe affichage indique quel affichage nous souhaitons utiliser. Voyons
les affichages les plus courants :
• .d-inline permet d’appliquer un affichage en ligne.
• .d-block permet d’appliquer un affichage en bloc.
• .d-grid permet d’utiliser un affichage en grille.
• .d-table permet d’appliquer un affichage en tableau.

• .d-none permet de ne pas afficher l’élément.
• .d-flex permet d’utiliser les affichages en Flexbox.
Nous pouvons aussi ajouter un paramètre pour préciser sur quelle taille d’écran doit être utilisé cet
affichage. Il suffit d’utiliser les paramètres déjà connus : sm pour les petits écrans et
supérieurs, md pour les écrans moyens et supérieurs...
Par exemple la classe .d-md-inline indique que l’affichage passe en mode en ligne pour les écrans
de taille moyenne et supérieure.
3. Créer une barre de navigation
Prenons un exemple très simple d’une liste d’éléments qui doit s’afficher en ligne.
L’exemple de ce titre est à télécharger dans le dossier nommé 12-Utilitaires-04.
Voici le code initial de cet exemple :
<nav>
<div class="p-2 bg-info text-white">Lorem</div>
<div class="p-2 bg-info text-white">Ipsum</div>
<div class="p-2 bg-info text-white">Malesuada</div>
<div class="p-2 bg-info text-white">Ultricies</div>
</nav>
Voici la structure utilisée :

• Le conteneur est un élément <nav>.
• Chaque item est placé dans une boîte <div>.
• La classe .p-2 permet d’avoir un remplissage de 0.5 rem (padding: .5rem!important;).
• La classe bg-info permet de colorer l’arrière-plan de chaque item.
• La classe .text-white permet d’avoir un texte écrit en blanc.
Pour le moment tous les items s’affichent les uns sous les autres. Nous devons changer cet
affichage avec la classe .d-inline. Pour que les items soient un peu espacés les uns des autres, nous
utilisons la classe .me-2 pour avoir une marge à droite de 0.5 rem (margin-end: .5rem).
Voici le code changé :
<nav>
<div class="d-inline p-2 me-2 bg-info text-white">Lorem </div>
<div class="d-inline p-2 me-2 bg-info text-white">Ipsum </div>
<div class="d-inline p-2 me-2 bg-info text-white"> Malesuada</div>
<div class="d-inline p-2 me-2 bg-info text-white"> Ultricies</div>
</nav>
Ajouter de la transparence
La classe .opacity-valeur permet d’ajouter de la transparence au contenu de l’élément qui utilise

cette classe. Le suffixe valeur est à remplacer par une des cinq valeurs numériques allant de 0,
totalement transparent, à 100 %, totalement opaque, par pas de 25.
Les exemples de cette section sont à télécharger dans le dossier nommé 12-Utilitaires-05.
<div class="row">
<div class="opacity-100">
<img src="terre.png" alt="La Terre" class="float-start">
<h1>La terre</h1>
</div>
<h1>La terre</h1>
</div>
<h1>La terre</h1>
</div>

<h1>La terre</h1>
</div>
</div>
Voici la règle CSS pour les opacités de 25 % et 75 % :

.opacity-25 {
opacity: 0.25 !important;
}
.opacity-75 {
opacity: 0.75 !important;
}
Ajouter des ombres portées

Bootstrap nous propose plusieurs classes pour ajouter des ombres portées à des éléments HTML.
Nous avons quatre types d’ombre portée à notre disposition.
<div class="shadow-none p-3 mb-5 bg-light rounded">

<h1>Lorem ipsum</h1>
<p>Sed elementum mi eget semper euismod...</p>
</div>
<div class="shadow-sm p-3 mb-5 bg-body rounded">
</div>
<div class="shadow p-3 mb-5 bg-body rounded">
</div>
<div class="shadow-lg p-3 mb-5 bg-body rounded">
</div>

Voici la règle CSS pour les classes .shadow et .shadow-lg :
.shadow {
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
.shadow-lg {
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}
Les espaces pour les colonnes
Les exemples de cette section sont à télécharger dans le dossier nommé 12-Utilitaires-07. Notez
qu’un style a été ajouté, afin d’encadrer les boîtes utilisées, pour mieux visualiser l’application des
classes.

<style>
.col-3 {
border: 1px solid #333;
}
</style>
1. La gestion des espaces
Bootstrap nous permet de gérer très précisément les valeurs des marges (margin) et des
remplissages (padding) des colonnes. Nous avons déjà utilisé ces espaces supplémentaires dans
différents exemples de ce livre.
2. La syntaxe utilisée
La syntaxe exploitée pour gérer ces espaces utilise un triplet de données : propriété-côté-valeur.
La première donnée indique quelle est la propriété à exploiter. Nous avons le choix entre les
marges, notées m pour margin et les remplissages, notés p pour padding.
Ensuite, nous devons indiquer le côté de la colonne qui est utilisé. Voici les valeurs possibles :
• t pour le côté haut des colonnes, t pour top. Nous aurons donc mt pour margin-
top et pt pour padding-top.
• b pour le côté bas des colonnes, b pour bottom. Nous aurons donc mb pour margin-
bottom et pb pour padding-bottom.
• s pour start est utilisé pour les propriétés CSS margin-left ou padding-left dans le
système LTR (Left To Right), soit de gauche à droite. Et margin-right ou padding-right dans
le système RTL (Right To Left), soit de droite à gauche.
• e pour end est utilisé pour les propriétés CSS margin-right ou padding-right dans le
système LTR (Left To Right), soit de gauche à droite. Et margin-left ou padding-left dans le
système RTL (Right To Left), soit de droite à gauche.
• x pour les côtés gauche et droit des marges et des remplissages des colonnes. x, pour l’axe
horizontal dans un repère orthonormé.
• y pour les côtés haut et bas des marges et des remplissages des colonnes. y, pour l’axe
vertical dans un repère orthonormé.
• Sans indication de côté, cela permet d’appliquer la valeur sur les quatre côtés de l’élément.
Nous aurons alors simplement les données m et p.
Enfin, la troisième donnée est la valeur à appliquer. Nous avons six valeurs prédéfinies :
• 0 : pas d’espace supplémentaire, la valeur est de 0.
• 1 : la valeur de l’espace standard est multipliée par 0,25.
• 3 : la valeur de l’espace standard est multipliée par 1, soit l’espacement initial.

• 5 : la valeur de l’espace standard est multipliée par 3.
• auto : la valeur des marges uniquement reprend celle des CSS en auto. Ceci permet d’avoir
un centrage automatique de l’élément dans son élément parent.
Voici quelques exemples de syntaxe pour des marges supplémentaires :
• mt-4 applique une marge supplémentaire en haut de l’élément.
• mts-3 applique une marge supplémentaire au début de l’élément, à gauche avec un système
LTR.
• mx-4 applique des marges supplémentaires à gauche et à droite de l’élément.
• m-2 applique des marges supplémentaires à chaque côté de l’élément.
• mx-auto applique des marges automatiques horizontales à l’élément.
Les principes sont les mêmes pour les remplissages, sauf pour auto qui ne s’applique qu’aux
marges.
3. Des marges supplémentaires
Voici le code de trois colonnes (<div class="col-3">) dans une ligne (<div class="row">), avec les
espaces initiaux. Cela va vous servir de référence.
<div class="row">
<p>Espaces initiaux</p>
</div>
<div class="row">
<div class="col-3">
Donec ullamcorper nulla non metus...
</div>
<div class="col-3">
Sed posuere consectetur est at lobortis...
</div>
<div class="col-3">
Ut fermentum massa justo sit amet risus...
</div>
</div>
</div>

Dans la deuxième ligne, nous appliquons ces marges supplémentaires :

• En haut : <div class="col-3 mt-4">.
• Au début, à gauche : <div class="col-3 ms-4">.
• À gauche et à droite : <div class="col-3 mx-4">.
<div class="row">
<p>Marges supplémentaires</p>
</div>
<div class="row">
<div class="col-3 mt-4">
</div>
<div class="col-3 ms-4">
</div>
<div class="col-3 mx-4">
</div>
</div>
</div>

4. Des remplissages supplémentaires
Pour la troisième ligne, nous appliquons des remplissages supplémentaires :
• En haut : <div class="col-3 pt-4">.
• Au début, à gauche : <div class="col-3 ps-4">.
• À gauche et à droite : <div class="col-3 px-4">.
<div class="row">
<p>Remplissages supplémentaires</p>
</div>
<div class="row">
<div class="col-3 pt-4">
</div>
<div class="col-3 ps-4">
</div>
<div class="col-3 px-4">
</div>
</div>
</div>

5. Centrer horizontalement
Pour la quatrième ligne, nous n’utilisons qu’une seule boîte avec un centrage horizontal
automatique dans la largeur de l’élément parent. Voici le code de cet exemple :
<div class="row">
<p>Centrage automatique</p>
</div>
<div class="row">
<div class="col-3 mx-auto">
Donec ullamcorper nulla non metus auctor fringilla.
</div>
</div>
</div>
6. Des espaces verticaux dans une grille

La classe .d-grid permet d’afficher des éléments dans une grille responsive. Voici un exemple
simple :
<div class="d-grid">
<div class="p-2 bg-light border">Donec ullamcorper nulla non metus
auctor fringilla.</div>
<div class="p-2 bg-light border">Sed posuere consectetur est at
lobortis.</div>
<div class="p-2 bg-light border">Ut fermentum massa justo sit amet

risus.</div>
</div>
Les trois boîtes <div> sont « collées », il n’y a pas d’espace entre elles. Pour ajouter un espace entre
ces trois boîtes, nous pouvons utiliser la classe .gap-valeur, en indiquant une valeur allant de 0 à 5,
comme précédemment.
Voici le code modifié :
<div class="d-grid gap-4">
<div class="p-2 bg-light border">Donec ullamcorper nulla non metus
auctor fringilla.</div>
<div class="p-2 bg-light border">Sed posuere consectetur est at
lobortis.</div>
<div class="p-2 bg-light border">Ut fermentum massa justo sit amet
risus.</div>
</div>
Voici l’affichage final obtenu :
La taille des colonnes
1. Appliquer une largeur aux colonnes

Vous pouvez parfaitement appliquer une largeur à vos colonnes dans les lignes où elles sont
insérées. Cette largeur des colonnes sera relative à la largeur de l’élément parent. Vous avez accès à
cinq largeurs prédéfinies, avec cinq classes : 25 % (w-25), 50 % (w-50), 75 % (w-75), 100 % (w-
100) et auto (w-auto) pour un ajustement automatique.
Voici le code utilisé pour ces exemples :
<div class="d-grid gap-2 border">

<div class="w-25 bg-light border">25%. Donec ullamcorper nulla...</div>
<div class="w-auto bg-light border">auto. Donec ullamcorper nulla...</div>
</div>
2. Appliquer une hauteur aux colonnes

Sur le même principe, vous pouvez appliquer une hauteur prédéfinie aux colonnes dans les lignes.
Les classes à utiliser sont : h-25, h-50, h-75, h-100 et auto h-auto.
<div class="border border-2 border-dark" style="height: 100px;
background-color: #aaa;">
<div class="h-25 d-inline-block" style="width: 120px;
background-color: #fff">Hauteur 25%</div>
<div class="h-auto d-inline-block" style="width: 120px;
background-color: #fff">Hauteur auto</div>
</div>

Positionner les éléments
1. Le positionnement dans les pages web

Vous avez plusieurs positionnements des éléments à votre disposition : les positions statiques
(static), relatives (relative), absolues (absolute), fixe (fixed) et épinglées (sticky). Avec Bootstrap,
vous retrouvez ces positions avec les classes position-static, position-relative, position-
absolute, position-fixed et position-sticky.
Pour positionner vos éléments, vous pouvez aussi utiliser des emplacements prédéfinis avec les
valeurs top, start, bottom et end. Enfin, vous indiquerez une position prédéfinie avec les
valeurs 0, 50 et 100.
Voici un exemple de positionnement : position-absolute top-0 start-0. L’élément est placé en
position absolue, en haut à gauche de son élément parent.
Notez bien que les éléments positionnés perdent l’affichage responsive.
2. Exemples de positionnement
<div class="position-relative border border-2" style="margin-left:50px;
width:500px; height:200px;">
<img src="carre.png" class="position-absolute top-0 start-0">
<img src="cercle.png" class="position-absolute top-0 end-0">
<img src="triangle.png" class="position-absolute bottom-0 start-0">
<img src="etoile.png" class="position-absolute bottom-0 end-0">
<img src="anneau.png" class="position-absolute top-50 start-50 translate-middle">
</div>
Dans tous ces exemples, les éléments sont en position absolue par rapport à l’élément parent qui est
en position relative. Détaillons les classes utilisées :
• Pour le carré : class="position-absolute top-0 start-0". Le carré est placé à 0 pixel du
haut, top-0, et à 0pixel de la gauche, start-0.
• Pour le cercle : class="position-absolute top-0 end-0". Le cercle est placé à 0 pixel du
haut, top-0, et à 0pixel de la droite, end-0.

• Pour le triangle : class="position-absolute bottom-0 start-0". Le triangle est placé à 0 pixel
du bas, bottom-0, et à 0 pixel de la gauche, start-0.
• Pour l’étoile : class="position-absolute bottom-0 end-0". L’étoile est placée à 0 pixel du
bas, bottom-0, et à 0 pixel de la droite, end-0.
• Pour l’anneau : class="position-absolute top-50 start-50 translate-middle". L’anneau est
placé à 50 % du haut, top-50, à 50 % de la gauche, start-50, et il est centré par rapport à son
propre milieu.
Des classes pour le texte
1. Les alignements
Les exemples de ce titre sont à télécharger dans le dossier nommé 12-Utilitaires-10.
Bootstrap nous propose plusieurs classes pour aligner le texte :
• .text-start pour un alignement à gauche.
• .text-center pour un alignement centré.
• .text-end pour un alignement à droite.
<div class="col-4">
<p class="text-start">Donec ullamcorper nulla...</p>
</div>
<div class="col-4">
<p class="text-center">Sed posuere consectetur...</p>
</div>
<div class="col-4">
<p class="text-end">Ut fermentum massa justo...</p>
</div>

Vous pouvez aussi décider qu’un alignement ne soit appliqué qu’en fonction d’une taille d’écran
spécifié. Pour cela il suffit d’ajouter les valeurs connues des points de rupture : lg, md, sm…
Voici le code de ces deux exemples :
<div class="col-6">
<p class="text-md-center">Donec ullamcorper nulla...</p>
</div>
<div class="col-6">
<p class="text-sm-end">Sed posuere consectetur...</p>
</div>
Voici l’affichage obtenu sur un écran large : les alignements sont bien centrés et à droite.
Voici l’affichage obtenu sur un écran plus petit : les alignements sont à gauche, par défaut.
2. La hauteur de ligne
Vous pouvez modifier la valeur de l’interligne avec la classe .lh-valeur. Le suffixe valeur peut
prendre les valeurs suivantes : 1, sm, base et lg.
Voici les règles CSS appliquées :
.lh-1 {
line-height: 1 !important;
}

.lh-sm {
line-height: 1.25 !important;
}
.lh-base {
line-height: 1.5 !important;
}
.lh-lg {
line-height: 2 !important;
}
<div class="col">
<p>Donec ullamcorper nulla non metus auctor fringilla...</p>
<p class="lh-1">Donec ullamcorper nulla non metus..</p>
<p class="lh-sm">Donec ullamcorper nulla non metus..</p>
<p class="lh-base">Donec ullamcorper nulla non metus..</p>
<p class="lh-lg">Donec ullamcorper nulla non metus..</p>
</div>

3. Les classes pour les caractères
Enfin, Bootstrap nous propose plusieurs classes pour modifier les caractères de vos textes. Les
exemples de cette section sont à télécharger dans le dossier nommé 12-Utilitaires-12.
Pour changer la casse des caractères :
• text-lowercase : pour utiliser les bas de casse (minuscules).
• text-uppercase : pour utiliser les capitales (majuscules).
• text-capitalize : pour appliquer une capitale à la première lettre de chaque mot.
<p>Donec ullamcorper nulla non <span class="text-lowercase">MetUs aUCtor
frINGilLA</span>. Maecenas faucibus mollis interdum. Curabitur blandit. Sed
posuere consectetur est at lobortis. <span class="text-uppercase">Nullam
quis risus</span> eget urna mollis <span class="text-capitalize">ornare
vel eu leo. Morbi leo risus</span>.</p>
Pour modifier la graisse et mettre en italique, si la fonte choisie le permet :

• fw-bold : pour mettre en gras.
• fw-bolder : pour mettre en plus gras par rapport au contexte du parent.
• fw-normal : pour mettre sans gras, en « normal ».

• fw-light : pour mettre en léger, en moins gras.
• fw-lighter : pour mettre en plus léger, en moins gras, par rapport au contexte du parent.
• fst-italic : pour mettre en italique.
• fst-normal : pour mettre sans italique, en « normal ».
<p>Donec ullamcorper nulla non <span class="fw-bold">metus auctor fringilla.
Maecenas <span class="fw-normal">faucibus mollis interdum</span>. Curabitur
blandit</span>. Sed posuere consectetur est at lobortis. <span class=
"fst-italic">Nullam quis risus eget urna mollis <span class="fst-normal">
ornare vel eu leo</span>. Morbi leo risus</span>.</p>
Pour modifier la taille des caractères, utilisez les classes suivantes fs-valeur. Le suffixe valeur va
de 1 à 6 et permet d’obtenir une taille de caractères similaire à celles des en-têtes <h1> à <h6>.
<p>Lorem ipsum dolor sit amet, <span class="fs-1">consectetur adipiscing
elit</span>. Aenean vel dolor at nisi interdum commodo. Curabitur est urna,
<span class="fs-1">venenatis ac mattis quis, volutpat a nisi</span>. Duis
molestie sapien id orci cursus, <span class="fs-2">vitae hendrerit risus
egestas</span>. Donec porta, mauris ac varius viverra, nisl est venenatis
magna, vitae aliquam diam ipsum non sapien. <span class="fs-3">Vestibulum
eu rutrum diam</span>. Ut placerat non augue in finibus. <span class="
fs-4">Aliquam a finibus augue, id commodo odio</span>. Quisque facilisis
metus vel vulputate varius. Nullam blandit porta bibendum. <span class="
fs-5">Vivamus ante felis, egestas et lectus at</span>, maximus iaculis
ligula. Nullam pretium dui eu turpis convallis cursus. Donec congue elit
arcu. <span class="fs-6">Nulla in lacus sed orci lacinia dapibus</span>.
Aenean laoreet arcu quis libero semper ullamcorper.</p>

Voici les règles CSS utilisées :
.fs-1 {
font-size: calc(1.375rem + 1.5vw) !important;
}
.fs-2 {
}
.fs-3 {
}
.fs-4 {
}
.fs-5 {
font-size: 1.25rem !important;
}
.fs-6 {
font-size: 1rem !important;
}
Vous pouvez aussi appliquer des soulignés (classe .text-decoration-underline), des barrés
(classe .text-decoration-line-through) et utiliser le style de caractères à chasse fixe (classe .font-
monospace), comme les fontes de type Courrier.

<p>Donec ullamcorper nulla non <span class="text-decoration-underline">
metus auctor fringilla</span>. Maecenas faucibus mollis interdum. <span
class="text-decoration-line-through">Curabitur blandit</span>. Sed
posuere consectetur est at lobortis. <span class="font-monospace">Nullam
quis risus</span> eget urna mollis.</p>
13. Les templates, les thèmes et les sites
Bootstrap vous propose des templates gratuits en exemple de mise en page. Ces exemples
permettent d’exploiter des composants dans des situations réelles de conception de page web.
Bootstrap propose aussi des thèmes payants qui sont des mises en pages très élaborées pour
concevoir des sites web complets. Voici l’URL des thèmes payants de
Bootstrap : https://themes.getbootstrap.com
Enfin, vous pourrez visualiser des sites très design qui ont été créés avec Bootstrap et qui sont
regroupés dans une galerie de site. Voici l’URL de cette galerie : https://expo.getbootstrap.com
Les templates
1. Utiliser les templates

Bootstrap propose des exemples de mises en page gratuites qui vous serviront de base de
conception. Ces templates devront être adaptés à vos projets et vous devrez y intégrer vos
designs et vos chartes graphiques.
Dans la page d’accueil de Bootstrap, dans la barre de navigation, cliquez sur le lien Examples.
Voici l’URL des exemples de mise en page : https://getbootstrap.com/docs/5.1/examples/

2. Télécharger les templates

Pour exploiter un des templates proposés en exemple, vous devez télécharger l’archive qui les
stocke tous.
Accédez à cette URL : https://getbootstrap.com/docs/5.1/examples/
Dans la partie supérieure de la fenêtre, cliquez sur le bouton Download examples.
Vous téléchargez une archive nommée bootstrap-5.1.3-examples.zip.

Décompressez cette archive.
Vous obtenez un dossier nommé bootstrap-5.1.3-examples contenant tous les exemples de
Bootstrap.
Le template Carousel
1. Les fichiers du template

Dans les exemples de Bootstrap, nous allons étudier le template nommé Carousel :
Le dossier à télécharger de cet exemple terminé est nommé 13-Template-01.
Voici l’affichage « brut » de ce template, accessible à cette
URL : https://getbootstrap.com/docs/5.1/examples/carousel/

Dans le dossier décompressé bootstrap-5.1.3-examples, allez dans le dossier carousel.
Vous avez trois fichiers : carousel.css, carousel.rtl.css et index.html.
Ouvrez le fichier index.html.
Le fichier index.html, contient le lien vers le fichier carousel.css : <link href="carousel.css"
rel="stylesheet">. Ce fichier CSS est utile si vous souhaitez personnaliser les règles CSS utilisées
dans cet exemple.
En ce qui concerne le lien vers le fichier CSS de Bootstrap, il pointe vers des dossiers non présents
dans cette structure :

<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
Il convient donc de faire un lien vers le fichier CSS en ligne, via CDN, comme nous l’avons
toujours fait précédemment.
Voici la syntaxe à utiliser :
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/
css/bootstrap.min.css" rel="stylesheet" integrity=

Enfin, le fichier d’exemple contient un style CSS personnalisé et une requête de média :
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
Il en est de même pour la liaison au fichier JavaScript de Bootstrap. Voici la liaison initiale :
<script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
Voici son remplacement :
2. Personnaliser l’en-tête
Commençons par personnaliser le code de l’en-tête <head>. Vous pouvez renseigner les
balises meta qui vous sont proposées :
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.88.1">

Libre à vous de les modifier ou d’en supprimer. Voici un exemple :
<meta name="description" content="Exemple de carousel">
3. Personnaliser le menu de navigation
Le menu de navigation se trouve dans l’élément <header>, puis dans <nav>. Ce dernier possède les
classes suivantes :
• .navbar pour l’affichage général des menus de navigation.
• .navbar-expand-md permet l’affichage en pleine largeur pour les écrans moyens et plus.
• .navbar-dark permet d’utiliser le jeu de couleur sombre.
• .fixed-top permet de fixer le menu de navigation en haut de l’écran, lorsque le visiteur fait
dérouler la fenêtre vers le bas.
• .bg-dark pour avoir un arrière-plan sombre.
Voici l’affichage obtenu sur grand écran :
Voici l’affichage obtenu sur petit écran :
Maintenant vous pouvez traduire les libellés du menu de navigation, voire ajouter d’autres items si
vous le souhaitez.
C’est dans le premier élément <a> que se trouve le nom Carousel qui pourra être changé pour
afficher le nom du site, le nom de l’entreprise ou tout autre mot que vous souhaitez.
Voici le libellé pour cet exemple :
<a class="navbar-brand" href="#">Venise</a>
Ensuite, dans l’élément <div>, puis dans l’élément <ul>, chaque item du menu est placé dans un
élément <li> et dans un élément <a>. C’est dans ce dernier élément que vous pouvez changer les
libellés.
Voici les liens initiaux :
<a class="nav-link active" aria-current="page" href="#">Home</a>
...
<a class="nav-link" href="#">Link</a>
...
<a class="nav-link disabled">Disabled</a>
Notez bien que le dernier item utilise la classe .disabled. Vous pouvez bien sûr le supprimer.

Voici les liens modifiés :
<a class="nav-link active" aria-current="page" href="#">Accueil</a>
...
<a class="nav-link" href="#">San Marco</a>
...
<a class="nav-link disabled">Dorsoduro</a>
4. Personnaliser la recherche
Sur la droite du menu de navigation se trouve la recherche, avec le champ de saisie et le bouton de
lancement. Ces deux objets se trouvent dans un élément <form> :
<input class="form-control me-2" type="search" placeholder="Search"
aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
Vous pouvez personnaliser l’attribut placeholder et le contenu de l’élément <buttom>. Par exemple
<input class="form-control me-2" type="search" placeholder="Rechercher"
aria-label="Rechercher">
<button class="btn btn-outline-success" type="submit">Rechercher</button>
</form>
5. Le carousel
Dans la partie supérieure de l’écran, nous avons le carousel en lui-même, <div id="myCarousel"
class="carousel slide" data-bs-ride="carousel">, avec trois images qui défilent. Ces images sont
placées dans des éléments <svg>.
Donc à vous de placer trois images, ou plus, dans un dossier images que vous devez créer, puis
d’indiquer leur chemin d’accès dans l’attribut src et de renseigner l’attribut alt. Vous devrez bien sûr
adapter les dimensions des images afin d’obtenir un affichage optimal.
Voici les éléments <img> de cet exemple :

<img class="bd-placeholder-img" src="images/castello.jpg" alt="Arsenal">
...
<img class="bd-placeholder-img" src="images/dorsoduro.jpg" alt="Dorsoduro">
...
<img class="bd-placeholder-img" src="images/san-marco.jpg" alt="San Marco">
Chaque image du carousel possède un titre, <h1>, un texte explication, <p>, et un bouton
d’action, <a>. À nouveau, vous devez personnaliser ces textes selon les images utilisées.
Voici l’exemple pour la troisième image :
<div class="carousel-caption text-end">
<h1>La Basilic Saint-Marc</h1>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis
vestibulum.</p>
<p><a class="btn btn-lg btn-primary" href="#">Sed posuere</a></p>
</div>
6. Les images d’en-tête

Le template Carousel nous propose d’insérer des images de taille réduite dans trois cadres en forme
de rond. Chaque image a un titre, un texte de description et un bouton d’action. Ces images sont
insérées dans la boîte <div class="container marketing">.
Les images sont placées dans un élément <svg> qui utilise la classe .rounded-circle qui applique
des coins arrondis à 50%, ce qui permet d’avoir une forme ronde. Enfin, la largeur et la hauteur sont
fixées à 140 pixels. Donc il faudra adapter vos images à ces dimensions.
Les titres des images sont placés dans des éléments <h2> et le texte de la description dans des
éléments <p>, il faudra renseigner ces textes.

Les boutons d’action sont placés dans des éléments <p>, puis dans des éléments <a> utilisant les
classes .btn et .btn-secondary.
À nouveau, personnalisez ces boutons en fonction de votre propre mise en page.
Voici l’exemple du code du premier bloc :
<img class="bd-placeholder-img rounded-circle" width="140"
height="140" src="images/venise-1.jpg">
<h2>Vivamus sagittis</h2>
<p><a class="btn btn-secondary" href="#">Lorem ipsum »</a></p>
</div>
Voici l’affichage obtenu pour cet exemple :
7. Les textes de présentation

Le modèle se poursuit avec l’affichage de trois lignes de texte explicatif, accompagné d’images
d’illustration.
Chaque ligne, <div class="row featurette">, est séparée par une ligne insérée avec un élément <hr
class="featurette-divider">.
Les textes sont insérés dans une boîte <div class="col-md-7">, dans des
éléments <h2 class="featurette-heading">, <span class="text-muted"> et <p class="lead">.
Les images sont insérées dans une boîte <div class="col-md-5"> et dans un élément <svg>.
Comme précédemment, à vous de personnaliser ces éléments d’affichage.
Voici l’exemple du code du premier bloc :
<div class="row featurette">
<h2 class="featurette-heading">Vivamus sagittis lacus.
<span class="text-muted">Cras mattis consectetur.</span></h2>

<p class="lead">Duis mollis, est non commodo...</p>
</div>
<img class="featurette-image img-fluid mx-auto"
src="images/venise-4.jpg" alt="Ullamcorper Fermentum">
</div>
</div>
Voici un exemple d’une ligne :
8. Le pied de page
Le template se termine par le pied de page qui contient un copyright, des liens et un lien pour
remonter au sommet de la page. Tous ces éléments sont contenus dans un élément <footer> :
<footer class="container">
<p class="float-right"><a href="#">Back to top</a></p>
<p>© 2017-2021 Company, Inc. · <a href="#">Privacy</a>
· <a href="#">Terms</a></p>
</footer>
Voici le code de la personnalisation :
<footer class="container">
<p class="float-end"><a href="#">Haut</a></p>
<p>© 2022 Mes voyages · <a href="#">Equipe</a> ·
<a href="#">Projets</a></p>
</footer>
Vous pouvez personnaliser ce pied de page comme vous le souhaitez. Voici un exemple :

Le template Album
1. Les fichiers du template

Le dossier à télécharger de cet exemple terminé est nommé 13-Template-02.
Voici l’affichage « brut » de ce template, accessible à cette URL
: https://getbootstrap.com/docs/5.1/examples/album/
Dans le dossier décompressé bootstrap-5.1.3-examples, ouvrez le dossier album et ouvrez le

fichier index.html.
Nous retrouvons tous ce que nous avons déjà dit sur les liaisons aux fichiers CSS et JavaScript de
Bootstrap. Reportez-vous au titre précédent pour personnaliser tous ces éléments.
2. La structure de l’en-tête
Sur la gauche nous avons un bouton et un libellé Album qui permettent de revenir sur la page
d’accueil. Sur la droite, le menu de navigation s’affiche par défaut sous la forme d’un menu
hamburger.
Si vous cliquez sur le menu hamburger, celui-ci affiche l’en-tête, avec deux
sections : About et Contact.

Tout l’en-tête est placé dans un élément <header>, contenant deux boîtes <div> :
<header>
<div class="collapse bg-dark" id="navbarHeader">
...
</div>
<div class="navbar navbar-dark bg-dark shadow-sm">
...
</div>
</header>
La première boîte <div> contient les deux sections About et Contact, et la deuxième contient le
menu de navigation.
3. Personnaliser les sections de l’en-tête
Dans l’élément <header>, la première boîte <div class="collapse bg-dark"
id="navbarHeader"> contient les deux sections About et Contact. Cette boîte <div>, contient un
conteneur Bootstrap, <div class="container">, avec une ligne, <div class="row">.
Cette ligne contient une première colonne, <div class="col-sm-8 col-md-7 py-4">, avec le
texte About dans un élément <h4> et le texte affiché dessous dans un élément <p> :
<div class="col-sm-8 col-md-7 py-4">
<h4 class="text-white">About</h4>
<p class="text-muted">Add some information...</p>
</div>
À vous de personnaliser ces deux textes :
<div class="col-sm-8 col-md-7 py-4">
<h4 class="text-white">Ce site</h4>
<p class="text-muted">Lorem ipsum...</p>
</div>
La ligne contient une deuxième colonne, <div class="col-sm-4 offset-md-1 py-4">, avec le
texte Contact dans un élément <h4 class="text-white">, et une liste <ul class="list-
unstyled"> contenant des liens vers les réseaux sociaux :

<div class="col-sm-4 offset-md-1 py-4">
<h4 class="text-white">Contact</h4>
<li><a href="#" class="text-white">Follow on Twitter</a></li>
<li><a href="#" class="text-white">Like on Facebook </a></li>
<li><a href="#" class="text-white">Email me</a></li>
</ul>
</div>
À nouveau, personnalisez ces informations :
<div class="col-sm-4 offset-md-1 py-4">
<h4 class="text-white">Contactez-nous</h4>
<li><a href="#" class="text-white">Twitter</a></li>
<li><a href="#" class="text-white">Facebook</a></li>
<li><a href="#" class="text-white">Email</a></li>
</ul>
</div>
Voilà un exemple de personnalisation :
4. Personnaliser le menu de navigation

Le menu de navigation est placé dans la deuxième boîte <div class="navbar navbar-dark bg-
dark shadow-sm"> de l’élément <header>. Cette boîte contient un conteneur Bootstrap : <div
class="container">.
Dans ce conteneur, nous avons sur la gauche le bouton et le texte Album. Le bouton est dans un
élément <a href="#" class="navbar-brand d-flex align-items-center">. Le bouton en lui-même est
une illustration au format SVG.
Le libellé Album est placé dans un élément <strong> que vous pouvez bien sûr
personnaliser : <strong>Venise</strong>.

Le menu hamburger est un bouton :
data-bs-target="#navbarHeader" aria-controls="navbarHeader"
</button>
5. Le bandeau supérieur
Le bandeau supérieur affiche un texte et deux boutons :
Tout l’affichage central est placé dans un élément <main>. Dans cet élément, le bandeau supérieur
se trouve dans un élément <section>. À vous de personnaliser ce bandeau comme vous le souhaitez.
Voici un exemple :
<section class="py-5 text-center container">
<div class="row py-lg-5">
<div class="col-lg-6 col-md-8 mx-auto">
<h1 class="fw-light">Venise, la Sérénissime</h1>
<p class="lead text-muted">Morbi at est a nisl..</p>
<p>
<a href="#" class="btn btn-primary my-2">Le Grand Canal</a>
<a href="#" class="btn btn-secondary my-2">Les palais</a>
</p>
</div>
</div>
</section>

6. L’album photo
Tout l’album photo de cette page est affiché dans une boîte <div class="album py-5 bg-light">.
Dans celle-ci, nous avons un conteneur Bootstrap, <div class="container"> et une ligne <div
class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">. Cette ligne contient plusieurs
colonnes <div class="col"> qui s’affichent soit en colonnes, soit sur une seule ligne selon la largeur
de l’écran.
Voici un extrait de l’affichage initial sur un grand écran :
Voici un extrait de l’affichage initial sur un petit écran :

Chaque colonne, <div class="col">, est structurée de manière identique. Chaque colonne utilise le
composant Card que nous avons déjà étudié dans un précédent chapitre. C’est la boîte <div
class="card shadow-sm"> qui affiche ce composant.
Voici la structure complète d’une carte, d’un composant Card, avec l’image d’exemple au format
SVG, la boîte <div> avec le texte, et les deux boutons et le texte 9 mins.
<div class="card shadow-sm">
<svg class="bd-placeholder-img card-img-top" width="100%"
height="225" xmlns="http://www.w3.org/2000/svg" role="img"
aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice"
focusable="false"><title>Placeholder</title><rect width="100%"
height="100%" fill="#55595c"/><text x="50%" y="50%"
fill="#eceeef" dy=".3em">Thumbnail</text></svg>
<p class="card-text">This is a wider card with supporting text below as a
natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">

<button type="button" class="btn btn-sm btn-outline-secondary">
View</button>
Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
Voici un exemple de personnalisation d’une carte :
<div class="card shadow-sm">
<img src="images/venise-1.jpg">
<p class="card-text">Cras fringilla eros et libero volutpat...</p>
<div class="d-flex justify-content-between align-items-center">
Afficher</button>
Lire</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
Voici un extrait de l’affichage obtenu sur grand écran :

Voici un extrait de l’affichage obtenu sur petit écran :
7. Personnaliser le pied de page

Le pied de page affiche des informations diverses et un lien pour revenir en haut de la page :

Tous ces éléments sont affichés dans un élément <footer class="text-muted py-5">, puis dans une
boîte <div class="container"> :
<footer class="text-muted py-5">
<p class="float-end mb-1">
<a href="#">Back to top</a>
</p>
<p class="mb-1">Album example is © Bootstrap, but please download
and customize it for yourself!</p>
<p class="mb-0">New to Bootstrap? <a href="/">Visit the homepage</a> or read
our <a href="../getting-started/introduction/">getting started guide</a>.</p>
</div>
</footer>
Comme toujours, vous pouvez personnaliser ces informations affichées, en fonction de votre
projet.
Les thèmes Bootstrap
Si vous êtes "pressé" ou à court d’idées, Bootstrap peut vous aider avec l’achat de thèmes. Ces
thèmes sont prêts à l’emploi, vous aurez juste à les personnaliser selon les besoins de vos projets.
Sur la page d’accueil du site de Bootstrap, cliquez sur le bouton Themes.
Dans la page qui s’affiche, vous avez accès à de très nombreux thèmes mais retenez bien qu’ils sont
tous payants.

Pour avoir plus d’informations sur le thème avant de l’acheter, cliquez sur la miniature du thème.

Vous avez ainsi accès à de nombreuses informations techniques et de design.

Pour afficher un aperçu du thème, dans la fenêtre d’accueil des thèmes, cliquez sur le bouton Live
preview.
Voici un extrait de ce thème :

Boots Tarp 5

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Boots Tarp 5

Transféré par

Droits d'auteur :

Formats disponibles

FORMATION JOBINTECH SQL

ENSAM RABAT N.ZIDANE BOOTSTRAP 5 Page 1/225

ENSAM RABAT N.ZIDANE BOOTSTRAP 5 Page 2/225

ENSAM RABAT N.ZIDANE BOOTSTRAP 5 Page 3/225

ENSAM RABAT N.ZIDANE BOOTSTRAP 5 Page 4/225

ENSAM RABAT N.ZIDANE BOOTSTRAP 5 Page 5/225

1.1 Le développement des sites web

Depuis longtemps déjà, le développement des sites web a fortement

ENSAM RABAT N.ZIDANE BOOTSTRAP 5 Page 6/225

Bootstrap propose de très solides fonctionnalités pour développer nos

1.3 La compatibilité avec les navigateurs

ENSAM RABAT N.ZIDANE BOOTSTRAP 5 Page 7/225

2.1. Les objectifs

Dans ce chapitre, vous verrez comment installer Bootstrap afin de

2.2. Installer Bootstrap

Vous avez plusieurs possibilités pour installer Bootstrap selon votre

2.3. Télécharger la distribution Bootstrap

ENSAM RABAT N.ZIDANE BOOTSTRAP 5 Page 8/225

Dans votre dossier de téléchargement, vous récupérez une archive

2.4. Lier Bootstrap aux fichiers HTML

Si vous préférez éviter de télécharger les fichiers Bootstrap, vous

ENSAM RABAT N.ZIDANE BOOTSTRAP 5 Page 9/225

Dans chaque fichier HTML de votre projet, dans l’élément <header>,

2.5. Le dossier de distribution

2.5.1. Les fichiers du dossier de distribution

ENSAM RABAT N.ZIDANE BOOTSTRAP 5 Page 10/225

2.5.2. Le dossier css

Le dossier css contient tous les fichiers CSS de Bootstrap :

ENSAM RABAT N.ZIDANE BOOTSTRAP 5 Page 11/225

Voici un récapitulatif de l’utilisation des fichiers CSS :

Fichiers CSS Mise en page Contenu Composants Utilitaires

bootstrap.css Inclus Inclus Inclus Inclus

bootstrap-grid.css Grille Non inclus Non inclus Flex

bootstrap- Non inclus Non inclus Non inclus Non inclus

ENSAM RABAT N.ZIDANE BOOTSTRAP 5 Page 12/225

bootstrap- Non inclus Reboot Non inclus Non inclus

Le dossier js contient les fichiers JavaScript nécessaires à l’utilisation

2.6. Un site Bootstrap lié aux fichiers locaux

ENSAM RABAT N.ZIDANE BOOTSTRAP 5 Page 13/225

ENSAM RABAT N.ZIDANE BOOTSTRAP 5 Page 14/225

Dans l’élément <head> vous avez la liaison au fichier CSS complet de

ENSAM RABAT N.ZIDANE BOOTSTRAP 5 Page 15/225

Voici les éléments de contenu, placés dans le <body> :

L’élément <blockquote> utilise la classe Bootstrap blockquote .

ENSAM RABAT N.ZIDANE BOOTSTRAP 5 Page 16/225

1. Les réseaux de diffusion de contenu

Vous pouvez aussi vous rendre sur la page Introduction de Bootstrap à

Dans le fichier HTML, avant la balise de fermeture de

ENSAM RABAT N.ZIDANE BOOTSTRAP 5 Page 18/225

2.8. Les types de sites Bootstrap

Nous venons de voir comment installer Bootstrap avec toutes ses

3. La mise en page avec Bootstrap

ENSAM RABAT N.ZIDANE BOOTSTRAP 5 Page 19/225

3.1. Définir le viewport

Le modèle de mise en page de Bootstrap est "mobile first". Cela veut

3.2. La largeur des boîtes

Les mises en page de Bootstrap se font principalement avec des

ENSAM RABAT N.ZIDANE BOOTSTRAP 5 Page 20/225

Vous pouvez télécharger le dossier de cet exemple, nommé 03-grille-01.

Vous pouvez télécharger le dossier de cet exemple nommé 03-grille-02.

3.4. La largeur fixe des conteneurs

ENSAM RABAT N.ZIDANE BOOTSTRAP 5 Page 21/225

• Pour un écran plus grand ou égal à 768 pixels, nommé Medium.

• Pour un écran plus grand ou égal à 992 pixels, nommé Large.