Bootstrap 5 : utilitaires


Table des matières

    Afficher la table des matières

Utilitaires/Classes d'assistance

Bootstrap 5 dispose de nombreuses classes utilitaires/assistantes pour styliser rapidement les éléments sans utiliser de code CSS.

Les frontières

Utilisez les classes border pour ajouter ou supprimer des bordures d'un élément :

Exemple


<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-end-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-start-0"></span>
<br>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>

Essayez-le vous-même →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <style>
  span {
    display: inline-block;
    width: 70px;
    height: 70px;
    margin: 6px;
    background-color: #f9f9f9;
  }
  </style>
</head>
<body>

<div class="container mt-3">
  <h2>Borders</h2>
  <p>Use the border classes to add or remove borders from an element:</p> 

  <span class="border"></span>
  <span class="border border-0"></span>
  <span class="border border-top-0"></span>
  <span class="border border-end-0"></span>
  <span class="border border-bottom-0"></span>
  <span class="border border-start-0"></span>
  <br>
  
  <span class="border-top"></span>
  <span class="border-end"></span>
  <span class="border-bottom"></span>
  <span class="border-start"></span>
</div>

</body>
</html>

Largeur de la bordure

Utilisez .border-1 pour .border-5 pour modifier la largeur de la bordure :

Exemple

<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>

Essayez-le vous-même →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <style>
  span {
    display: inline-block;
    width: 70px;
    height: 70px;
    margin: 6px;
    background-color: #f9f9f9;
  }
  </style>
</head>
<body>

<div class="container mt-3">
  <h2>Border Width</h2>
  <p>Use .border-1 to .border-5 to change the width of the border:</p> 

  <span class="border border-1"></span>
  <span class="border border-2"></span>
  <span class="border border-3"></span>
  <span class="border border-4"></span>
  <span class="border border-5"></span>
</div>

</body>
</html>

Couleur de la bordure

Ajoutez une couleur à la bordure avec l'une des classes de couleurs de bordure contextuelles :

Exemple

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

Essayez-le vous-même →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <style>
  .border {
    display: inline-block;
    width: 70px;
    height: 70px;
    margin: 6px;
  }
  </style>
</head>
<body>

<div class="container mt-3">
  <h2>Borders</h2>
  <p>Use a contextual border color to add a color to the border:</p> 
  <span class="border border-primary"></span>
  <span class="border border-secondary"></span>
  <span class="border border-success"></span>
  <span class="border border-danger"></span>
  <span class="border border-warning"></span>
  <span class="border border-info"></span>
  <span class="border border-light"></span>
  <span class="border border-dark"></span>
  <span class="border border-white"></span>
</div>

</body>
</html>

Rayon de frontière

Ajoutez des coins arrondis à un élément avec les classes arrondi :

Exemple


<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-end"></span>
<span class="rounded-bottom"></span>
<span class="rounded-start"></span>
<span class="rounded-circle"></span>
<span class="rounded-pill" style="width:130px"></span>
<span class="rounded-0"></span>
<span class="rounded-1"></span>
<span class="rounded-2"></span>
<span class="rounded-3"></span>
<span class="rounded-4"></span>
<span class="rounded-5"></span>

Essayez-le vous-même →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <style>
  span {
    display: inline-block;
    width: 70px;
    height: 70px;
    margin: 6px;
    background-color: #555;
  }
  </style>
</head>
<body>

<div class="container mt-3">
  <h2>Borders</h2>
  <p>Round the corner of an element with the rounded classes:</p> 
  <span class="rounded"></span>
  <span class="rounded-top"></span>
  <span class="rounded-end"></span>
  <span class="rounded-bottom"></span>
  <span class="rounded-start"></span>
  <span class="rounded-circle"></span>
  <span class="rounded-pill" style="width:130px"></span>
  <br>
  <span class="rounded-0"></span>
  <span class="rounded-1"></span>
  <span class="rounded-2"></span>
  <span class="rounded-3"></span>
  <span class="rounded-4"></span>
  <span class="rounded-5"></span>
</div>

</body>
</html>

Flotteur et Clearfix

Faites flotter un élément vers la droite avec la classe .float-end ou vers la gauche avec .float-start , et effacez les flottants avec la classe .clearfix :

Exemple

Float left Float right
<div class="clearfix">
  <span class="float-start">Float left</span>
  <span class="float-end">Float right</span>
</div>

