Dans cette leçon, nous allons voir quelles sont les différentes typographies et tailles proposées par Bootstrap 5, comment transformer un texte ou un titre en italique, en gras, et comment les aligner correctement.
La typographie de Bootstrap 5
Les titres vont de h1 à h6
La taille de chacun de ces titres va s’adapter automatiquement à la taille d’écran du visiteur.
Pour une résolution de 1200px ou plus, les tailles seront les suivantes :
- H1: 2.5 rem (40px)
- H2: 2 rem (32px)
- H3 :75 rem (28px)
- H4: 1.5 rem (24px)
- H5: 1.25 rem (20px)
- H6: 1 rem (16px)
Les titres ont en commun les caractéristiques suivantes:
- font-weight: 500 (gras)
- line-height: 1.2 rem (hauteur de ligne)
- margin-top: 0 (marge externe du haut)
- margin-bottom: 5 rem (marge externe du bas)
La taille des titres ne nécessite pas de faire appel à une classe.
Pour ce qui concerne le texte, les caractéristiques pour une résolution de 1200px et plus sont les suivantes :
- Taille : 1 rem (16px)
- font-weight : 400
L’espace entre les paragraphes est le suivant :
- margin-top: 0
- margin-bottom: 1rem
Comment changer la taille d’un titre et d’un texte avec Bootstrap 5 ?
Pour changer la taille d’un titre dans Bootstrap 5, on va devoir faire appel à une classe. Imaginons que nous voulions qu’un titre <h1> est la taille d’un titre <h3> ?
Pour ce faire, nous allons rajouter la classe .h3 a notre titre.
<h1 class= »h3″>Titre H1</h1>
Évidemment les mêmes classes peuvent servir à grossir la taille d’un texte.
<p class= »h3″>Taille du texte grossit en taille de titre h3</p>
Il est possible d’utiliser la balise <span> pour ne grossir qu’une partie d’un paragraphe.
<p>Grossissement d’une <span class= »h3″> seule partie</span> d’un texte. </p>
Il existe d’autres classes permettant d’affiner les tailles des titres et des paragraphes.
La classe display
Les classes .display vont permettre de choisir des tailles supérieures à la taille d’un titre <h1> qui est de 2.5 rem (40 px).
Ces classes sont aux nombres de 6 et offrent les tailles suivantes pour une résolution d’écran de 1200 px ou plus.
- display-1 5 rem (80px)
- display-2 5 rem (72px)
- display-3 4 rem (64px)
- display-4 5 rem (56px)
- display-5 3 rem (48px)
- display-6 5 rem (40px)
La classe small
La classe .small permet de réduire la taille l’intérieur d’un titre ou d’un paragraphe selon la taille d’origine de ces derniers.
les classes fs-* (font-size)
Enfin il est possible de changer les tailles avec les classes fs-* qui sont équivalentes au font-size sur du HTML classique.
Pour une résolution d’écran de 1200px ou plus, cela donne :
.fs-1 : 2.5 rem (40px) line-height 60px.
.fs-2 : 2 rem (32px) line-height 48px.
.fs-3 : 1.75 rem (28px) line-height 42px.
.fs-4 : 1.5 rem (24px) line-height 36px.
.fs-5 : 1.25 rem (20px) line-height 30px.
.fs-6 : 1 rem(16px) line-height 24px.
Comment transformer un texte avec Bootstrap 5 ?
Pour transformer du texte, vous allez vous servir des classes suivantes :
- .text-lowercase: texte en minuscule.
- .text-uppercase: texte en majuscule.
- .text-capitalize: chaque mot commence par une majuscule.
- .fst-italic: texte en italique.
- .fw-bold: texte en gras.
- .fw-light: texte plus fin.
Pour transformer du texte, vous allez vous servir des classes suivantes :
- .text-lowercase: texte en minuscule.
- .text-uppercase: texte en majuscule.
- .text-capitalize: chaque mot commence par une majuscule.
- .fst-italic: texte en italique.
- .fw-bold: texte en gras.
- .fw-light: texte plus fin.
Souligner ou rayer un texte avec Bootstrap 5
Ici, deux classes sont disponibles :
- .text-decoration-underline : Pour souligner du texte.
- .text-decoration-line-through : pour rayer du texte.
Comment changer la hauteur de ligne d'un texte ou d'un titre avec Bootstrap5 ?
Pour changer les hauteurs de ligne on va utiliser les classes .lh-* (line-height)
- .lh-1: 16px.
- .lh-sm: 20px.
- .lh-base: 24 px.
- .lh-lg: 32px.
Comment faire ressortir un paragraphe avec Bootstrap 5?
Il existe la classe .lead qui permet de mettre en avant un paragraphe par rapport aux autres.
<p class= »lead »> Paragraphe mis en avant. </p>
Vous pouvez aussi utiliser les balises HTML classiques comme :
- <abbr>
- <mark>
- Etc
Pour plus d’information, je vous invite à vous rendre à cette adresse : Typographie Bootstrap 5
L’alignement des titres et des paragraphes avec Bootstrap 5
Bootstrap 5 fournit toutes les classes nécessaires pour aligner les titres et les paragraphes très facilement.
Attention, les classes de la version 5 de Bootstrap ont changé par rapport aux versions précédentes, elles reprennent désormais la logique de flexbox.
https://www.booglit.com/flexbox-partie-2/
.text-left est devenu .text-start et .text-right est devenu .text-end .
- .text-start: alignement à gauche sur toutes les résolutions d’écran.
- .text-center: alignement au centre sur toutes les résolutions d’écran.
- .text-end: alignement à droite sur toutes les résolutions d’écran.
Ces alignements sont identiques, peu importe la résolution d’écran. Pour obtenir un alignement différent selon la résolution d’écran, on va utiliser des Breakpoints (point de transition).
Ps : Si vous découvrez Bootstrap et ne savez pas ce que sont les « Breakpoints » ne vous inquiétez pas nous y avons consacré une leçon entière que vous pouvez consulter ici : Les Breakpoints dans Bootstrap 5.
- .text-sm-center : centrera le texte que sur les résolutions d’écran ≥ 576px.
- .text-md-start : alignera le texte à gauche seulement sur les résolutions ≥768px.
- .text-lg-end : alignera le texte à droite seulement sur les résolutions ≥992px.
- .text-xl-center : centrera le texte que sur les résolutions d’écran ≥ 1200px.
≥ : supérieur ou égal a
