Dans cette leçon, nous allons apprendre à créer et styliser des boutons avec Bootstrap 5.
Nous verrons comment changer leur couleur de fond, leur taille, leur forme, comment les grouper, comment les aligner…
Création d’un bouton avec Bootstrap 5
Pour commencer, nous allons créer un bouton tout ce qu’il y a de plus basique.
Pour ce faire, nous allons créer une balise <button> dans laquelle nous allons placer l’attribut type= »button« et la classe btn.
<button type= »button« class= »btn« >Bouton de base</button>
Pour mieux apercevoir les contours de base d’un bouton, rajoutons-lui une bordure avec la classe border (voir la leçon sur les bordures avec Bootstrap 5).
A noter que le type l’attribut type= »button« et la classe btn ne s’applique pas uniquement aux boutons, ils peuvent aussi s’appliquer aux éléments <a> ou <input>.
Maintenant que nous avons créé notre bouton, voyons comment le styliser.
Changer la couleur de fond d’un bouton avec Bootstrap 5
Si vous suivez cette formation depuis le début, vous savez que Bootstrap a créé différentes classes pour les couleurs, autrement je vous invite à voir la leçon sur les couleurs dans Bootstrap 5.
Pour changer la couleur de fond d’un bouton, nous allons tout simplement rajouter la classe de la couleur correspondante à celle souhaitée.
Attention cette classe de couleur doit être précédée d’une autre classe btn.
Exemple :
<button type= »button » class= »btn btn-primary« >Bouton de base</button>
Les différentes couleurs de boutons proposées par Bootstrap.
Bien sûr, rien ne vous empêche de donner à vos boutons une autre couleur que celles prédéfinies par Bootstrap.
Soit en rajoutant une classe dans votre propre fichier CSS (voir la leçon d’introduction a Bootstrap 5).
Soit en utilisant l’attribut style= »* »
Exemple pour un bouton de couleur orange et un texte en blanc.
Créer des effets de survol au passage de la souris sur le bouton (hover effect)
Bootstrap 5 fournit également huit boutons avec à la fois une bordure et un effet de « survol » (hover effect) au passage de la souris, avec la classe outline qui vient se rajouter a la classe btn-.
Changer la taille des boutons
Pour changer la taille des boutons nous allons créer à nouveau une classe btn à laquelle on va intégrer une classe de taille.
Elles sont à l’ordre de 3 :
- btn-lg: Grande taille (large)
- btn-md: Taille par défaut (large)
- btn-sm: Petite taille (small)
Créer un bouton de style "block"
Par défaut, les boutons sont des éléments « inline » qui occupent uniquement la largeur dont ils ont besoin. Pour créer un bouton de style de « block » qui s’étend sur toute la largeur de l’élément parent, on va utiliser la classe d-grid sur l’élément parent.
Exemple avec un <div> comme élément parent.
Exemple avec une colonne de 10 colonnes de large <col-10> comme élément parent.
Si vous avez plusieurs boutons de style bloc à la suite, il est possible de les espacer avec la classe gap-1 à 5.
Il est possible de changer les positions des boutons de style bloc selon la résolution d’écran en utilisant la classe d-*-block.
Exemple avec un point de transition de 768px (md).
En dessous de 768px
A partir de 768px
Ajuster la largeur des boutons de style "block"
Vous pouvez ajuster la largeur de vos boutons de style bloc en les plaçant dans des colonnes avec les classes col-*
Exemple avec 3 boutons de 6 colonne de large.
Centrer les boutons de style "block"
Pour centrer les boutons nous allons utiliser la classe mx-auto sur la division <div> qui les contient.
Créer un bouton actif / désactivé avec Bootstrap 5
Pour changer le style d’un bouton actif nous allons utiliser la classe active alors que pour le désactiver on utilisera la classe disabled.
Créer un groupe de boutons avec Bootstrap 5
Nous allons voir maintenant comment créer et regrouper une série de boutons.
Les classes de bases à utiliser sont :
- btn
- btn-group
La classe btn-group va être utilisée sur la balise <div> qui contient les boutons du groupe tandis que la classe btn va être placée dans la balise <button>
Exemple :
Créer un groupe de bouton "Checkbox" et "Radio"
Ces boutons sont un peu plus complexes à créer, nous allons devoir ajouter à la fois les balises <input> et <label> et un attribut avec type qui sera au choix checkbox ou radio. Nous devrons aussi rajouter un ID un attribut for et les classes btn-check et btn-outline. Pour finir, on ajoutera l’attribut autocomplete avec la valeur off.
Voyons cela étape par étape pour un bouton de type checkbox
1 : On crée une division et on lui signale qu’elle va contenir un groupe de boutons avec la classe btn-group.
<div class= »btn-group« >
2 : On crée la balise input et on y place le type checkbox, la classe btn-check et on place un ID ainsi que l’attribut autocomplete avec la valeur off.
<input type= »checkbox » class= »btn-check » id= »btncheck1 » autocomplete= »off »>
3 : On crée la balise label dans laquelle on place les classes btn pour stipuler que le label doit avoir la forme d’un bouton, la classe btn-outline-* pour avoir effet de survol au passage de la souris et déterminer une couleur de fond. Enfin, on place un attribut for auquel on donne pour valeur l’id placé précédemment dans la balise input.
<label class= »btn btn-outline-primary » for= »btncheck1« >Checkbox 1</label>
On répète les opérations 2 et 3 pour tous les boutons du groupe.
Créer un bouton radio
C’est très simple, il vous suffit de reprendre le code ci-dessus et changer, dans le type de la balise input, la valeur check par la valeur radio.
Dans cette même balise on rajoutera l’attribut name avec la valeur de son choix, dans notre exemple btnradio.
Bouton de type checkbox :
<input type= »checkbox » class= »btn-check » id= »btncheck1 » autocomplete= »off« >
<label class= »btn btn-outline-primary » for= »btncheck1« >Checkbox 1</label>
Bouton de type radio :
<input type= »radio » class= »btn-check » name= »btnradio » id= »btnradio1 » autocomplete= »off« >
<label class= »btn btn-outline-primary » for= »btnradio1« >Radio 1</label>
Changer la taille d’un groupe de bouton
On a vu que pour changer la taille des boutons on pouvait utiliser les classes suivantes :
- btn-lg: Grande taille (large)
- btn-md: Taille par défaut (large)
- btn-sm: Petite taille (small)
Cette dernière était placée dans la balise <button>
Bouton grande taille
Pour changer la taille de tous les boutons d’un groupe il suffit de remplacer la classe btn-* par la classe btn-group-lg et de la placer non pas sur le bouton mais sur l’élément parent (<div> dans notre exemple) du groupe.
Exemple :
Placer des groupes de boutons côte à côte
Les boutons sont des éléments « inline« , ils se placent donc côte à côte par défaut, contrairement aux éléments « block« qui eux se placent les uns en dessous des autres.
Pour placer des groupes de boutons côte à côte et avoir une petite marge par défaut entre les deux groupes, il suffit donc de les placer dans deux divisions différentes.
Pour rappel :
On peut transformer les boutons en élément « block« en plaçant la classe d-grid sur l’élément parent.
<div class= »btn-group d-grid« >
Ce placement des boutons « inline » est très utile si vous souhaitez créer une barre d’outils composée de boutons.
Créer un groupe de boutons avec menu déroulant
Pour créer un groupe de boutons avec menu déroulant, on va reprendre les classes et attributs vus dans la leçon créer un menu déroulant avec Bootstrap 5.
- dropdown-toggle
- data-bs-toggle= »dropdown«
Dans notre exemple, nous allons créer un groupe de 3 boutons, le dernier d’entre eux aura un menu déroulant.
Pour ce faire, on commence par créer une division à qui on ajoute la classe btn-group pour stipuler que l’on va créer un groupe bouton.
Nous plaçons ensuite les trois boutons…
<div class= »btn-group« >
<button type= »button » class= »btn btn-primary« >Bouton 1</button>
<button type= »button » class= »btn btn-primary« >Bouton 2</button>
<button type= »button » class= »btn btn-primary dropdown-toggle » data-bs-toggle= »dropdown« >Bouton 3</button>
Puis, nous créons les liens du menu déroulant avec la classe dropdown-menu sur la balise <ul> et la classe dropdown-item sur les balises de liens <a> .
Créer une barre d’outils avec des boutons avec Bootstrap 5
Pour créer une barre d’outils avec des boutons on va créer une première division <div> et y intégrer la classe btn-toolbar.
<div class=« btn-toolbar« >
Il ne nous reste plus qu’à placer à l’intérieur de cette division, la division qui contient tous nos groupes de boutons.
Ps : Dans l’exemple ci-dessous, j’ai placé une petite marge externe droite (me-2) pour espacer les différents groupes.
Aligner verticalement un groupe de boutons avec Bootstrap 5
Pour aligner verticalement un groupe de boutons, on remplace la classe btn-group par btn-group-vertical.
<div class= »btn-group« > devient <div class= »btn-group-vertical« >
Exemple :
