Container fixe

Eléments

Couleur de texte & idem pour les couleur de fond avec bg-*

text-primary text-secondary text-success text-danger text-warning text-info
text-light text-dark text-body text-muted text-white text-black-50 text-white-50

Primary link Secondary link Success link Danger link  Warning link Info link Light link Dark link Muted link  White link

Définir la taille d’un élément (.w-25 : l’élément a une largeur égale à 25% de celle de son parent, etc
.h-25 : l’élément a une hauteur égale à 25% de celle de son parent ; )

w-25

w-50

w-75

w-100

w-auto

Ajouter une bordure carrée autour d’un élément ou sur un côté spécifique

.border

.border-top

.border-right

.border-bottom

.border-left

Ou supprimer une bordure sur un côté spécifique

.border .border-0

.border .border-top-0

.border .border-right-0

.border .border-bottom-0

.border .border-left-0

Ou arrondir une bordure autour ou sur un côté spécifique

.border .rounded

.border .rounded-top

.border .rounded-right

.border .rounded-bottom

.border .rounded-left

.border .rounded-circle

.border .rounded-pill

.border .rounded-0

Marges intérieures et extérieures

Pas de marge

padding-left: 1rem

margin-left: 1rem

padding-left: 1rem et margin-left: 1rem

padding: 0.5rem

Centrer horizontalement un élément

Les classes permettant de définir le type d’affichage d’un élément sont responsives et vont pouvoir être construites en utilisant le schéma suivant :

• .d-{valeur} pour appliquer un type d’affichage à toutes les tailles d’écran ;
• .d-{breakpoint}-{valeur} pour appliquer un type d’affichage à une taille d’écran en particulier. Les breakpoints vont être comme d’habitude représentés par : sm, md, lg et xl.

Les valeurs que l’on va pouvoir utiliser sont les suivantes :

• none : l’élément aura display: none ;
• inline : l’élément aura display: inline ;
• block : l’élément aura display: block ;
• inline-block : l’élément aura display: inline-block ;
• table : l’élément aura display: table ;
• table-cell : l’élément aura display: table-cell ;
• table-row : l’élément aura display: table-row ;
• flex : l’élément aura display: flex ;
• inline-flex : l’élément aura display: inline-flex.

Les classes Bootstrap de type .justify-content-* vont nous permettre de modifier l’alignement des éléments flex le long de leur axe principal qui sera l’axe horizontal par défaut ou l’axe vertical si on a définit un flex-direction: column pour le conteneur.

Notez que les classes de type .d-flex vont parfaitement supporter l’utilisation des breakpoints afin de rendre l’affichage de nos éléments totalement responsive.

.justify-content-between : les éléments flex vont être distribués de manière équitable dans le conteneur. Le premier élément sera collé au début du conteneur et le dernier élément sera collé à la fin du conteneur ;

.justify-content-around : les éléments flex vont être distribués de manière équitable dans le conteneur.

.justify-content-center pour les petits écrans puis .justify-content-between dès qu'on passe le breakpoint lg

.flex-column justify-content-center : Eléments centrés selon l'axe principal qui est ici vertical

Aligner les éléments au cas par cas avec align-self
Nous allons également pouvoir aligner les éléments flex selon leur axe secondaire un à un en utilisant cette fois-ci les classes Bootstrap .align-self-*.

Nous allons pouvoir choisir parmi les mêmes options que pour align-items-*, à savoir :

• .align-self-start : l’élément sera aligné en partant du début selon son axe secondaire ;
• .align-self-end : l’élément sera aligné en partant de la fin selon son axe secondaire ;
• .align-self-center : l’élément sera centré selon son axe secondaire ;
• .align-self-baseline : l’élément sera aligné par rapport à la ligne de base dans l’axe secondaire ;
• .align-self-stretch : valeur par défaut. L’élément va tenter de s’étendre dans l’axe secondaire de manière à remplir son conteneur.

Bootstrap nous permet d’appliquer une propriété position à des éléments grâce aux classes suivantes :

• .position-static ;
• .position-relative ;
• .position-absolute ;
• .position-fixed ;
• .position-sticky.

Les éléments sont positionnés avec position-static par défaut. Ce type de positionnement fait que les éléments sont normalement intégrés dans le flux de la page. Un élément positionné avec position-static ne pourra pas être repositionné avec les propriétés top, right, left et bottom.

Un élément positionné avec position-relative sera positionné relativement à sa position par défaut. On va utiliser les propriétés top, right, left et bottom pour déplacer ce type d’éléments relativement à leur position de départ (position par défaut).

l’élément est positionné avec position-absolute, l’élément sera positionné par rapport à son ancêtre le plus proche qui est positionné (avec une position différente de static). Si aucun ancêtre positionné ne peut être trouvé, l’élément sera positionné par rapport au viewport.

Dans le cas où l’élément est positionné avec position-fixed, l’élément sera toujours positionné par rapport au viewport.