Essayez-le vous-même →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Float</h2>
  <p>Float an element to the right with the .float-end class or to the left with .float-start, and clear floats with the .clearfix class.</p> 
  <div class="clearfix">
    <span class="float-start">Float left</span>
    <span class="float-end">Float right</span>
  </div>
</div>

</body>
</html>

Flotteurs réactifs

Faites flotter un élément vers la gauche ou vers la droite en fonction de la largeur de l'écran, avec les classes float réactives (.float-*-start|end - où * est sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) ou xxl (>=1400px )):

Exemple

Float right on small screens or wider

Float right on medium screens or wider

Float right on large screens or wider

Float right on extra large screens or wider

Float right on XXL screens or wider

Float none
<div class="float-sm-end">Float right on small screens or wider</div><br>
<div class="float-md-end">Float right on medium screens or wider</div><br>
<div class="float-lg-end">Float right on large screens or wider</div><br>
<div class="float-xl-end">Float right on extra large screens or wider</div><br>
<div class="float-xxl-end">Float right on XXL screens or wider</div><br>
<div class="float-none">Float none</div>

Essayez-le vous-même →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Responsive Floats</h2>
  <p>Float an element to the left or to the right depending on screen width, with the responsive float classes .float-*-left|right (where * is sm, md, lg, xl or xxl).</p>
  <p>Resize the browser window to see the effect.</p> 
  <div class="clearfix">
    <div class="float-sm-end">Float right on small screens or wider</div><br>
    <div class="float-md-end">Float right on medium screens or wider</div><br>
    <div class="float-lg-end">Float right on large screens or wider</div><br>
    <div class="float-xl-end">Float right on extra large screens or wider</div><br>
    <div class="float-xxl-end">Float right on XXL screens or wider</div><br>
    <div class="float-none">Float none</div>
  </div>
</div>

</body>
</html>

Aligner au centre

Centrer un élément avec la classe .mx-auto (ajoute margin-left et marge-droite : auto) :

Exemple

Centered
<div class="mx-auto bg-warning" style="width:150px">Centered</div>

Essayez-le vous-même →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Horizontal Centering</h1>
  <p>Center an element with the .mx-auto class:</p>
  <div class="mx-auto bg-warning" style="width:150px">Centered</div>
</div>

</body>
</html>

Largeur

Définissez la largeur d'un élément avec les classes w-* (.w-25, .w-50 , .w-75, .w-100, . w-auto et .mw-100) :

Exemple

Width 25%
Width 50%
Width 75%
Width 100%
Auto Width
Max Width 100%
<div class="w-25 bg-warning">Width 25%</div>
<div class="w-50 bg-warning">Width 50%</div>
<div class="w-75 bg-warning">Width 75%</div>
<div class="w-100 bg-warning">Width 100%</div>
<div class="w-auto bg-warning">Auto Width</div>
<div class="mw-100 bg-warning">Max Width 100%</div>

Essayez-le vous-même →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Width Utilities</h1>
  <p>Set the width of an element with the w-* classes:</p>
  <div class="w-25 bg-warning">Width 25%</div>
  <div class="w-50 bg-warning">Width 50%</div>
  <div class="w-75 bg-warning">Width 75%</div>
  <div class="w-100 bg-warning">Width 100%</div>
  <div class="w-auto bg-warning">Auto Width</div>
  <div class="mw-100 bg-warning">Max Width 100%</div>
</div>

</body>
</html>

Hauteur

Définissez la hauteur d'un élément avec les classes h-* (.h-25, .h-50 , .h-75, .h-100, . h-auto et .mh-100) :

Exemple

Height 25%
Height 50%
Height 75%
Height 100%
Auto Height
Max Height 100%
<div style="height:200px;background-color:#ddd">
  <div class="h-25 bg-warning">Height 25%</div>
  <div class="h-50 bg-warning">Height 50%</div>
  <div class="h-75 bg-warning">Height 75%</div>
  <div class="h-100 bg-warning">Height 100%</div>
  <div class="h-auto bg-warning">Auto Height</div>
  <div class="mh-100 bg-warning" style="height:500px">Max Height 100%</div>
</div>

