Heading 1

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
            

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
            

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>
            

<div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-secondary">Middle</button>
    <button type="button" class="btn btn-success">Right</button>
</div>
<div class="btn-group mt-2" role="group" aria-label="Button group with nested dropdown">
    <button type="button" class="btn btn-info">1</button>
    <button type="button" class="btn btn-info">2</button>
    <button type="button" class="btn btn-info">3</button>
</div>
            

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
            

<button type="button" class="btn btn-primary" disabled>Primary Disabled</button>
<button type="button" class="btn btn-secondary" disabled>Secondary Disabled</button>
<button type="button" class="btn btn-outline-primary" disabled>Outline Primary Disabled</button>
<button type="button" class="btn btn-outline-secondary" disabled>Outline Secondary Disabled</button>
<button type="button" class="btn btn-primary btn-lg" disabled>Large Disabled</button>
<button type="button" class="btn btn-secondary btn-sm" disabled>Small Disabled</button>
<button type="button" class="btn btn-primary btn-block" disabled>Block Disabled</button>
            

<form>
    <div class="mb-3">
        <label for="basicInput" class="form-label">Nom</label>
        <input type="text" class="form-control" id="basicInput" placeholder="Entrez votre nom">
    </div>
    <div class="mb-3">
        <label for="emailInput" class="form-label">Email</label>
        <input type="email" class="form-control" id="emailInput" placeholder="Entrez votre email">
    </div>
    <div class="mb-3">
        <label for="passwordInput" class="form-label">Mot de passe</label>
        <input type="password" class="form-control" id="passwordInput" placeholder="Entrez votre mot de passe">
    </div>
    <div class="mb-3">
        <label for="disabledInput" class="form-label">Champ Désactivé</label>
        <input type="text" class="form-control" id="disabledInput" placeholder="Non modifiable" disabled>
    </div>
</form>
            

<!-- Groupes d'entrée -->
<div class="input-group mb-3">
    <span class="input-group-text" id="basic-addon1">@</span>
    <input type="text" class="form-control" placeholder="Nom d'utilisateur" aria-label="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="URL du site" aria-label="Recipient's username">
    <span class="input-group-text">https://exemple.com</span>
</div>
<div class="input-group">
    <span class="input-group-text">$</span>
    <input type="text" class="form-control" aria-label="Montant">
    <span class="input-group-text">.00</span>
</div>
    

<form>
    <div class="mb-3">
        <label for="selectInput" class="form-label">Liste déroulante</label>
        <select class="form-select" id="selectInput">
            <option selected>Choisir une option</option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
        </select>
    </div>
    <div class="mb-3">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" id="checkbox1">
            <label class="form-check-label" for="checkbox1">Option 1 (checkbox)</label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="checkbox" id="checkbox2" checked>
            <label class="form-check-label" for="checkbox2">Option 2 (checkbox)</label>
        </div>
    </div>
    <div class="mb-3">
        <div class="form-check">
            <input class="form-check-input" type="radio" name="radioOptions" id="radio1" checked>
            <label class="form-check-label" for="radio1">Option 1 (radio)</label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="radio" name="radioOptions" id="radio2">
            <label class="form-check-label" for="radio2">Option 2 (radio)</label>
        </div>
    </div>
</form>
            

<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
    <label class="form-check-label" for="flexSwitchCheckDefault">Activer cette option</label>
</div>
<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
    <label class="form-check-label" for="flexSwitchCheckChecked">Option activée par défaut</label>
</div>
            

<form>
    <div class="form-floating mb-3">
        <input type="text" class="form-control" id="floatingInput" placeholder="Nom">
        <label for="floatingInput">Nom</label>
    </div>
    <div class="form-floating mb-3">
        <input type="email" class="form-control" id="floatingEmail" placeholder="Email">
        <label for="floatingEmail">Email</label>
    </div>
    <div class="form-floating mb-3">
        <textarea class="form-control" placeholder="Message" id="floatingTextarea"></textarea>
        <label for="floatingTextarea">Message</label>
    </div>
</form>
            

<form>
    <div class="mb-3">
        <label for="fileInput" class="form-label">Télécharger un fichier</label>
        <input class="form-control" type="file" id="fileInput">
    </div>
    <div class="mb-3">
        <label for="textarea" class="form-label">Zone de texte</label>
        <textarea class="form-control" id="textarea" rows="3" placeholder="Entrez votre message"></textarea>
    </div>
</form>
            

<form class="row g-3">
    <div class="col-auto">
        <label for="inlineFormInput" class="visually-hidden">Nom</label>
        <input type="text" class="form-control" id="inlineFormInput" placeholder="Jane Doe">
    </div>
    <div class="col-auto">
        <label for="inlineFormInputGroup" class="visually-hidden">Username</label>
        <div class="input-group">
            <div class="input-group-text">@</div>
            <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
        </div>
    </div>
    <div class="col-auto">
        <button type="submit" class="btn btn-primary mb-3">Envoyer</button>
    </div>
</form>
            

<!-- Validation des formulaires -->
<form class="needs-validation" novalidate>
    <div class="mb-3">
        <label for="validationCustom01" class="form-label">Prénom</label>
        <input type="text" class="form-control is-valid" id="validationCustom01" value="Jean" required>
        <div class="valid-feedback">Prénom valide !</div>
    </div>
    <div class="mb-3">
        <label for="validationCustom02" class="form-label">Nom</label>
        <input type="text" class="form-control is-invalid" id="validationCustom02" required>
        <div class="invalid-feedback">Veuillez fournir un nom valide.</div>
    </div>
    <div class="mb-3">
        <label for="validationCustomUsername" class="form-label">Nom d'utilisateur</label>
        <div class="input-group has-validation">
            <span class="input-group-text" id="inputGroupPrepend">@</span>
            <input type="text" class="form-control is-invalid" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
            <div class="invalid-feedback">Veuillez choisir un nom d'utilisateur.</div>
        </div>
    </div>
    <div class="mb-3">
        <label for="validationCustom03" class="form-label">Ville</label>
        <input type="text" class="form-control is-invalid" id="validationCustom03" required>
        <div class="invalid-feedback">Veuillez fournir une ville valide.</div>
    </div>
    <div class="mb-3">
        <label for="validationCustom04" class="form-label">État</label>
        <select class="form-select is-invalid" id="validationCustom04" required>
            <option selected disabled value="">Choisir...</option>
            <option>Option 1</option>
            <option>Option 2</option>
        </select>
        <div class="invalid-feedback">Veuillez sélectionner un état.</div>
    </div>
    <div class="mb-3">
        <label for="validationCustom05" class="form-label">Code postal</label>
        <input type="text" class="form-control is-invalid" id="validationCustom05" required>
        <div class="invalid-feedback">Veuillez fournir un code postal valide.</div>
    </div>
    <div class="form-check mb-3">
        <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck" required>
        <label class="form-check-label" for="invalidCheck">Accepter les termes et conditions</label>
        <div class="invalid-feedback">Vous devez accepter avant de soumettre.</div>
    </div>
    <button class="btn btn-primary" type="submit">Soumettre</button>
</form>
    

<!-- Exemples d'alertes de base -->
<div class="alert alert-primary" role="alert">Alerte de type Primary</div>
<div class="alert alert-secondary" role="alert">Alerte de type Secondary</div>
<div class="alert alert-success" role="alert">Alerte de type Success</div>
<div class="alert alert-danger" role="alert">Alerte de type Danger</div>
<div class="alert alert-warning" role="alert">Alerte de type Warning</div>
<div class="alert alert-info" role="alert">Alerte de type Info</div>
<div class="alert alert-light" role="alert">Alerte de type Light</div>
<div class="alert alert-dark" role="alert">Alerte de type Dark</div>
            

