La typographie et l’alignement des titres et des textes dans Bootstrap 5

La typographie et l’alignement des titres et des textes dans Bootstrap 5

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.

Table des matieres

La typographie de Bootstrap 5

Les titres vont de h1 à h6

La typographie et l’alignement des titres et des textes dans Bootstrap 5

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>

changer la taille d’un titre avec Bootstrap 5

É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>

Comment changer la taille d’un titre et d’un texte avec Bootstrap 5 ?

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)
classe display changer taille titre et texte bootstrap 5

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.

bootstrap 5 classe small

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.

changer taille titre et texte bootstrap 5-min

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.
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.
Souligner ou rayer un texte avec bootstrap 5

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.
Souligner ou rayer un texte avec bootstrap 5

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 changer la hauteur de ligne d'un texte ou d'un titre avec Bootstrap5 ?

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>

Comment faire ressortir un paragraphe avec bootstrap 5 ?

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.
alignement des paragraphes bootstrap 5

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

alignement des paragraphes et des titres avec bootstrap 5
Nous serions ravis de connaître votre avis

Laisser un commentaire

error: Content is protected !!
 
BOOGLIT
Logo
Enable registration in settings - general
Compare items
  • Total (0)
Compare
0