Boutons Bootstrap 4 : Styles et Variants

Boutons pleins et outline

Bootstrap 4 propose 8 variantes de couleur en deux modes : plein (.btn-*) et contour (.btn-outline-*).

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

<!-- Boutons outline -->
<button class="btn btn-outline-primary">Primary</button>
<button class="btn btn-outline-danger">Danger</button>
<button class="btn btn-outline-success">Success</button>

Résultat — boutons pleins :

Boutons outline :

A retenir: .btn seul ne suffit pas — ajoutez toujours une variante de couleur (.btn-primary, etc.).

Tailles de boutons

Trois tailles disponibles : .btn-lg, par défaut, .btn-sm. Ajoutez .btn-block pour occuper toute la largeur.

<button class="btn btn-primary btn-lg">Grand (btn-lg)</button>
<button class="btn btn-primary">Standard</button>
<button class="btn btn-primary btn-sm">Petit (btn-sm)</button>
<button class="btn btn-primary btn-block mt-2">Pleine largeur (btn-block)</button>

Résultat :

États : actif, désactivé, loading

Bootstrap gère les états actif, désactivé et vous pouvez simuler un état chargement avec le composant Spinner.

<button class="btn btn-primary active" aria-pressed="true">Actif</button>
<button class="btn btn-primary" disabled>Désactivé</button>
<a href="#" class="btn btn-secondary disabled" role="button" aria-disabled="true">Lien désactivé</a>

<!-- Bouton en chargement -->
<button class="btn btn-primary" id="btnLoad" onclick="simulateLoading(this)">
    Envoyer
</button>

<script>
function simulateLoading(btn) {
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm mr-2"></span>Envoi...';
    setTimeout(function() {
        btn.disabled = false;
        btn.innerHTML = '✓ Envoyé !';
    }, 2000);
}
</script>

Résultat — essayez chaque état :

Lien désactivé

Groupes de boutons

Regroupez des boutons avec .btn-group (horizontal) ou .btn-group-vertical. Utilisez .btn-group-toggle pour des sélecteurs visuels (radio/checkbox).

<!-- Groupe horizontal -->
<div class="btn-group" role="group">
    <button class="btn btn-outline-primary">Gauche</button>
    <button class="btn btn-outline-primary">Milieu</button>
    <button class="btn btn-outline-primary">Droite</button>
</div>

<!-- Toggle radio visuel -->
<div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-outline-secondary active">
        <input type="radio" name="vue" checked> Liste
    </label>
    <label class="btn btn-outline-secondary">
        <input type="radio" name="vue"> Grille
    </label>
    <label class="btn btn-outline-secondary">
        <input type="radio" name="vue"> Carte
    </label>
</div>

Groupe horizontal :

Toggle radio visuel (cliquez pour changer) :

☰ Liste ⊞ Grille ☷ Carte