<!-- Exemples d'alertes avec boutons de fermeture -->
<div class="alert alert-warning alert-dismissible fade show" role="alert">
    Alerte Warning avec bouton de fermeture
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-info alert-dismissible fade show" role="alert">
    Alerte Info avec bouton de fermeture
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-success alert-dismissible fade show" role="alert">
    Alerte Success avec bouton de fermeture
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-danger alert-dismissible fade show" role="alert">
    Alerte Danger avec bouton de fermeture
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
            

<!-- Exemples d'alertes avec contenu -->
<div class="alert alert-primary" role="alert">
    <h4 class="alert-heading">Titre de l'Alerte Primary</h4>
    <p>Ceci est un exemple d'alerte avec du contenu additionnel et un titre.</p>
    <hr>
    <p class="mb-0">Exemple d'un message d'alerte contenant plusieurs lignes.</p>
</div>
<div class="alert alert-success" role="alert">
    <h4 class="alert-heading">Titre de l'Alerte Success</h4>
    <p>Un autre exemple d'alerte avec du contenu.</p>
    <hr>
    <p class="mb-0">Vous pouvez ajouter différents styles dans le texte.</p>
</div>
            

<!-- Exemples d'alertes avec liens -->
<div class="alert alert-info" role="alert">
    Ceci est une alerte avec <a href="#" class="alert-link">un lien d'exemple</a>. Cliquez pour voir plus.
</div>
<div class="alert alert-warning" role="alert">
    Une alerte warning avec <a href="#" class="alert-link">un lien ajouté</a>.
</div>
            

<!-- Exemple de carte de base -->
<div class="card" style="width: 18rem;">
    <div class="card-body">
        <h5 class="card-title">Titre de la Carte</h5>
        <p class="card-text">Ceci est un texte d'exemple pour une carte de base avec du contenu minimal.</p>
    </div>
</div>
            

<!-- Exemple de carte avec badge "Featured" et timestamp -->
<div class="card" style="width: 18rem;">
    <div class="card-header">Featured</div>
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
    <div class="card-footer text-muted">2 days ago</div>
</div>
            

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

<!-- Exemple de carte horizontale avec image et timestamp -->
<div class="card mb-3" style="max-width: 540px;">
    <div class="row g-0">
        <div class="col-md-4">
            <img src="https://via.placeholder.com/150x150" class="img-fluid rounded-start h-100" style="object-fit: cover;" alt="Image d'exemple">
        </div>
        <div class="col-md-8">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
    </div>
</div>
    

Carte avec Image

Exemple de carte avec une image en haut et du contenu en dessous.

<!-- Exemple de carte avec image en haut -->
<div class="card" style="width: 18rem;">
    <img src="https://via.placeholder.com/150" class="card-img-top" alt="Image d'exemple">
    <div class="card-body">
        <h5 class="card-title">Carte avec Image</h5>
        <p class="card-text">Exemple de carte avec une image en haut et du contenu en dessous.</p>
    </div>
</div>
            

Titre de la Carte

Ceci est un exemple de carte complète qui contient une image en haut, un titre, un texte et un bouton pour une action.

Voir Plus

<!-- Exemple de carte complète avec image, titre, texte et bouton -->
<div class="card" style="width: 18rem;">
    <img src="https://via.placeholder.com/150" class="card-img-top" alt="Image d'exemple">
    <div class="card-body">
        <h5 class="card-title">Titre de la Carte</h5>
        <p class="card-text">Ceci est un exemple de carte complète qui contient une image en haut, un titre, un texte et un bouton pour une action.</p>
        <a href="#" class="btn btn-primary">Voir Plus</a>
    </div>
</div>
    

<!-- Exemple de carte avec une liste intégrée -->
<div class="card" style="width: 18rem;">
    <div class="card-body">
        <h5 class="card-title">Titre de la Carte</h5>
        <p class="card-text">Ceci est une liste intégrée directement dans le texte de la carte :</p>
        <ul>
            <li>Élément de liste 1</li>
            <li>Élément de liste 2</li>
            <li>Élément de liste 3</li>
        </ul>
    </div>
</div>
            

<!-- Exemple de carte avec groupes de listes -->
<div class="card" style="width: 18rem;">
    <div class="card-header">
        En-tête de Carte
    </div>
    <ul class="list-group list-group-flush">
        <li class="list-group-item">Élément 1</li>
        <li class="list-group-item">Élément 2</li>
        <li class="list-group-item">Élément 3</li>
    </ul>
</div>
            

<!-- Exemple de carte avec bouton -->
<div class="card" style="width: 18rem;">
    <div class="card-body">
        <h5 class="card-title">Carte avec Bouton</h5>
        <p class="card-text">Exemple de carte avec un bouton pour les actions.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>
            

Carte 1

Texte de la carte 1.

Carte 2

Texte de la carte 2.

Carte 3

Texte de la carte 3.

<!-- Exemple de cartes en groupe -->
<div class="card-group">
    <div class="card" style="width: 18rem;">
        <img src="https://via.placeholder.com/150" class="card-img-top" alt="Image d'exemple">
        <div class="card-body">
            <h5 class="card-title">Carte 1</h5>
            <p class="card-text">Texte de la carte 1.</p>
        </div>
    </div>
    <!-- autres cartes ici -->
</div>
            

<!-- Barre de navigation de base -->
<nav class="nav">
    <a class="nav-link active" href="#">Active</a>
    <a class="nav-link" href="#">Link</a>
    <a class="nav-link" href="#">Link</a>
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
            

<!-- Barre de navigation avec menu déroulant -->
<ul class="nav">
    <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
        </a>
        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>
    </li>
</ul>
            

<!-- Pills de navigation -->
<ul class="nav nav-pills">
    <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <!-- autres liens ici -->
</ul>
            

<!-- Barre de navigation avec logo -->
<nav class="navbar navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">
            <img src="https://via.placeholder.com/30" alt="" width="30" height="30" class="d-inline-block align-text-top">
            Logo
        </a>
    </div>
</nav>
            

<!-- Navbar complète -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                </li>
                <!-- autres liens ici -->
            </ul>
        </div>
    </div>
</nav>
            

<!-- Pagination -->
<nav aria-label="Page navigation example">
    <ul class="pagination">
        <li class="page-item"><a class="page-link" href="#">Previous</a></li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">Next</a></li>
    </ul>
</nav>
            

<!-- Tableau de base -->
<table class="table">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Nom</th>
            <th scope="col">Âge</th>
            <th scope="col">Ville</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Jean Dupont</td>
            <td>34</td>
            <td>Paris</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Marie Curie</td>
            <td>66</td>
            <td>Varsovie</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Albert Einstein</td>
            <td>76</td>
            <td>Berlin</td>
        </tr>
    </tbody>
</table>
            

<!-- Tableau strié -->
<table class="table table-striped">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Nom</th>
            <th scope="col">Âge</th>
            <th scope="col">Ville</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Jean Dupont</td>
            <td>34</td>
            <td>Paris</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Marie Curie</td>
            <td>66</td>
            <td>Varsovie</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Albert Einstein</td>
            <td>76</td>
            <td>Berlin</td>
        </tr>
    </tbody>
</table>
            

<!-- Tableau avec bordures -->
<table class="table table-bordered">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Nom</th>
            <th scope="col">Âge</th>
            <th scope="col">Ville</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Jean Dupont</td>
            <td>34</td>
            <td>Paris</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Marie Curie</td>
            <td>66</td>
            <td>Varsovie</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Albert Einstein</td>
            <td>76</td>
            <td>Berlin</td>
        </tr>
    </tbody>
</table>
            

<!-- Tableau avec lignes surlignées -->
<table class="table table-hover">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Nom</th>
            <th scope="col">Âge</th>
            <th scope="col">Ville</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Jean Dupont</td>
            <td>34</td>
            <td>Paris</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Marie Curie</td>
            <td>66</td>
            <td>Varsovie</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Albert Einstein</td>
            <td>76</td>
            <td>Berlin</td>
        </tr>
    </tbody>