Essayez-le vous-même →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Height Utilities</h1>
  <p>Set the height of an element with the h-* classes:</p>
  <div style="height:200px;background-color:#ddd">
    <div class="h-25 d-inline-block p-2 bg-warning">Height 25%</div>
    <div class="h-50 d-inline-block p-2 bg-warning">Height 50%</div>
    <div class="h-75 d-inline-block p-2 bg-warning">Height 75%</div>
    <div class="h-100 d-inline-block p-2 bg-warning">Height 100%</div>
    <div class="h-auto d-inline-block p-2 bg-warning">Auto Height</div>
    <div class="mh-100 d-inline-block p-2 bg-warning" style="height:500px">Max Height 100%</div>
  </div>
</div>

</body>
</html>

Espacement

Bootstrap 5 propose une large gamme de classes utilitaires de marge et de remplissage réactives. Ils fonctionnent pour tous les points d'arrêt : xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) ou xxl (>=1400px)) :

Les classes sont utilisées au format : {property}{sides}-{size} pour xs et < code class="w3-codespan">{property}{sides}-{breakpoint}-{size} pour sm, md, lg, xl et xxl.

Où propriété est l'une des valeurs suivantes :

  • m - définit la marge

  • p - définit le padding

Où côtés est l'un des :

  • t - définit margin-top ou padding-top

  • b - définit margin-bottom ou padding-bottom

  • s - définit margin-left ou padding-left

  • e - définit margin-right ou padding-right

  • x - définit à la fois padding-left et padding-right ou margin-left et margin-right

  • y - définit à la fois padding-top et padding-bottom ou marge supérieure et marge inférieure

  • vide - définit une marge ou un padding sur les 4 côtés de l'élément

Où taille est l'un des éléments suivants :

  • 0 - définit la marge ou le padding sur < code class="w3-codespan">0

  • 1 - définit la marge ou le padding sur < code class="w3-codespan">.25rem

  • 2 - définit la marge ou le padding sur < code class="w3-codespan">.5rem

  • 3 - définit la marge ou le padding sur < code class="w3-codespan">1rem

  • 4 - définit la marge ou le padding sur < code class="w3-codespan">1.5rem

  • 5 - définit la marge ou le padding sur < code class="w3-codespan">3rem

  • auto - définit la marge sur auto

Exemple

I only have a top padding (1.5rem)
I have a padding on all sides (3rem)
I have a margin on all sides (3rem) and a bottom padding (3rem)
<div class="pt-4 bg-warning">I only have a top padding (1.5rem)</div>
<div class="p-5 bg-success">I have a padding on all sides (3rem)</div>
<div class="m-5 pb-5 bg-info">I have a margin on all sides (3rem) and a bottom padding (3rem)</div>

Essayez-le vous-même →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Spacing Utilities</h1>
  <p>Set the spacing of an element with the {property}{sides}-{breakpoint}-{size} classes. Omit breakpoint if you want the padding or margin to work on all screen sizes.</p>
  <div class="pt-4 bg-warning">I only have a top padding (1.5rem)</div>
  <div class="p-5 bg-success">I have a padding on all sides (3rem)</div>
  <div class="m-5 pb-5 bg-info">I have a margin on all sides (3rem) and a bottom padding (3rem)</div>
</div>

</body>
</html>

Plus d'exemples d'espacement

.m-# / m-*-#

Description : marge sur tous les côtés

Essayez-le

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Spacing Utilities</h1>
  <p>Set the spacing of an element with the {property}{sides}-{breakpoint}-{size} classes. Omit breakpoint if you want the padding or margin to work on all screen sizes.</p>
  <div class="pt-4 bg-warning">I only have a top padding (1.5rem)</div>
  <div class="p-5 bg-success">I have a padding on all sides (3rem)</div>
  <div class="m-5 pb-5 bg-info">I have a margin on all sides (3rem) and a bottom padding (3rem)</div>
</div>

</body>
</html>

.mt-# / mt-*-#

Description : marge supérieure

Essayez-le

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Margin Top Utilities</h1>
  <div class="mt-0 bg-warning">Margin Top 0</div>
  <div class="mt-1 bg-warning">Margin Top 1</div>
  <div class="mt-2 bg-warning">Margin Top 2</div>
  <div class="mt-3 bg-warning">Margin Top 3</div>
  <div class="mt-4 bg-warning">Margin Top 4</div>
  <div class="mt-5 bg-warning">Margin Top 5</div>
  <div class="mt-auto bg-warning" style="width:150px">Margin Top Auto</div>
  <br>

  <p>Responsive margin top utilities. Resize the browser window to see the effect:</p>
  <div class="mt-sm-5 bg-warning">Margin Top 5 on SM screens</div>
  <div class="mt-md-5 bg-warning">Margin Top 5 on MD screens</div>
  <div class="mt-lg-5 bg-warning">Margin Top 5 on LG screens</div>
  <div class="mt-xl-5 bg-warning">Margin Top 5 on XL screens</div>
