Il existe des classes d'alignement général ainsi que des classes gérant l'alignement en fonction des devices sm, md, lg, xl et xxl.
Start aligned text on all viewport sizes.
Center aligned text on all viewport sizes.
End aligned text on all viewport sizes.
End aligned text on viewports sized SM (small) or wider.
End aligned text on viewports sized MD (medium) or wider.
End aligned text on viewports sized LG (large) or wider.
End aligned text on viewports sized XL (extra large) or wider.
End aligned text on viewports sized XXL (extra extra large) or wider.
<p class="text-start">Start aligned text on all viewport sizes.</p> <p class="text-center">Center aligned text on all viewport sizes.</p> <p class="text-end">End aligned text on all viewport sizes.</p> <p class="text-sm-end">End aligned text on viewports sized SM (small) or wider.</p> <p class="text-md-end">End aligned text on viewports sized MD (medium) or wider.</p> <p class="text-lg-end">End aligned text on viewports sized LG (large) or wider.</p> <p class="text-xl-end">End aligned text on viewports sized XL (extra large) or wider.</p> <p class="text-xxl-end">End aligned text on viewports sized XXL (extra extra large) or wider.</p>
Ajoutez la classe .text-wrap pour obtenir un retour à la ligne et .text-nowrap pour ne pas l'autoriser.
<div class="badge text-bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
<div class="text-nowrap bg-body-secondary border" style="width: 8rem;">
This text should overflow the parent.
</div>
Permet de gérer les textes longs afin qu'un retour à la ligne soit possible sans espace entre des mots.
La classe .text-break équivaut à donner les propriétés css word-break et word-wrap à break-word.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
Gérez la mise en majuscule comme dans les exemples ci-dessous :
Lowercased text.
Uppercased text.
CapiTaliZed text.
<p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">CapiTaliZed text.</p>
Gérer la taille de la police via les classes utilitaires .fs-1 à .fs-6.
.fs-1 text
.fs-2 text
.fs-3 text
.fs-4 text
.fs-5 text
.fs-6 text
<p class="fs-1">.fs-1 text</p> <p class="fs-2">.fs-2 text</p> <p class="fs-3">.fs-3 text</p> <p class="fs-4">.fs-4 text</p> <p class="fs-5">.fs-5 text</p> <p class="fs-6">.fs-6 text</p>
Bold text.
Bolder weight text (relative to the parent element).
Semibold weight text.
Medium weight text.
Normal weight text.
Light weight text.
Lighter weight text (relative to the parent element).
Italic text.
Text with normal font style
<p class="fw-bold">Bold text.</p> <p class="fw-bolder">Bolder weight text (relative to the parent element).</p> <p class="fw-semibold">Semibold weight text.</p> <p class="fw-medium">Medium weight text.</p> <p class="fw-normal">Normal weight text.</p> <p class="fw-light">Light weight text.</p> <p class="fw-lighter">Lighter weight text (relative to the parent element).</p> <p class="fst-italic">Italic text.</p> <p class="fst-normal">Text with normal font style</p>
Modification de la hauteur de ligne via .lh-*.
This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.
This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.
This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.
This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.
<p class="lh-1">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p> <p class="lh-sm">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p> <p class="lh-base">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p> <p class="lh-lg">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
Utiliser .font-monospace pour utiliser la police monospace du framework.
This is in monospace
<p class="font-monospace">This is in monospace</p>
Réinitialisation de la couleur d'un texte via l'utilisation de .text-reset qui redonne la couleur du parent à l'élément ciblé.
Muted text with a reset link vs classic link.
<p class="text-muted"> Muted text with a <a href="#" class="text-reset">reset link</a> vs <a href="#">classic link</a>. </p>
This text has a line underneath it.
This text has a line going through it.
This link has its text decoration removed<p class="text-decoration-underline">This text has a line underneath it.</p> <p class="text-decoration-line-through">This text has a line going through it.</p> <a href="#" class="text-decoration-none">This link has its text decoration removed</a>
// stylelint-disable value-keyword-case
$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
// stylelint-enable value-keyword-case
$font-family-base: var(--#{$prefix}font-sans-serif);
$font-family-code: var(--#{$prefix}font-monospace);
// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
// $font-size-base affects the font size of the body text
$font-size-root: null;
$font-size-base: 1rem; // Assumes the browser default, typically `16px`
$font-size-sm: $font-size-base * .875;
$font-size-lg: $font-size-base * 1.25;
$font-weight-lighter: lighter;
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-semibold: 600;
$font-weight-bold: 700;
$font-weight-bolder: bolder;
$font-weight-base: $font-weight-normal;
$line-height-base: 1.5;
$line-height-sm: 1.25;
$line-height-lg: 2;
$h1-font-size: $font-size-base * 2.5;
$h2-font-size: $font-size-base * 2;
$h3-font-size: $font-size-base * 1.75;
$h4-font-size: $font-size-base * 1.5;
$h5-font-size: $font-size-base * 1.25;
$h6-font-size: $font-size-base;