</table>
            

<!-- Tableau inversé avec fond sombre -->
<table class="table table-dark table-striped">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Nom</th>
            <th scope="col">Âge</th>
            <th scope="col">Ville</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Jean Dupont</td>
            <td>34</td>
            <td>Paris</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Marie Curie</td>
            <td>66</td>
            <td>Varsovie</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Albert Einstein</td>
            <td>76</td>
            <td>Berlin</td>
        </tr>
    </tbody>
</table>
            

<!-- Image de base -->
<img src="https://via.placeholder.com/150" alt="Image de base" class="img-fluid">
            

<!-- Image en cercle -->
<img src="https://via.placeholder.com/150" alt="Image en cercle" class="rounded-circle img-fluid">
            

<!-- Image en miniature (thumbnail) -->
<img src="https://via.placeholder.com/150" alt="Image en miniature" class="img-thumbnail img-fluid">
            

<!-- Image responsive -->
<img src="https://via.placeholder.com/600x300" alt="Image responsive" class="img-fluid">
            

<!-- Image alignée -->
<div class="d-flex justify-content-between align-items-center mb-3">
    <img src="https://via.placeholder.com/150" alt="Image alignée gauche" class="img-fluid me-3">
    <img src="https://via.placeholder.com/150" alt="Image centrée" class="img-fluid mx-3">
    <img src="https://via.placeholder.com/150" alt="Image alignée droite" class="img-fluid ms-3">
</div>
    

<!-- Badge de base -->
<span class="badge bg-secondary">Badge</span>
            

<!-- Badge en forme de pilule -->
<span class="badge rounded-pill bg-primary">Badge en pilule</span>
            

<!-- Badges colorés -->
<span class="badge bg-primary">Primary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>
            

<!-- Badge dans un bouton -->
<button type="button" class="btn btn-primary">
    Notifications <span class="badge bg-secondary">4</span>
</button>
            

<!-- Badge avec lien -->
<a href="#" class="badge bg-primary">Lien de badge</a>
            

<!-- Liste de base -->
<ul>
    <li>Élément de liste 1</li>
    <li>Élément de liste 2</li>
    <li>Élément de liste 3</li>
</ul>
            

<!-- Liste de groupe -->
<ul class="list-group">
    <li class="list-group-item">Élément de groupe 1</li>
    <li class="list-group-item">Élément de groupe 2</li>
    <li class="list-group-item">Élément de groupe 3</li>
</ul>
            

<!-- Liste de groupe avec badges -->
<ul class="list-group">
    <li class="list-group-item d-flex justify-content-between align-items-center">
        Élément de groupe 1
        <span class="badge bg-primary rounded-pill">12</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        Élément de groupe 2
        <span class="badge bg-primary rounded-pill">5</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        Élément de groupe 3
        <span class="badge bg-primary rounded-pill">7</span>
    </li>
</ul>
            

<!-- Liste de groupe avec couleurs -->
<ul class="list-group">
    <li class="list-group-item list-group-item-primary">Élément de groupe bleu</li>
    <li class="list-group-item list-group-item-success">Élément de groupe vert</li>
    <li class="list-group-item list-group-item-danger">Élément de groupe rouge</li>
</ul>
            

<!-- Liste de groupe avec boutons -->
<div class="list-group">
    <button type="button" class="list-group-item list-group-item-action">Élément de groupe bouton 1</button>
    <button type="button" class="list-group-item list-group-item-action">Élément de groupe bouton 2</button>
    <button type="button" class="list-group-item list-group-item-action">Élément de groupe bouton 3</button>
</div>
            

<!-- Liste de groupe horizontale -->
<ul class="list-group list-group-horizontal">
    <li class="list-group-item">Élément 1</li>
    <li class="list-group-item">Élément 2</li>
    <li class="list-group-item">Élément 3</li>
</ul>
            

<!-- Dropdown de base -->
<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown de Base
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
</div>
            

<!-- Dropdown avec toutes les variantes de couleurs -->
<div class="dropdown d-inline">
    <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButtonPrimary" data-bs-toggle="dropdown" aria-expanded="false">
        Primary
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonPrimary">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
</div>
<!-- Répétez la structure ci-dessus pour chaque couleur (secondary, success, danger, warning, info, light, dark) -->
    

<!-- Dropdown avec formulaire -->
<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownFormButton" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown avec Formulaire
    </button>
    <form class="dropdown-menu p-4" style="min-width: 300px;">
        <div class="mb-3">
            <label for="dropdownFormEmail" class="form-label">Adresse Email</label>
            <input type="email" class="form-control" id="dropdownFormEmail" placeholder="email@example.com">
        </div>
        <div class="mb-3">
            <label for="dropdownFormPassword" class="form-label">Mot de passe</label>
            <input type="password" class="form-control" id="dropdownFormPassword" placeholder="Mot de passe">
        </div>
        <button type="submit" class="btn btn-primary">Se connecter</button>
    </form>
</div>
            

<!-- Split dropdown (groupe de boutons) -->
<div class="btn-group">
    <button type="button" class="btn btn-primary">Action</button>
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
</div>
            

<!-- Modal de Base -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#basicModal">
    Ouvrir le Modal de Base
</button>

<!-- Modal Structure -->
<div class="modal fade" id="basicModal" tabindex="-1" aria-labelledby="basicModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="basicModalLabel">Modal de Base</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Contenu du modal de base.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                <button type="button" class="btn btn-primary">Sauvegarder</button>
            </div>
        </div>
    </div>
</div>
            

<!-- Modal Centré Verticalement -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#centeredModal">
    Ouvrir le Modal Centré Verticalement
</button>

<!-- Structure du Modal Centré Verticalement -->
<div class="modal fade" id="centeredModal" tabindex="-1" aria-labelledby="centeredModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="centeredModalLabel">Modal Centré Verticalement</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Contenu du modal centré verticalement.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                <button type="button" class="btn btn-primary">Sauvegarder</button>
            </div>
        </div>
    </div>
</div>
            

<!-- Modal avec Formulaire -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#formModal">
    Ouvrir le Modal avec Formulaire
</button>

<!-- Structure du Modal avec Formulaire -->
<div class="modal fade" id="formModal" tabindex="-1" aria-labelledby="formModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="formModalLabel">Modal avec Formulaire</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="mb-3">
                        <label for="email" class="form-label">Email</label>
                        <input type="email" class="form-control" id="email" placeholder="email@example.com">
                    </div>
                    <div class="mb-3">
                        <label for="password" class="form-label">Mot de passe</label>
                        <input type="password" class="form-control" id="password" placeholder="Mot de passe">
                    </div>
                    <button type="submit" class="btn btn-primary">Connexion</button>
                </form>
            </div>
        </div>
    </div>
</div>
            

<!-- Tooltip de base -->
<a href="#" data-bs-toggle="tooltip" title="Voici un tooltip simple">Passez la souris ici</a>
            

<!-- Tooltips avec différents positionnements -->
<a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip en haut">Haut</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip à droite">Droite</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip en bas">Bas</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip à gauche">Gauche</a>
            

<!-- Tooltip sur bouton -->
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Cliquez ici pour une action">
    Bouton avec Tooltip
</button>
            

<!-- Popover de base -->
<a href="#" tabindex="0" class="btn btn-outline-primary" data-bs-toggle="popover" data-bs-content="Ceci est un popover de base">
    Passez la souris ici
</a>
            

<!-- Popovers avec différents positionnements -->
<a href="#" tabindex="0" class="btn btn-outline-secondary me-2" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Popover en haut">
    Haut
</a>
<a href="#" tabindex="0" class="btn btn-outline-secondary me-2" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Popover à droite">
    Droite
</a>
<a href="#" tabindex="0" class="btn btn-outline-secondary me-2" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Popover en bas">
    Bas