</div>

</body>
</html>

.mb-# / mb-*-#

Description : marge inférieure

Essayez-le

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Margin Bottom Utilities</h1>
  <div class="mb-0 bg-warning">Margin Bottom 0</div>
  <div class="mb-1 bg-warning">Margin Bottom 1</div>
  <div class="mb-2 bg-warning">Margin Bottom 2</div>
  <div class="mb-3 bg-warning">Margin Bottom 3</div>
  <div class="mb-4 bg-warning">Margin Bottom 4</div>
  <div class="mb-5 bg-warning">Margin Bottom 5</div>
  <div class="mb-auto bg-warning" style="width:150px">Margin Bottom Auto</div>
  <br>

  <p>Responsive margin bottom utilities. Resize the browser window to see the effect:</p>
  <div class="mb-sm-5 bg-warning">Margin Bottom 5 on SM screens</div>
  <div class="mb-md-5 bg-warning">Margin Bottom 5 on MD screens</div>
  <div class="mb-lg-5 bg-warning">Margin Bottom 5 on LG screens</div>
  <div class="mb-xl-5 bg-warning">Margin Bottom 5 on XL screens</div>
</div>

</body>
</html>

.ms-# / ms-*-#

Description : marge gauche

Essayez-le

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Margin Left Utilities</h1>
  <div class="ms-0 bg-warning">Margin Left 0</div>
  <div class="ms-1 bg-warning">Margin Left 1</div>
  <div class="ms-2 bg-warning">Margin Left 2</div>
  <div class="ms-3 bg-warning">Margin Left 3</div>
  <div class="ms-4 bg-warning">Margin Left 4</div>
  <div class="ms-5 bg-warning">Margin Left 5</div>
  <div class="ms-auto bg-warning" style="width:150px">Margin Left Auto</div>

  <p>Responsive margin left utilities. Resize the browser window to see the effect:</p>
  <div class="ms-sm-5 bg-warning">Margin Left 5 on SM screens</div>
  <div class="ms-md-5 bg-warning">Margin Left 5 on MD screens</div>
  <div class="ms-lg-5 bg-warning">Margin Left 5 on LG screens</div>
  <div class="ms-xl-5 bg-warning">Margin Left 5 on XL screens</div>
</div>

</body>
</html>

.me-# / me-*-#

Description : marge à droite

Essayez-le

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Margin Right Utilities</h1>
  <div class="me-0 bg-warning">Margin Right 0</div>
  <div class="me-1 bg-warning">Margin Right 1</div>
  <div class="me-2 bg-warning">Margin Right 2</div>
  <div class="me-3 bg-warning">Margin Right 3</div>
  <div class="me-4 bg-warning">Margin Right 4</div>
  <div class="me-5 bg-warning">Margin Right 5</div>
  <div class="me-auto bg-warning" style="width:150px">Margin Right Auto</div>
  <br>
  
  <p>Responsive margin left utilities. Resize the browser window to see the effect:</p>
  <div class="me-sm-5 bg-warning">Margin Right on SM screens</div>
  <div class="me-md-5 bg-warning">Margin Right on MD screens</div>
  <div class="me-lg-5 bg-warning">Margin Right on LG screens</div>
  <div class="me-xl-5 bg-warning">Margin Right on XL screens</div>
</div>

</body>
</html>

.mx-# / mx-*-#

Description : marge gauche et droite

Essayez-le

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Margin Left and Right Utilities</h1>
  <p>Margin X utilities:</p>
  <div class="mx-0 bg-warning">Margin X 0</div>
  <div class="mx-1 bg-warning">Margin X 1</div>
  <div class="mx-2 bg-warning">Margin X 2</div>
  <div class="mx-3 bg-warning">Margin X 3</div>
  <div class="mx-4 bg-warning">Margin X 4</div>
  <div class="mx-5 bg-warning">Margin X 5</div>
  <div class="mx-auto bg-warning" style="width:150px">Margin X Auto</div>
  <br>
  
  <p>Responsive margin x utilities. Resize the browser window to see the effect:</p>
  <div class="mx-sm-5 bg-warning">Margin X 5 on SM screens</div>
  <div class="mx-md-5 bg-warning">Margin X 5 on MD screens</div>
  <div class="mx-lg-5 bg-warning">Margin X 5 on LG screens</div>
  <div class="mx-xl-5 bg-warning">Margin X 5 on XL screens</div>