Finalement, un élément positionné avec position-sticky sera intégré normalement dans le flux de la page puis positionné avec top, right, left et bottom par rapport à son ancêtre de défilement le plus proche et par rapport à son bloc englobant.

On peut également utiliser les classes .fixed-top (fixé en haut) et .fixed-bottom (fixé en bas).

La classe sticky-top va nous permettre de fixer un élément contre le bord supérieur de la fenêtre uniquement après qu’on l’ait dépassé dans la page (scrolling).

On va pouvoir contrôler l’état de visibilité de nos éléments grâce aux classes .visible (l’élément sera visible) et .invisible (l’élément sera invisible).
La différence d’un .d-none, la classe .invisible n’affecte pas la disposition des éléments dans la page (l'élément invisible conserve sa place, son espace dans la page).

On va pouvoir ajouter des ombres à nos éléments en utilisant les classes de type .shadow-* Bootstrap nous laisse choisir parmi les quatre classe suivantes :

• .shadow-none : aucune ombre
• .shadow-sm : ombre peu étendue
• .shadow : ombre moyennement étendue
• .shadow-lg : ombre étendue

Notez que les ombres seront grises et qu’on ne dispose pas de classe permettant de modifier leur couleur.

Les tableaux Bootstrap et ses différents styles

Images et figures

Style normal

Légèrement arrondie

Ellipse

Bordure 1px légèrement arondie

Faire flotter une image à gauche ou à droite avec les classes .float-left et .float-right.

Classe .d-block (pour « display : block ») et lui appliquer une marge auto avec la classe .mx-auto.

Classe .text-center.

On peut également faire en sorte que nos images soient responsives en leur appliquant la classe .img-fluid.

Boutons

Pour personnaliser l’aspect de nos boutons, nous allons utiliser la classe de base .btn et des classes de type .btn-*.

Pour des boutons avec des bordures colorées et un fond blanc, utilisons les classes .btn-outline-* avec les couleurs contextuelles

Pour des boutons plus petits ou plus grands que la taille par défaut utilisons les classes .btn-sm (bouton de petite taille) et .btn-lg (bouton de grande taille). Nous pouvons changer le type de display d’un bouton et le transformer en élément de type block grâce à la classe .btn-block.

Pour grouper plusieurs boutons utilisons la classe btn-group que l’on va appliquer à l’élément qui va contenir la série de boutons.

Les classes .btn-group-sm et .btn-group-lg s'appliquent également, ainsi que .btn-group-vertical pour un alignement vertical.

Boutons groupés avec menus déroulants (« dropdown » en anglais).

Boutons non-groupés avec menus déroulants.

Listes groupées

Mise en forme basique des listes, on va utiliser les classes .list-group sur l’élément représentant la liste et .list-group-item sur les éléments de la liste.
Les listes groupées ne sont pas ordonées ! Toutes les listes peuvent être colorés avec les classes .list-group-item-* (*= nom couleur.)

Liste horizontal avec .list-group-horizontal

• Premier élément de liste
• Deuxième élément de liste
• Troisième élément de liste

Listes de boutons ou de liens avec les classes .list-group .list-group-item et .list-group-item-action

Des «listes à onglets» pour afficher simplement un contenu différent selon l’élément de liste cliqué.

Navigation

Menus à onglets ou à pills avec les classes .nav-tabs et .nav-pills.
Ces classes vont notamment nous permettre d’utiliser la classe .active qui n’a aucun effet visible avec la classe de base .nav.

Fenêtre Pop-up

On peut découper notre fenêtre modale en trois parties avec .modal-header, .modal-body et .modal-footer.

Boites d’aide et popovers

D'autres boites de texte qui apparaissent lorsqu’un utilisateur passe sa souris sur un élément.

Barres de progression et spinners

Card

Pour définir une card, classe de base .card, puis une en-tête avec la classe .card-header, un corps .card-body et un pied avec card-footer.
On peut ajouter .card-title pour le titre, .card-subtitle pour les sous titres, .card-text pour le texte, .card-link pour les liens et pour les images .card-img, .card-img-top et .card-img-bottom et avec .card-img-overlay une image avec du texte par dessus.

En-tête

Corps

Pied

Titre

Sous titre

Du texte sous le titre dans le corps de carte

Un lien

Card-group :

Card-deck :

Si on souhaite que nos cartes soient alignées en colonne, c’est-à-dire de haut en bas d’abord et de gauche à droite ensuite, on peut également utiliser la classe .card-columns.
Voir plus

Le composant collapse permet aux utilisateurs d’afficher et de cacher des contenus avec un simple clic en changeant leur hauteur (on dit que leur hauteur s’effondre).
Créer un accordéon avec les composants card et collapse

Carrousel

Ajouter des contrôles, indicateurs et légende, changer le type d’animation et la vitesse de passage des diapositives du carrousel Voir ici