</a>
<a href="#" tabindex="0" class="btn btn-outline-secondary" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Popover à gauche">
    Gauche
</a>
            

<!-- Popover sur bouton -->
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Information supplémentaire">
    Bouton avec Popover
</button>
            

<!-- Spinner de base -->
<div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
            

<!-- Spinner de type grow -->
<div class="spinner-grow" role="status">
    <span class="visually-hidden">Loading...</span>
</div>
            

<!-- Spinners avec différentes couleurs -->
<div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div>
<div class="spinner-border text-secondary" role="status"><span class="visually-hidden">Loading...</span></div>
<div class="spinner-border text-success" role="status"><span class="visually-hidden">Loading...</span></div>
<div class="spinner-border text-danger" role="status"><span class="visually-hidden">Loading...</span></div>
<div class="spinner-border text-warning" role="status"><span class="visually-hidden">Loading...</span></div>
<div class="spinner-border text-info" role="status"><span class="visually-hidden">Loading...</span></div>
<div class="spinner-border text-light" role="status"><span class="visually-hidden">Loading...</span></div>
<div class="spinner-border text-dark" role="status"><span class="visually-hidden">Loading...</span></div>
            

<!-- Spinner avec texte -->
<div class="d-flex align-items-center">
    <div class="spinner-border me-3" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
    <strong>Chargement en cours...</strong>
</div>
            

<!-- Spinners de différentes tailles -->
<div class="spinner-border spinner-border-sm text-primary" role="status"><span class="visually-hidden">Loading...</span></div>
<div class="spinner-grow spinner-grow-sm text-secondary" role="status"><span class="visually-hidden">Loading...</span></div>
<div class="spinner-border text-success" role="status"><span class="visually-hidden">Loading...</span></div>
<div class="spinner-grow text-danger" role="status"><span class="visually-hidden">Loading...</span></div>
            

<!-- Collapse de base -->
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#basicCollapse" aria-expanded="false" aria-controls="basicCollapse">
    Toggle Collapse
</button>
<div class="collapse mt-3" id="basicCollapse">
    <div class="card card-body">
        Ceci est un collapse de base.
    </div>
</div>
            

<!-- Collapse Multiple -->
<button class="btn btn-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapse1" aria-expanded="false" aria-controls="multiCollapse1">Collapse 1</button>
<button class="btn btn-secondary ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapse2" aria-expanded="false" aria-controls="multiCollapse2">Collapse 2</button>
<div class="row mt-3">
    <div class="col">
        <div class="collapse multi-collapse" id="multiCollapse1">
            <div class="card card-body">
                Contenu du premier collapse.
            </div>
        </div>
    </div>
    <div class="col">
        <div class="collapse multi-collapse" id="multiCollapse2">
            <div class="card card-body">
                Contenu du second collapse.
            </div>
        </div>
    </div>
</div>
            

<!-- Collapse avec Icône Dynamique -->
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#iconCollapse" aria-expanded="false" aria-controls="iconCollapse" onclick="toggleIcon(this)">
    <i class="bi bi-chevron-down" id="icon"></i> Afficher Plus
</button>
<div class="collapse mt-3" id="iconCollapse">
    <div class="card card-body">
        Contenu détaillé du collapse avec icône dynamique.
    </div>
</div>

<!-- Script pour changer l'icône dynamiquement -->
<script>
function toggleIcon(button) {
    const icon = button.querySelector('i');
    icon.classList.toggle('bi-chevron-down');
    icon.classList.toggle('bi-chevron-up');
}
</script>
    

<!-- Carousel de base -->
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slide 1">
        </div>
        <!-- Ajoutez d'autres éléments de carousel -->
    </div>
</div>
            

Précédent Suivant

<!-- Carousel avec Contrôles -->
<div id="carouselControls" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slide 1">
        </div>
        <!-- Autres diapositives -->
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselControls" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Précédent</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselControls" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Suivant</span>
    </button>
</div>
            

<!-- Carousel avec Indicateurs -->
<div id="carouselIndicators" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>
    <!-- Carrousel intérieur avec les diapositives -->
</div>
            

Légende pour Slide 1

Description de la première diapositive.

Légende pour Slide 2

Description de la deuxième diapositive.

<!-- Carousel avec Légendes -->
<div id="carouselCaptions" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slide 1">
            <div class="carousel-caption d-none d-md-block">
                <h5>Légende pour Slide 1</h5>
                <p>Description de la première diapositive.</p>
            </div>
        </div>
        <!-- Autres diapositives avec légendes -->
    </div>
</div>
            

<!-- Barre de Progression de Base -->
<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
            

<!-- Barres de Progression avec Couleurs -->
<div class="progress">
    <div class="progress-bar bg-success" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- Autres barres avec couleurs différentes -->
            

<!-- Barre de Progression avec Étiquettes -->
<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 70%;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">70%</div>
</div>
            

<!-- Barre de Progression Animée -->
<div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">60%</div>
</div>
            

<!-- Barre de Progression en Segments -->
<div class="progress">
    <div class="progress-bar bg-success" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar bg-warning" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar bg-danger" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
            

<!-- Accordéon de Base -->
<div class="accordion" id="basicAccordion">
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingOne">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                Accordéon Élément #1
            </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#basicAccordion">
            <div class="accordion-body">
                Contenu du premier élément d'accordéon.
            </div>
        </div>
    </div>
</div>
            

<!-- Accordéon avec En-têtes Personnalisés -->
<div class="accordion" id="styledAccordion">
    <div class="accordion-item">
        <h2 class="accordion-header" id="styledHeadingOne">
            <button class="accordion-button text-primary fw-bold" type="button" data-bs-toggle="collapse" data-bs-target="#styledCollapseOne" aria-expanded="true" aria-controls="styledCollapseOne">
                Élément #1 avec En-tête Stylisé
            </button>
        </h2>
        <div id="styledCollapseOne" class="accordion-collapse collapse show" aria-labelledby="styledHeadingOne" data-bs-parent="#styledAccordion">
            <div class="accordion-body">
                Contenu avec un en-tête stylisé.
            </div>
        </div>
    </div>
</div>
            

<!-- Accordéon avec Icônes Dynamiques -->
<div class="accordion" id="iconAccordion">
    <div class="accordion-item">
        <h2 class="accordion-header" id="iconHeadingOne">
            <button class="accordion-button d-flex align-items-center" type="button" data-bs-toggle="collapse" data-bs-target="#iconCollapseOne" aria-expanded="true" aria-controls="iconCollapseOne" onclick="toggleAccordionIcon(this)">
                <i class="bi bi-chevron-down me-2"></i> Élément #1 avec Icône
            </button>
        </h2>
        <div id="iconCollapseOne" class="accordion-collapse collapse show" aria-labelledby="iconHeadingOne" data-bs-parent="#iconAccordion">
            <div class="accordion-body">
                Contenu du premier élément d'accordéon avec icône dynamique.
            </div>
        </div>
    </div>
</div>

<script>
function toggleAccordionIcon(button) {
    const icon = button.querySelector('i');
    icon.classList.toggle('bi-chevron-down');
    icon.classList.toggle('bi-chevron-up');
}
</script>
            

<!-- Accordéon Multicolonne -->
<div class="row">
    <div class="col-md-6">
        <div class="accordion" id="multiColumnAccordion1">
            <div class="accordion-item">
                <h2 class="accordion-header" id="multiHeadingOne">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseOne" aria-expanded="true" aria-controls="multiCollapseOne">
                        Colonne 1 - Élément #1
                    </button>
                </h2>
                <div id="multiCollapseOne" class="accordion-collapse collapse show" aria-labelledby="multiHeadingOne" data-bs-parent="#multiColumnAccordion1">
                    <div class="accordion-body">
                        Contenu de l'élément 1, colonne 1.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
            

Élément avec Contenu Étendu

Contenu détaillé avec des paragraphes multiples, des listes, et des images.

