Boutons Bootstrap 5

Bootstrap 5 fournit des boutons avec différents styles.

Exemple

<button type="button" class="btn">Bouton de base</button> <button type="button" class="btn btn-primary">Bouton primaire</button> <button type="button" class="btn btn-secondary">Bouton secondaire</button> <button type="button" class="btn btn-success">Succès</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Avertissement</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-dark">Sombre</button> <button type="button" class="btn btn-light">Clair</button> <button type="button" class="btn btn-link">Lien</button>

Essayez-le vous-même »

Les classes de boutons peuvent être utilisées sur<a>, <button>, ou<input>éléments:

Exemple

<a href="#" class="btn btn-info" role="button">Bouton de lien</a> <button type="button" class="btn btn-info">Bouton</button> <input type="button" class="btn btn-info" value="Bouton de saisie"> <input type="submit" class="btn btn-info" value="Bouton d'envoi"> <input type="reset" class="btn btn-info" value="Bouton de réinitialisation">

Essayez-le vous-même »

Contour de bouton

Bootstrap 5 vous permet également de définir des contours de bouton, ajoutant un effet de surbrillance lorsque la souris passe sur le bouton.

Exemple

<button type="button" class="btn btn-outline-primary">Bouton primaire</button> <button type="button" class="btn btn-outline-secondary">Bouton secondaire</button> <button type="button" class="btn btn-outline-success">Succès</button> <button type="button" class="btn btn-outline-info">Info</button> <button type="button" class="btn btn-outline-warning">Avertissement</button> <button type="button" class="btn btn-outline-danger">Danger</button> <button type="button" class="btn btn-outline-dark">Sombre</button> <button type="button" class="btn btn-outline-light text-dark">Clair</button>

Essayez-le vous-même »

Différentes tailles de boutons

Bootstrap 5 peut définir la taille des boutons ; utilisez la classe.btn-lgpour définir des boutons grands, utilisez la classe.btn-smpour définir des boutons petits :

Exemple

<button type="button" class="btn btn-primary btn-lg">Grand bouton</button> <button type="button" class="btn btn-primary">Bouton par défaut</button> <button type="button" class="btn btn-primary btn-sm">Petit bouton</button>

Essayez-le vous-même »

Boutons au niveau bloc

En ajoutant la classe.btn-block, vous pouvez définir des boutons au niveau bloc, la classe.d-gridest placée sur l'élément parent :

Exemple

<div class="d-grid"> <button type="button" class="btn btn-primary btn-block">Bouton 1</button> </div>

Essayez-le vous-même »

Si vous avez plusieurs boutons au niveau bloc, vous pouvez utiliser la classe.gap-*pour les définir :

Exemple

<div class="d-grid gap-3"> <button type="button" class="btn btn-primary btn-block">Bouton de largeur 100%</button> <button type="button" class="btn btn-primary btn-block">Bouton de largeur 100%</button> <button type="button" class="btn btn-primary btn-block">Bouton de largeur 100%</button> </div>

Essayez-le vous-même »

Boutons actifs et désactivés

Les boutons peuvent être définis dans un état actif ou un état désactivé (non cliquable).

.activeclasse peut définir un bouton comme actif,disabledattribut peut définir un bouton comme non cliquable. Notez que l'élément <a> ne prend pas en charge l'attribut disabled ; vous pouvez ajouter le.disabledclasse pour désactiver les clics sur les liens.

Exemple

<button type="button" class="btn btn-primary active">Bouton actif</button> <button type="button" class="btn btn-primary" disabled>Bouton désactivé</button> <a href="#" class="btn btn-primary disabled">Lien désactivé</a>

Essayez-le vous-même »

Boutons de chargement

Nous pouvons également définir un bouton en cours de chargement.

Exemple

<button class="btn btn-primary"> <span class="spinner-border spinner-border-sm"></span> </button> <button class="btn btn-primary"> <span class="spinner-border spinner-border-sm"></span> Chargement.. </button> <button class="btn btn-primary" disabled> <span class="spinner-border spinner-border-sm"></span> Chargement.. </button> <button class="btn btn-primary" disabled> <span class="spinner-grow spinner-grow-sm"></span> Chargement.. </bouton>

Essayez-le vous-même »
Autres extensions