</div>

</body>
</html>

.my-# / my-*-#

Description : marge supérieure et inférieure

Essayez-le

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Margin Top and Bottom Utilities</h1>
  <p>Margin Y utilities:</p>
  <div class="my-0 bg-warning">Margin Y 0</div>
  <div class="my-1 bg-warning">Margin Y 1</div>
  <div class="my-2 bg-warning">Margin Y 2</div>
  <div class="my-3 bg-warning">Margin Y 3</div>
  <div class="my-4 bg-warning">Margin Y 4</div>
  <div class="my-5 bg-warning">Margin Y 5</div>
  <div class="my-auto bg-warning">Margin Y Auto</div>
  <br>
  
  <p>Responsive margin y utilities. Resize the browser window to see the effect:</p>
  <div class="my-sm-5 bg-warning">Margin Y 5 on SM screens</div>
  <div class="my-md-5 bg-warning">Margin Y 5 on MD screens</div>
  <div class="my-lg-5 bg-warning">Margin Y 5 on LG screens</div>
  <div class="my-xl-5 bg-warning">Margin Y 5 on XL screens</div>
</div>

</body>
</html>

.p-# / p-*-#

Description : rembourrage sur tous les côtés

Essayez-le

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Padding Utilities</h1>
  <div class="p-0 bg-warning">Padding 0</div>
  <div class="p-1 bg-success">Padding 1</div>
  <div class="p-2 bg-danger">Padding 2</div>
  <div class="p-3 bg-primary">Padding 3</div>
  <div class="p-4 bg-light">Padding 4</div>
  <div class="p-5 bg-info">Padding 5</div>
  <br>

  <p>Responsive padding utilities. Resize the browser window to see the effect:</p>
  <div class="p-sm-5 bg-warning">Padding 5 on SM screens</div>
  <div class="p-md-5 bg-success">Padding 5 on MD screens</div>
  <div class="p-lg-5 bg-danger">Padding 5 on LG screens</div>
  <div class="p-xl-5 bg-primary">Padding 5 on XL screens</div>
</div>

</body>
</html>

.pt-# / pt-*-#

Description : dessus de rembourrage

Essayez-le

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Padding Top Utilities</h1>
  <div class="pt-0 bg-warning">Padding Top 0</div>
  <div class="pt-1 bg-success">Padding Top 1</div>
  <div class="pt-2 bg-danger">Padding Top 2</div>
  <div class="pt-3 bg-primary">Padding Top 3</div>
  <div class="pt-4 bg-light">Padding Top 4</div>
  <div class="pt-5 bg-info">Padding Top 5</div>
  <br>

  <p>Responsive padding top utilities. Resize the browser window to see the effect:</p>
  <div class="pt-sm-5 bg-warning">Padding Top 5 on SM screens</div>
  <div class="pt-md-5 bg-success">Padding Top 5 on MD screens</div>
  <div class="pt-lg-5 bg-danger">Padding Top 5 on LG screens</div>
  <div class="pt-xl-5 bg-primary">Padding Top 5 on XL screens</div>
</div>

</body>
</html>

.pb-# / pb-*-#

Description : fond de rembourrage

Essayez-le

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Padding Bottom Utilities</h1>
  <div class="pb-0 bg-warning">Padding Bottom 0</div>
  <div class="pb-1 bg-success">Padding Bottom 1</div>
  <div class="pb-2 bg-danger">Padding Bottom 2</div>
  <div class="pb-3 bg-primary">Padding Bottom 3</div>
  <div class="pb-4 bg-light">Padding Bottom 4</div>
  <div class="pb-5 bg-info">Padding Bottom 5</div>
  <br>

  <p>Responsive padding bottom utilities. Resize the browser window to see the effect:</p>
  <div class="pb-sm-5 bg-warning">Padding Bottom 5 on SM screens</div>
  <div class="pb-md-5 bg-success">Padding Bottom 5 on MD screens</div>
  <div class="pb-lg-5 bg-danger">Padding Bottom 5 on LG screens</div>
  <div class="pb-xl-5 bg-primary">Padding Bottom 5 on XL screens</div>