• Point 1
• Point 2
• Point 3

<!-- Accordéon avec Contenu Étendu -->
<div class="accordion" id="extendedContentAccordion">
    <div class="accordion-item">
        <h2 class="accordion-header" id="extendedHeadingOne">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#extendedCollapseOne" aria-expanded="true" aria-controls="extendedCollapseOne">
                Élément avec Contenu Étendu
            </button>
        </h2>
        <div id="extendedCollapseOne" class="accordion-collapse collapse show" aria-labelledby="extendedHeadingOne" data-bs-parent="#extendedContentAccordion">
            <div class="accordion-body">
                <p>Contenu détaillé avec des paragraphes multiples, des listes, et des images.</p>
                <ul>
                    <li>Point 1</li>
                    <li>Point 2</li>
                    <li>Point 3</li>
                </ul>
                <img src="https://via.placeholder.com/100x50" alt="Example Image" class="my-3">
            </div>
        </div>
    </div>
</div>
            

<!-- Tabs de Base -->
<ul class="nav nav-tabs" id="baseTabs" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="base-tab1" data-bs-toggle="tab" data-bs-target="#base-tab1-content" type="button" role="tab" aria-controls="base-tab1-content" aria-selected="true">Tab 1</button>
    </li>
    <!-- Autres onglets -->
</ul>
<div class="tab-content mt-3" id="baseTabsContent">
    <div class="tab-pane fade show active" id="base-tab1-content" role="tabpanel" aria-labelledby="base-tab1">
        Contenu de l'onglet 1.
    </div>
</div>
            

<!-- Tabs avec Icônes -->
<ul class="nav nav-tabs" id="iconTabs" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="icon-tab1" data-bs-toggle="tab" data-bs-target="#icon-tab1-content" type="button" role="tab" aria-controls="icon-tab1-content" aria-selected="true">
            <i class="bi bi-house-door me-1"></i> Home
        </button>
    </li>
    <!-- Autres onglets avec icônes -->
</ul>
<div class="tab-content mt-3" id="iconTabsContent">
    <div class="tab-pane fade show active" id="icon-tab1-content" role="tabpanel" aria-labelledby="icon-tab1">
        Contenu de l'onglet Home.
    </div>
</div>
            

<!-- Tabs de Style Pills -->
<ul class="nav nav-pills" id="pillsTabs" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="pill-tab1" data-bs-toggle="tab" data-bs-target="#pill-tab1-content" type="button" role="tab" aria-controls="pill-tab1-content" aria-selected="true">Pill 1</button>
    </li>
    <!-- Autres onglets pills -->
</ul>
<div class="tab-content mt-3" id="pillsTabsContent">
    <div class="tab-pane fade show active" id="pill-tab1-content" role="tabpanel" aria-labelledby="pill-tab1">
        Contenu de l'onglet Pill 1.
    </div>
</div>
            

<!-- Tabs Verticaux -->
<ul class="nav nav-pills flex-column" id="verticalTabs" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="vertical-tab1" data-bs-toggle="tab" data-bs-target="#vertical-tab1-content" type="button" role="tab" aria-controls="vertical-tab1-content" aria-selected="true">Vertical 1</button>
    </li>
    <!-- Autres onglets verticaux -->
</ul>
<div class="tab-content mt-3" id="verticalTabsContent">
    <div class="tab-pane fade show active" id="vertical-tab1-content" role="tabpanel" aria-labelledby="vertical-tab1">
        Contenu de l'onglet Vertical 1.
    </div>
</div>
            

<!-- Tabs avec Dropdown -->
<ul class="nav nav-tabs" id="dropdownTabs" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="dropdown-tab1" data-bs-toggle="tab" data-bs-target="#dropdown-tab1-content" type="button" role="tab" aria-controls="dropdown-tab1-content" aria-selected="true">Tab 1</button>
    </li>
    <li class="nav-item dropdown" role="presentation">
        <a class="nav-link dropdown-toggle" id="dropdownTab" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
        <ul class="dropdown-menu" aria-labelledby="dropdownTab">
            <li><a class="dropdown-item" id="dropdown-tab2" data-bs-toggle="tab" href="#dropdown-tab2-content" role="tab" aria-controls="dropdown-tab2-content">Dropdown Tab 1</a></li>
            <li><a class="dropdown-item" id="dropdown-tab3" data-bs-toggle="tab" href="#dropdown-tab3-content" role="tab" aria-controls="dropdown-tab3-content">Dropdown Tab 2</a></li>
        </ul>
    </li>
</ul>
<div class="tab-content mt-3" id="dropdownTabsContent">
    <div class="tab-pane fade show active" id="dropdown-tab1-content" role="tabpanel" aria-labelledby="dropdown-tab1">
        Contenu de l'onglet Tab 1.
    </div>
</div>
            

<!-- Offcanvas de Base (Gauche) -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBase" aria-controls="offcanvasBase">Ouvrir Offcanvas</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasBase" aria-labelledby="offcanvasBaseLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasBaseLabel">Offcanvas de Base</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Fermer"></button>
    </div>
    <div class="offcanvas-body">
        Contenu du panneau Offcanvas de base.
    </div>
</div>
            

<!-- Offcanvas à Droite -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Ouvrir Offcanvas à Droite</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas à Droite</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Fermer"></button>
    </div>
    <div class="offcanvas-body">
        Contenu du panneau Offcanvas qui s'ouvre à droite.
    </div>
</div>
            

<!-- Offcanvas en Haut -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Ouvrir Offcanvas en Haut</button>
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas en Haut</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Fermer"></button>
    </div>
    <div class="offcanvas-body">
        Contenu du panneau Offcanvas qui s'ouvre en haut.
    </div>
</div>
            

<!-- Offcanvas en Bas -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Ouvrir Offcanvas en Bas</button>
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas en Bas</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Fermer"></button>
    </div>
    <div class="offcanvas-body">
        Contenu du panneau Offcanvas qui s'ouvre en bas de l'écran.
    </div>
</div>
            

<!-- Offcanvas avec Contenu Complexe -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasContent" aria-controls="offcanvasContent">Ouvrir Offcanvas Complexe</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasContent" aria-labelledby="offcanvasContentLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasContentLabel">Offcanvas Complexe</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Fermer"></button>
    </div>
    <div class="offcanvas-body">
        <p>Ce panneau offcanvas inclut du contenu varié pour illustrer sa flexibilité.</p>
        <form>
            <div class="mb-3">
                <label for="offcanvasEmail" class="form-label">Adresse e-mail</label>
                <input type="email" class="form-control" id="offcanvasEmail" placeholder="email@example.com">
            </div>
            <div class="mb-3">
                <label for="offcanvasMessage" class="form-label">Message</label>
                <textarea class="form-control" id="offcanvasMessage" rows="3" placeholder="Votre message..."></textarea>
            </div>
            <button type="submit" class="btn btn-secondary">Envoyer</button>
        </form>
    </div>
</div>
            

<!-- Toast de Base -->
<button class="btn btn-primary" type="button" onclick="new bootstrap.Toast(document.getElementById('basicToast')).show()">Afficher le Toast</button>
<div class="toast-container position-fixed bottom-0 end-0 p-3">
    <div id="basicToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <strong class="me-auto">Notification</strong>
            <small>Il y a 1 minute</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Fermer"></button>
        </div>
        <div class="toast-body">
            Ceci est un toast de base.
        </div>
    </div>
</div>
            

<!-- Toast avec Auto-Hide -->
<button class="btn btn-primary" type="button" onclick="new bootstrap.Toast(document.getElementById('autoHideToast'), { delay: 3000 }).show()">Afficher le Toast Auto-Hide</button>
<div class="toast-container position-fixed bottom-0 end-0 p-3">
    <div id="autoHideToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <strong class="me-auto">Notification</strong>
            <small>Il y a 2 minutes</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Fermer"></button>
        </div>
        <div class="toast-body">
            Ceci est un toast qui se ferme automatiquement après 3 secondes.
        </div>
    </div>
