Appliquer la typographie avec Bootstrap4

Bootstrap4 reprend tous les éléments de la typographie du langage HTML5 avec un style plus propre et bien présentable. Bootstrap4 a intégré directement les styles aux balises de typographie de HTML5 et propose dans la même foulée des classes qui jouent le même rôle que ces éléments HTML. Ces classes sont reconnaissables par leur nom, car elles portent le nom des éléments HTML5 avec lesquels elles partagent le même rôle. Ainsi pour réaliser un titre de premier niveau, que vous utilisez la balise h1 ou la classe .h1 le résultat sera le même. Exemple :

<h1>Salut je suis un titre de premier niveau</h1>
<p class="h1">Salut je suis un titre de premier niveau</p>

Résultat :

Mise en exergue d’un paragraphe ou d’un mot particulier :

Sur les pages web vu la pertinence d’un paragraphe ou d’un mot, il sera convenable de mettre en avant cet élément par rapport aux autres. Pour réaliser cela avec Bootstrap4 il faut utiliser la classe .lead. Exemple : Mise en avant d’un paragraphe par rapport aux autres

<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

Résultat : Exemple : Mise en avant d’un mot par rapport aux autres

<p> <span class="lead">Lorem</span> ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat.
</p>

Résultat : Remarque : Dans cet paragraphe vous remarquerez que le premier mot est différent des autres mot du paragraphe.

Alignement du texte :

Par défaut le texte est aligné à gauche du paragraphe, mais vous pouvez centré le texte au milieu à l’aide de la classe .text-center ou soit positionné le texte à droite à l’aide de la classe .text-right Exemple : positionnons le contenu du premier paragraphe au milieu et le contenu du second paragraphe à droite

<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat.
</p>
<p class="text-right">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat.
</p>

Résultat :

Définissez la couleur de votre texte :

Bootstrap4 met à notre disposition un panel de 9 différentes couleurs pour styliser vos textes : .text-white : octroie la couleur blanche au texte .text-light : octroie la couleur grise claire au texte .text-secondary : octroie la couleur grise foncée au texte .text-dark : octroie la couleur noire au texte .text-primary : octroie la couleur bleu claire au texte .text-info : octroie la couleur bleu ciel au texte .text-danger : octroie la couleur  rouge au texte .text-warning : octroie la couleur orange au texte .text-success : octroie la couleur verte au texte Exemple :

<p class="text-white bg-dark">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p> 
<p class="text-light ">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p> 
<p class="text-secondary ">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p> 
<p class="text-dark ">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p> 
<p class="text-primary ">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p> 
<p class="text-info ">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p> 
<p class="text-danger ">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p> 
<p class="text-warning ">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p> 
<p class="text-success ">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>

Résultat: Cours précédent                                                                               Cours suivant Voir la table des matières J’envoie régulièrement des astuces et techniques peu connus sur le développement web à un groupe privé de personnes… Je leur envoie des contenus gratuits, des tutoriels sur Bootstrap et ils bénéficient aussi de mes propres créations (thèmes premiums, composants et éléments d’interface). Ils sont aussi mis au courant dès que les thèmes premiums et plugins premiums sont au tarif promotionnel sur les meilleures marketplaces. Une fois inscrit, tu reçois gratuitement  mon livre Prise en main de Bootstrap 4 et un thème premium. Clique ici pour rejoindre le groupe privé et bénéficier de tous ces avantages.