</div>

</body>
</html>

.ps-# / ps-*-#

Description : rembourrage à gauche

Essayez-le

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Padding Left Utilities</h1>
  <div class="ps-0 bg-warning">Padding Left 0</div>
  <div class="ps-1 bg-success">Padding Left 1</div>
  <div class="psl-2 bg-danger">Padding Left 2</div>
  <div class="ps-3 bg-primary">Padding Left 3</div>
  <div class="ps-4 bg-light">Padding Left 4</div>
  <div class="ps-5 bg-info">Padding Left 5</div>
  <br>

  <p>Responsive padding left utilities. Resize the browser window to see the effect:</p>
  <div class="ps-sm-5 bg-warning">Padding Left 5 on SM screens</div>
  <div class="ps-md-5 bg-success">Padding Left 5 on MD screens</div>
  <div class="ps-lg-5 bg-danger">Padding Left 5 on LG screens</div>
  <div class="ps-xl-5 bg-primary">Padding Left 5 on XL screens</div>
</div>

</body>
</html>

.pe-# / pe-*-#

Description : remplissage à droite

Essayez-le

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Padding Right Utilities</h1>
  <div class="pe-0 bg-warning text-end">Padding Right 0</div>
  <div class="pe-1 bg-success text-end">Padding Right 1</div>
  <div class="pe-2 bg-danger text-end">Padding Right 2</div>
  <div class="pe-3 bg-primary text-end">Padding Right 3</div>
  <div class="pe-4 bg-light text-end">Padding Right 4</div>
  <div class="pe-5 bg-info text-end">Padding Right 5</div>
  <br>

  <p>Responsive padding right utilities. Resize the browser window to see the effect:</p>
  <div class="pe-sm-5 bg-warning text-end">Padding Right 5 on SM screens</div>
  <div class="pe-md-5 bg-success text-end">Padding Right 5 on MD screens</div>
  <div class="pe-lg-5 bg-danger text-end">Padding Right 5 on LG screens</div>
  <div class="pe-xl-5 bg-primary text-end">Padding Right 5 on XL screens</div>
</div>

</body>
</html>

.py-# / py-*-#

Description : rembourrage supérieur et inférieur

Essayez-le

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Padding Top and Bottom Utilities</h1>
  <p>Padding y utilities:</p>
  <div class="py-0 bg-warning">Padding Y 0</div>
  <div class="py-1 bg-success">Padding Y 1</div>
  <div class="py-2 bg-danger">Padding Y 2</div>
  <div class="py-3 bg-primary">Padding Y 3</div>
  <div class="py-4 bg-light">Padding Y 4</div>
  <div class="py-5 bg-info">Padding Y 5</div>
  <br>

  <p>Responsive padding y utilities. Resize the browser window to see the effect:</p>
  <div class="py-sm-5 bg-warning">Padding Y 5 on SM screens</div>
  <div class="py-md-5 bg-success">Padding Y 5 on MD screens</div>
  <div class="py-lg-5 bg-danger">Padding Y 5 on LG screens</div>
  <div class="py-xl-5 bg-primary">Padding Y 5 on XL screens</div>
</div>

</body>
</html>

.px-# / px-*-#

Description : remplissage à gauche et à droite

Essayez-le

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Padding Left and Right Utilities</h1>
  <p>Padding x utilities:</p>
  <div class="px-0 bg-warning">Padding X 0</div>
  <div class="px-1 bg-success">Padding X 1</div>
  <div class="px-2 bg-danger">Padding X 2</div>
  <div class="px-3 bg-primary">Padding X 3</div>
  <div class="px-4 bg-light">Padding X 4</div>
  <div class="px-5 bg-info">Padding X 5</div>
  <br>

  <p>Responsive padding x utilities. Resize the browser window to see the effect:</p>
  <div class="px-sm-5 bg-warning">Padding X 5 on SM screens</div>
  <div class="px-md-5 bg-success">Padding X 5 on MD screens</div>
  <div class="px-lg-5 bg-danger">Padding X 5 on LG screens</div>
  <div class="px-xl-5 bg-primary">Padding X 5 on XL screens</div>
</div>

</body>
</html>

Ombres

Utilisez les classes shadow- pour ajouter des ombres à un élément :

Exemple