</div>
            

<!-- Toast Positionné en Haut à Droite -->
<button class="btn btn-primary" type="button" onclick="new bootstrap.Toast(document.getElementById('topRightToast')).show()">Afficher le Toast en Haut à Droite</button>
<div class="toast-container position-fixed top-0 end-0 p-3">
    <div id="topRightToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <strong class="me-auto">Notification</strong>
            <small>Il y a 3 minutes</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Fermer"></button>
        </div>
        <div class="toast-body">
            Toast affiché en haut à droite de l'écran.
        </div>
    </div>
</div>
            

Afficher le Toast Personnalisé

Notification Personnalisée Juste maintenant

Ceci est un toast avec une image, du texte et un bouton d'action.

Fermer Voir plus

<!-- Toast avec Contenu Personnalisé -->
<button class="btn btn-primary" type="button" onclick="new bootstrap.Toast(document.getElementById('customToast')).show()">Afficher le Toast Personnalisé</button>
<div class="toast-container position-fixed bottom-0 start-0 p-3">
    <div id="customToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <img src="https://via.placeholder.com/20" class="rounded me-2" alt="...">
            <strong class="me-auto">Notification Personnalisée</strong>
            <small>Juste maintenant</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Fermer"></button>
        </div>
        <div class="toast-body">
            Ceci est un toast avec une image, du texte et un bouton d'action.
            <div class="mt-2 pt-2 border-top">
                <button type="button" class="btn btn-secondary btn-sm me-2" data-bs-dismiss="toast">Fermer</button>
                <button type="button" class="btn btn-primary btn-sm">Voir plus</button>
            </div>
        </div>
    </div>
</div>
            

<!-- Breadcrumb de Base -->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Accueil</a></li>
        <li class="breadcrumb-item"><a href="#">Bibliothèque</a></li>
        <li class="breadcrumb-item active" aria-current="page">Données</li>
    </ol>
</nav>
            

<!-- Breadcrumb avec Séparateur Personnalisé -->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb" style="--bs-breadcrumb-divider: '>';">
        <li class="breadcrumb-item"><a href="#">Accueil</a></li>
        <li class="breadcrumb-item"><a href="#">Bibliothèque</a></li>
        <li class="breadcrumb-item active" aria-current="page">Données</li>
    </ol>
</nav>
            

<!-- Breadcrumb avec Liens Inactifs -->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Accueil</a></li>
        <li class="breadcrumb-item"><span>Bibliothèque</span></li>
        <li class="breadcrumb-item active" aria-current="page">Données</li>
    </ol>
</nav>
            

<!-- Breadcrumb Sans Liens -->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">Accueil</li>
        <li class="breadcrumb-item">Bibliothèque</li>
        <li class="breadcrumb-item active" aria-current="page">Données</li>
    </ol>
</nav>
            

<!-- Grille de Base (3 Colonnes) -->
<div class="row">
    <div class="col bg-primary text-white text-center py-2">Colonne 1</div>
    <div class="col bg-secondary text-white text-center py-2">Colonne 2</div>
    <div class="col bg-success text-white text-center py-2">Colonne 3</div>
</div>
            

<!-- Grille Responsive -->
<div class="row">
    <div class="col-sm-6 col-md-4 bg-warning text-white text-center py-2">Colonne Responsive 1</div>
    <div class="col-sm-6 col-md-4 bg-info text-white text-center py-2">Colonne Responsive 2</div>
    <div class="col-sm-6 col-md-4 bg-light text-dark text-center py-2">Colonne Responsive 3</div>
</div>
            

<!-- Colonnes Auto-ajustées -->
<div class="row">
    <div class="col bg-primary text-white text-center py-2">Colonne Auto</div>
    <div class="col-auto bg-secondary text-white text-center py-2">Colonne Largeur Auto</div>
    <div class="col bg-success text-white text-center py-2">Colonne Auto</div>
</div>
            

<!-- Colonnes avec Décalage -->
<div class="row">
    <div class="col-md-4 offset-md-2 bg-warning text-white text-center py-2">Colonne Décalée</div>
    <div class="col-md-4 bg-success text-white text-center py-2">Colonne</div>
</div>
            

<!-- Alignement Personnalisé -->
<div class="row align-items-center">
    <div class="col bg-primary text-white text-center py-2">Colonne alignée au centre</div>
    <div class="col bg-secondary text-white text-center py-2">Colonne alignée au centre</div>
</div>
<div class="row justify-content-end mt-3">
    <div class="col-md-4 bg-success text-white text-center py-2">Colonne alignée à droite</div>
</div>
            

<div class="row">
    <div class="col-12 col-md-8 bg-primary text-white text-center py-2">.col-12 .col-md-8</div>
    <div class="col-6 col-md-4 bg-secondary text-white text-center py-2">.col-6 .col-md-4</div>
</div>
<div class="row">
    <div class="col-6 col-md-4 bg-success text-white text-center py-2">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4 bg-danger text-white text-center py-2">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4 bg-warning text-white text-center py-2">.col-6 .col-md-4</div>
</div>
            

<div class="row g-3">
    <div class="col-md-4 bg-primary text-white text-center py-2">.col-md-4</div>
    <div class="col-md-4 bg-secondary text-white text-center py-2">.col-md-4</div>
    <div class="col-md-4 bg-success text-white text-center py-2">.col-md-4</div>
</div>
            

<div class="row g-0">
    <div class="col-md-4 bg-primary text-white text-center py-2">.col-md-4</div>
    <div class="col-md-4 bg-secondary text-white text-center py-2">.col-md-4</div>
    <div class="col-md-4 bg-success text-white text-center py-2">.col-md-4</div>
</div>
            

<div class="row align-items-start">
    <div class="col-md-4 bg-primary text-white text-center py-2">.align-items-start</div>
    <div class="col-md-4 bg-secondary text-white text-center py-2">.align-items-start</div>
    <div class="col-md-4 bg-success text-white text-center py-2">.align-items-start</div>
</div>
<div class="row align-items-center my-3">
    <div class="col-md-4 bg-primary text-white text-center py-2">.align-items-center</div>
    <div class="col-md-4 bg-secondary text-white text-center py-2">.align-items-center</div>
    <div class="col-md-4 bg-success text-white text-center py-2">.align-items-center</div>
</div>
<div class="row align-items-end">
    <div class="col-md-4 bg-primary text-white text-center py-2">.align-items-end</div>
    <div class="col-md-4 bg-secondary text-white text-center py-2">.align-items-end</div>
    <div class="col-md-4 bg-success text-white text-center py-2">.align-items-end</div>
</div>
            

<div class="row justify-content-start">
    <div class="col-md-4 bg-primary text-white text-center py-2">.justify-content-start</div>
</div>
<div class="row justify-content-center my-3">
    <div class="col-md-4 bg-secondary text-white text-center py-2">.justify-content-center</div>
</div>
<div class="row justify-content-end">
    <div class="col-md-4 bg-success text-white text-center py-2">.justify-content-end</div>
</div>
            

<!-- Flex Direction -->
<div class="d-flex flex-column mb-2" style="background-color: #f8f9fa; padding: 10px;">
    <div class="p-2 bg-primary text-white">Item 1</div>
    <div class="p-2 bg-secondary text-white">Item 2</div>
    <div class="p-2 bg-success text-white">Item 3</div>
</div>
<div class="d-flex flex-row" style="background-color: #f8f9fa; padding: 10px;">
    <div class="p-2 bg-warning text-white">Item 1</div>
    <div class="p-2 bg-info text-white">Item 2</div>
    <div class="p-2 bg-light text-dark">Item 3</div>
</div>
            

