Bootstrap 5 : Les boutons

Créer des boutons avec Bootstrap 5

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…

Table des matieres

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).

Création d’un bouton 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>.

Création d’un bouton avec Bootstrap 5

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.

Changer la couleur de fond d’un bouton avec Bootstrap 5

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.

Changer la couleur de fond d’un bouton avec Bootstrap 5

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-

Créer des effets de survol au passage de la souris sur le bouton (hover effect)

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)
Changer la taille des boutons

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.

Créer un bouton de style "block"

Exemple avec une colonne de 10 colonnes de large <col-10> comme élément parent.

Créer un bouton de style "block"

Si vous avez plusieurs boutons de style bloc à la suite, il est possible de les espacer avec la classe gap-1 à 5.

Créer un bouton de style "block"

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).

Créer un bouton de style "block"

En dessous de 768px

A partir de 768px

Créer un bouton de style "block"
Créer un bouton de style "block"

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.

Ajuster la largeur des boutons de style bloc
Ajuster la largeur des boutons de style bloc

Centrer les boutons de style "block"

Pour centrer les boutons nous allons utiliser la classe mx-auto sur la division <div> qui les contient.

Centrer les boutons de style block avec Bootstrap 5
Centrer les boutons de style block avec Bootstrap 5
Centrer les boutons de style block avec Bootstrap 5

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 bouton actif / désactivé avec Bootstrap 5

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 boutons avec Bootstrap 5

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 groupe de bouton checkbox et radio bootstrap 5

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>

Créer un groupe de bouton checkbox et radio bootstrap 5

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 :

Changer la taille d’un groupe de bouton Bootstrap 5

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.

Placer des groupes de boutons cote à cote Bootstrap 5

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“>

Placer des groupes de boutons cote à cote Bootstrap 5

Ce placement des boutonsinline” 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-toggledata-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 un groupe de boutons avec menu déroulant
Créer un groupe de boutons avec menu déroulant

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.

Créer une barre d’outils avec des boutons avec Bootstrap 5

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 :

Créer un groupe de boutons avec un alignement vertical Bootstrap 5
Créer un groupe de boutons avec menu déroulant
Nous serions ravis de connaître votre avis

Laisser un commentaire

error: Content is protected !!
 
BOOGLIT
Logo
Enable registration in settings - general
Compare items
  • Total (0)
Compare
0