No shadow
Small shadow
Default shadow
Large shadow
<div class="shadow-none p-4 mb-4 bg-light">No shadow</div>
<div class="shadow-sm p-4 mb-4 bg-white">Small shadow</div>
<div class="shadow p-4 mb-4 bg-white">Default shadow</div>
<div class="shadow-lg p-4 mb-4 bg-white">Large shadow</div>

Essayez-le vous-même →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Shadows</h1>
  <p>Use the shadow- classes to to add shadows to an element:</p>
  <div class="shadow-none p-4 mb-4 bg-light">No shadow</div>
  <div class="shadow-sm p-4 mb-4 bg-white">Small shadow</div>
  <div class="shadow p-4 mb-4 bg-white">Default shadow</div>
  <div class="shadow-lg p-4 mb-4 bg-white">Large shadow</div>
</div>

</body>
</html>

Alignement vertical

Utilisez les classes align- pour modifier l'alignement des éléments (fonctionne uniquement sur les éléments inline, inline-block, inline-table et table cell) :

Exemple

baseline top middle bottom text-top text-bottom
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>

Essayez-le vous-même →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Vertical Align</h1>
  <p>Change the alignment of elements with the align classes (only works on inline, inline-block, inline-table and table cell elements):</p>
  <span class="align-baseline">baseline</span>
  <span class="align-top">top</span>
  <span class="align-middle">middle</span>
  <span class="align-bottom">bottom</span>
  <span class="align-text-top">text-top</span>
  <span class="align-text-bottom">text-bottom</span>
</div>

</body>
</html>

Ratio d'aspect

Créez des vidéos ou des diaporamas réactifs en fonction de la largeur du parent.

Ajoutez la classe .ratio avec un rapport hauteur/largeur de votre choix .ratio-* à un élément parent, et ajoutez l'intégration (vidéo ou iframe) à l'intérieur :

Exemple

<!-- Aspect ratio 1:1 -->
<div class="ratio ratio-1x1">
  <iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
<!-- Aspect ratio 4:3 -->
<div class="ratio ratio-4x3">
  <iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
<!-- Aspect ratio 16:9 -->
<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
<!-- Aspect ratio 21:9 -->
<div class="ratio ratio-21x9">
  <iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>

Essayez-le vous-même →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Aspect Ratio</h2>
  <p>Create a responsive video and scale it nicely to the parent element.</p>
  
  <h2>Aspect ratio 1:1</h2>
  <div class="ratio ratio-1x1">
    <iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
  </div>
  <br>
  
  <h2>Aspect ratio 4:3</h2>
  <div class="ratio ratio-4x3">
    <iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
  </div> 
  <br>
  
  <h2>Aspect ratio 16:9</h2>
  <div class="ratio ratio-16x9">
    <iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
  </div>
  <br>
    
  <h2>Aspect ratio 21:9</h2>
  <div class="ratio ratio-21x9">
    <iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
  </div>
</div>

</body>
</html>

Visibilité

Utilisez les classes .visible ou .invisible pour contrôler la visibilité des éléments. Remarque : Ces classes ne modifient pas la valeur d'affichage CSS. Ils ajoutent uniquement visibility:visible ou visibility:hidden :

Exemple

I am visible
     <div class="visible">I am visible</div>
<div class="invisible">I am 
      invisible</div>

Essayez-le vous-même →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Visibility</h1>
  <p>Use the .visible or .invisible classes to control the visibility of elements. Note: These classes do not change the CSS display value. They only add visibility:visible or visibility:hidden to an element:</p>
  <div class="visible bg-success">I am visible</div>
  <div class="invisible bg-warning">I am invisible</div>
</div>

</body>
</html>

Icône Fermer

Utilisez la classe .btn-close pour styliser une icône de fermeture. Ceci est souvent utilisé pour les alertes et les modaux.

Exemple

     <button type="button" class="btn-close"></button>

Essayez-le vous-même →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h1>Close Icon</h1>
  <p>Use the .close class to style a close icon. This is often used for alerts and modals. Note that we use the times; symbol to create the actual icon (a better looking "x"). Also note that it is right-aligned by default:</p>
  <div class="clearfix">
    <button type="button" class="close">&amp;times;</button>
  </div>
</div>

</body>
</html>

Lecteurs d'écran

Utilisez la classe .visually-hidden pour masquer un élément sur tous les appareils, à l'exception des lecteurs d'écran :

Exemple

<span class="visually-hidden">I will be hidden on all screens except for screen   readers.</span>