<!-- Justification -->
<div class="d-flex justify-content-start mb-2" style="background-color: #f8f9fa; padding: 10px;">
    <div class="p-2 bg-primary text-white">Start</div>
    <div class="p-2 bg-secondary text-white">Item 2</div>
</div>
<div class="d-flex justify-content-center mb-2" style="background-color: #f8f9fa; padding: 10px;">
    <div class="p-2 bg-success text-white">Center</div>
    <div class="p-2 bg-warning text-white">Item 2</div>
</div>
<div class="d-flex justify-content-end" style="background-color: #f8f9fa; padding: 10px;">
    <div class="p-2 bg-danger text-white">End</div>
    <div class="p-2 bg-info text-white">Item 2</div>
</div>
<div class="d-flex justify-content-between" style="background-color: #f8f9fa; padding: 10px;">
    <div class="p-2 bg-dark text-white">Between 1</div>
    <div class="p-2 bg-light text-dark">Between 2</div>
</div>
<div class="d-flex justify-content-around" style="background-color: #f8f9fa; padding: 10px;">
    <div class="p-2 bg-primary text-white">Around 1</div>
    <div class="p-2 bg-secondary text-white">Around 2</div>
</div>
            

<!-- Alignement Vertical -->
<div class="d-flex align-items-start mb-2" style="height: 100px; background-color: #f8f9fa; padding: 10px;">
    <div class="p-2 bg-primary text-white">Start</div>
    <div class="p-2 bg-secondary text-white">Item 2</div>
</div>
<div class="d-flex align-items-center mb-2" style="height: 100px; background-color: #f8f9fa; padding: 10px;">
    <div class="p-2 bg-success text-white">Center</div>
    <div class="p-2 bg-warning text-white">Item 2</div>
</div>
<div class="d-flex align-items-end" style="height: 100px; background-color: #f8f9fa; padding: 10px;">
    <div class="p-2 bg-danger text-white">End</div>
    <div class="p-2 bg-info text-white">Item 2</div>
</div>
<div class="d-flex align-items-baseline" style="height: 100px; background-color: #f8f9fa; padding: 10px;">
    <div class="p-2 bg-success text-white">Baseline 1</div>
    <div class="p-2 bg-warning text-white">Baseline 2</div>
</div>
            

<!-- Flex Wrap -->
<div class="d-flex flex-wrap" style="background-color: #f8f9fa; padding: 10px;">
    <div class="p-2 bg-primary text-white">Item 1</div>
    <div class="p-2 bg-secondary text-white">Item 2</div>
    <div class="p-2 bg-success text-white">Item 3</div>
    <div class="p-2 bg-warning text-white">Item 4</div>
    <div class="p-2 bg-info text-white">Item 5</div>
</div>
            

<!-- Order -->
<div class="d-flex" style="background-color: #f8f9fa; padding: 10px;">
    <div class="p-2 bg-primary text-white order-2">Item 1</div>
    <div class="p-2 bg-secondary text-white order-1">Item 2</div>
    <div class="p-2 bg-success text-white order-3">Item 3</div>
</div>
            

<!-- Display Block -->
<div class="d-flex flex-column">
    <div class="d-block p-2 bg-primary text-white">Block Element 1</div>
    <div class="d-block p-2 bg-secondary text-white">Block Element 2</div>
</div>
            

<!-- Display Inline -->
<div class="d-inline">
    <div class="p-2 bg-success text-white">Inline Element 1</div>
    <div class="p-2 bg-danger text-white">Inline Element 2</div>
</div>
            

<!-- Display Inline-Block -->
<div class="d-inline-block">
    <div class="p-2 bg-warning text-dark">Inline-Block Element 1</div>
    <div class="p-2 bg-info text-white">Inline-Block Element 2</div>
</div>
            

<!-- Display None -->
<div class="d-none" id="hiddenElement">
    <div class="p-2 bg-danger text-white">Caché</div>
</div>
Afficher/Cacher
            

<!-- Display Flex -->
<div class="d-flex" style="background-color: #f8f9fa; padding: 10px;">
    <div class="p-2 bg-primary text-white">Flex Item 1</div>
    <div class="p-2 bg-secondary text-white">Flex Item 2</div>
    <div class="p-2 bg-success text-white">Flex Item 3</div>
</div>
            

<!-- Display Grid -->
<div class="d-grid gap-2" style="background-color: #f8f9fa; padding: 10px;">
    <div class="p-2 bg-primary text-white">Grid Item 1</div>
    <div class="p-2 bg-secondary text-white">Grid Item 2</div>
    <div class="p-2 bg-success text-white">Grid Item 3</div>
</div>
            

<!-- Alignement du Texte -->
<div class="text-start" style="background-color: #f8f9fa; padding: 10px;">
    <p class="bg-primary text-white">Texte Aligné à Gauche</p>
</div>
<div class="text-center" style="background-color: #f8f9fa; padding: 10px;">
    <p class="bg-secondary text-white">Texte Centré</p>
</div>
<div class="text-end" style="background-color: #f8f9fa; padding: 10px;">
    <p class="bg-success text-white">Texte Aligné à Droite</p>
</div>
            

<!-- Couleur du Texte -->
<p class="text-primary">Texte en Couleur Principale</p>
<p class="text-secondary">Texte en Couleur Secondaire</p>
<p class="text-success">Texte en Couleur de Succès</p>
<p class="text-danger">Texte en Couleur d'Erreur</p>
<p class="text-warning">Texte en Couleur d'Avertissement</p>
<p class="text-info">Texte en Couleur d'Information</p>
<p class="text-light bg-dark">Texte Clair</p>
<p class="text-dark">Texte Foncé</p>
<p class="text-muted">Texte Grisé</p>
<p class="text-white bg-dark">Texte Blanc sur Fond Foncé</p>
            

<!-- Décoration du Texte -->
<p class="text-decoration-none">Texte sans Soulignement</p>
<p class="text-decoration-underline">Texte Souligné</p>
<p class="text-decoration-line-through">Texte Barré</p>
            

<!-- Épaisseur de Police -->
<p class="fw-normal">Texte Normal</p>
<p class="fw-bold">Texte en Gras</p>
<p class="fw-light">Texte Léger</p>
<p class="fw-bolder">Texte Très Gras</p>
            

<!-- Transformation du Texte -->
<p class="text-lowercase">texte en minuscules</p>
<p class="text-uppercase">TEXTE EN MAJUSCULES</p>
<p class="text-capitalize">Texte avec Première Lettre en Majuscule</p>
            

<!-- Texte Placeholder de Base -->
<p class="placeholder-glow">
    <span class="placeholder col-6"></span>
    <span class="placeholder col-4"></span>
    <span class="placeholder col-8"></span>
</p>
            

<!-- Placeholder Animé (Wave) -->
<p class="placeholder-wave">
    <span class="placeholder col-12"></span>
    <span class="placeholder col-10"></span>
    <span class="placeholder col-8"></span>
</p>
            

<!-- Placeholder d'Image -->
<svg class="bd-placeholder-img img-fluid" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false">
    <title>Placeholder</title>
    <rect width="100%" height="100%" fill="#868e96"></rect>
</svg>
            

<div class="bg-light p-2">
    <div class="float-start">Élément flottant à gauche</div>
    <div class="float-end">Élément flottant à droite</div>
    <div class="clearfix"></div>
    <p class="mt-2">Texte normal après le clearfix.</p>
</div>
            

<!-- Exemples de texte et fond colorés -->
<p class="text-primary">Texte primaire</p>
<p class="text-secondary">Texte secondaire</p>
<p class="bg-primary text-white p-2">Fond bleu avec texte blanc</p>
<!-- autres variantes -->
            

<a href="#" class="link-primary">Lien primaire</a>
<a href="#" class="link-secondary">Lien secondaire</a>
<!-- autres variantes -->
            

<!-- Exemples de positionnement -->
<div class="position-relative bg-light" style="height: 150px;">
    <div class="position-absolute top-0 start-0 bg-primary text-white p-2">Top Start</div>
    <!-- autres éléments positionnés -->
</div>
            

<!-- Exemples de ratio -->
<div class="ratio ratio-1x1">
    <div class="bg-secondary text-white d-flex align-items-center justify-content-center">1x1</div>
</div>
<div class="ratio ratio-4x3">
    <div class="bg-primary text-white d-flex align-items-center justify-content-center">4x3</div>
</div>
            

<div class="d-grid gap-2">
    <button class="btn btn-primary" type="button">Button 1</button>
    <!-- autres éléments stackés -->
</div>
            

<!-- Lien étendu -->
<div class="position-relative bg-light p-4" style="width: 200px;">
    <a href="#" class="stretched-link">Lien étendu</a>
</div>
            

<p class="text-truncate" style="width: 150px;">
    Ceci est un texte long qui sera tronqué.
</p>
            

<!-- Exemple de ligne verticale -->
<div class="d-flex align-items-center">
    <div>Texte gauche</div>
    <div class="vr mx-3"></div>
    <div>Texte droite</div>
</div>
            

<p class="visually-hidden">
    Texte masqué mais accessible pour les lecteurs d'écran.
</p>
            

<!-- Exemples de Background -->
<div class="p-3 mb-2 bg-primary text-white">Fond bleu primaire</div>
<div class="p-3 mb-2 bg-secondary text-white">Fond gris secondaire</div>
<div class="p-3 mb-2 bg-success text-white">Fond vert succès</div>
<div class="p-3 mb-2 bg-danger text-white">Fond rouge danger</div>
<div class="p-3 mb-2 bg-warning text-dark">Fond jaune warning</div>
<div class="p-3 mb-2 bg-info text-dark">Fond cyan info</div>
<div class="p-3 mb-2 bg-light text-dark">Fond clair</div>
<div class="p-3 mb-2 bg-dark text-white">Fond sombre</div>
<div class="p-3 mb-2 bg-white text-dark">Fond blanc</div>
<div class="p-3 mb-2 bg-transparent">Fond transparent</div>
    

<!-- Exemples de Borders -->
<div class="border p-3 mb-2 border-primary">Bordure bleue</div>
<div class="border p-3 mb-2 border-success">Bordure verte</div>
<div class="border p-3 mb-2 border-danger">Bordure rouge</div>
<div class="border border-0 p-3 mb-2">Pas de bordure</div>
<div class="border border-top-0 p-3 mb-2">Pas de bordure supérieure</div>
<div class="border border-end-0 p-3 mb-2">Pas de bordure droite</div>
<div class="border border-bottom-0 p-3 mb-2">Pas de bordure inférieure</div>
<div class="border border-start-0 p-3 mb-2">Pas de bordure gauche</div>
<div class="border border-3 border-warning p-3 mb-2">Bordure épaisse et jaune</div>
<div class="rounded p-3 mb-2 border">Bords arrondis</div>
<div class="rounded-circle p-3 bg-secondary text-white mb-2">Cercle</div>
    

<!-- Exemples de Colors -->
<p class="text-primary">Texte primaire</p>
<p class="text-secondary">Texte secondaire</p>
<p class="text-success">Texte succès</p>
<p class="text-danger">Texte danger</p>
<p class="text-warning">Texte warning</p>
<p class="text-info">Texte info</p>
<p class="text-light bg-dark p-2">Texte clair sur fond sombre</p>
<p class="text-dark">Texte sombre</p>
<p class="text-muted">Texte atténué</p>
<p class="text-white bg-dark p-2">Texte blanc sur fond sombre</p>
    

<!-- Exemples de Display -->
<span class="d-inline bg-primary text-white p-2">Inline</span>
<span class="d-inline bg-secondary text-white p-2">Inline</span>
<div class="d-block bg-success text-white p-2">Block</div>
<div class="d-none d-md-block bg-info text-white p-2">Visible sur écrans moyens et plus</div>
<div class="d-flex bg-warning text-dark p-2">Flex</div>
<div class="d-inline-flex bg-danger text-white p-2">Inline Flex</div>
    

<!-- Exemples de Float -->
<div class="float-start p-2 bg-primary text-white">Flottant à gauche</div>
<div class="float-end p-2 bg-secondary text-white">Flottant à droite</div>
<div class="clearfix"></div>
    

<!-- Exemples de Opacity -->
<div class="bg-primary text-white p-2 opacity-25">Opacité 25%</div>
<div class="bg-primary text-white p-2 opacity-50">Opacité 50%</div>
<div class="bg-primary text-white p-2 opacity-75">Opacité 75%</div>
<div class="bg-primary text-white p-2 opacity-100">Opacité 100%</div>
    

<!-- Exemples de Position -->
<div class="position-relative bg-light" style="height: 150px;">
    <div class="position-absolute top-0 start-0 bg-primary text-white p-2">Top Start</div>
    <div class="position-absolute top-0 end-0 bg-secondary text-white p-2">Top End</div>
    <div class="position-absolute bottom-0 start-0 bg-success text-white p-2">Bottom Start</div>
    <div class="position-absolute bottom-0 end-0 bg-danger text-white p-2">Bottom End</div>
    <div class="position-absolute top-50 start-50 translate-middle bg-info text-white p-2">Center</div>
</div>
    

<!-- Exemples de Shadows -->
<div class="shadow-none p-3 mb-2 bg-light">Aucune ombre</div>
<div class="shadow-sm p-3 mb-2 bg-light">Ombre légère</div>
<div class="shadow p-3 mb-2 bg-light">Ombre moyenne</div>
<div class="shadow-lg p-3 mb-2 bg-light">Ombre intense</div>
    

<!-- Exemples de Sizing -->
<div class="w-25 p-3 mb-2 bg-primary text-white">Width 25%</div>
<div class="w-50 p-3 mb-2 bg-secondary text-white">Width 50%</div>
<div class="w-75 p-3 mb-2 bg-success text-white">Width 75%</div>
<div class="w-100 p-3 mb-2 bg-danger text-white">Width 100%</div>
<div class="h-25 bg-info text-white d-inline-block" style="width: 100px;">Height 25%</div>
<div class="h-50 bg-warning text-dark d-inline-block" style="width: 100px;">Height 50%</div>
<div class="h-75 bg-dark text-white d-inline-block" style="width: 100px;">Height 75%</div>
    

<!-- Exemples de Spacing -->
<div class="p-2 mb-2 bg-primary text-white">Padding 2</div>
<div class="p-3 mb-2 bg-secondary text-white">Padding 3</div>
<div class="m-2 p-2 bg-success text-white">Margin et Padding 2</div>
<div class="m-5 p-3 bg-danger text-white">Margin 5, Padding 3</div>
    

<!-- Exemples de Text -->
<p class="text-lowercase">Texte en minuscule</p>
<p class="text-uppercase">Texte en majuscule</p>
<p class="text-capitalize">Texte en capitales</p>
<p class="fw-bold">Texte en gras</p>
<p class="fw-normal">Texte normal</p>
<p class="fw-light">Texte léger</p>
<p class="fst-italic">Texte italique</p>
<p class="text-decoration-underline">Texte souligné</p>
<p class="text-decoration-line-through">Texte barré</p>
    

<!-- Exemples de Vertical Align -->
<span class="align-baseline bg-light">Alignement baseline</span>
<span class="align-top bg-light">Alignement top</span>
<span class="align-middle bg-light">Alignement middle</span>
<span class="align-bottom bg-light">Alignement bottom</span>
<span class="align-text-top bg-light">Alignement text-top</span>
<span class="align-text-bottom bg-light">Alignement text-bottom</span>
    

<!-- Exemples de Visibility -->
<p class="visible">Visible sur tous les écrans</p>
<p class="invisible">Invisible (masqué)</p>
<p class="d-none d-md-block">Visible sur les écrans md et plus grands</p>