Essayez-le vous-même →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Screen readers</h2>
  <p>Use the .sr-only class to hide an element on all devices, except screen readers:</p>
  <span class="visually-hidden">I will be hidden on all screens except for screen readers.</span>
</div>

</body>
</html>

Couleurs

Comme décrit dans le chapitre Couleurs, voici une liste de toutes les classes de couleurs de texte et d’arrière-plan :

Les classes pour les couleurs du texte sont :

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

Le .text-body est la couleur du corps par défaut (souvent noir).

Exemple

This text is muted.

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary text.

Dark grey text.

Body text.

Light grey text.

Essayez-le vous-même →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Contextual Colors</h2>
  <p>Use the contextual classes to provide &quot;meaning through colors&quot;:</p>
  <p class="text-muted">This text is muted.</p>
  <p class="text-primary">This text is important.</p>
  <p class="text-success">This text indicates success.</p>
  <p class="text-info">This text represents some information.</p>
  <p class="text-warning">This text represents a warning.</p>
  <p class="text-danger">This text represents danger.</p>
  <p class="text-secondary">Secondary text.</p>
  <p class="text-dark">This text is dark grey.</p>
  <p class="text-body">Default body color (often black).</p>
  <p class="text-light">This text is light grey (on white background).</p>
  <p class="text-white">This text is white (on white background).</p>
</div>

</body>
</html>

Les classes de texte contextuel peuvent également être utilisées sur les liens :

Exemple

Essayez-le vous-même →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Contextual Link Colors</h2>
  <a href="#" class="text-muted">Muted link.</a>
  <a href="#" class="text-primary">Primary link.</a>
  <a href="#" class="text-success">Success link.</a>
  <a href="#" class="text-info">Info link.</a>
  <a href="#" class="text-warning">Warning link.</a>
  <a href="#" class="text-danger">Danger link.</a>
  <a href="#" class="text-secondary">Secondary link.</a>
  <a href="#" class="text-dark">Dark grey link.</a>
  <a href="#" class="text-body">Body/black link.</a>
  <a href="#" class="text-light">Light grey link.</a>
</div>

</body>
</html>

Vous pouvez également ajouter 50 % d'opacité pour le texte en noir ou blanc avec le .text-black-50 ou .text-white- 50 cours :

Exemple

Black text with 50% opacity on white background

White text with 50% opacity on black background

Essayez-le vous-même →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Opacity Text Colors</h2>
  <p>Add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes:</p>
  <p class="text-black-50">Black text with 50% opacity on white background</p>
  <p class="text-white-50 bg-dark">White text with 50% opacity on black background</p>
</div>

</body>
</html>

Couleurs d'arrière-plan

Les classes pour les couleurs d'arrière-plan sont :

bg-primary
.bg-success
.bg-info
.bg-warning
.bg-danger
.bg-secondary
.bg-dark
.bg-light

Exemple

Essayez-le vous-même →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Contextual Backgrounds</h2>
  <p>Use the contextual background classes to provide &quot;meaning through colors&quot;.</p>
  <div class="bg-primary p-3"></div>
  <div class="bg-success p-3"></div>
  <div class="bg-info p-3"></div>
  <div class="bg-warning p-3"></div>
  <div class="bg-danger p-3"></div>
  <div class="bg-secondary p-3"></div>
  <div class="bg-dark p-3"></div>
  <div class="bg-light p-3"></div>
</div>

</body>
</html>

Les classes .bg-color ci-dessus ne fonctionnent pas bien avec le texte, ou du moins vous devez spécifier un .text-color pour obtenir la bonne couleur de texte pour chaque arrière-plan.

Cependant, vous pouvez utiliser les classes .text-bg-color et Bootstrap gérera automatiquement la couleur de texte appropriée pour chaque couleur d'arrière-plan :

Exemple

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary background color.

Dark grey background color.

Light grey background color.

Essayez-le vous-même →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Background Color with Contrasting Text Color</h2>
  <p class="text-bg-primary">This text is important.</p>
  <p class="text-bg-success">This text indicates success.</p>
  <p class="text-bg-info">This text represents some information.</p>
  <p class="text-bg-warning">This text represents a warning.</p>
  <p class="text-bg-danger">This text represents danger.</p>
  <p class="text-bg-secondary">Secondary background color.</p>
  <p class="text-bg-dark">Dark grey background color.</p>
  <p class="text-bg-light">Light grey background color.</p>
</div>

</body>
</html>