Les blocs de boutons BOUTONS:Bloc de boutons

Vous pouvez insérer des boutons en bloc qui soient responsives et affichés en pleine largeur. Pour cela, nous allons utiliser des classes « utilitaires » dédiées à la mise en forme.

Le dossier à télécharger pour ces exemples est nommé 09-Boutons-02.

1. Des boutons en pleine largeur BOUTONS:En pleine largeur

Voyons ce premier exemple :

<div class="col"> 
  <div class="d-grid gap-2"> 
    <button class="btn btn-primary" type="button">Bouton 1</button> 
    <button class="btn btn-primary" type="button">Bouton 2</button> 
    <button class="btn btn-primary" type="button">Bouton 3</button> 
    <button class="btn btn-primary" type="button">Bouton 4</button> 
  </div> 
</div> 

Voici l’affichage obtenu sur un écran large :

images/5new22-042.png

Voici l’affichage obtenu sur une largeur d’écran plus petite :

images/5new22-043.png

Les boutons s’adaptent bien à la largeur disponible dans la colonne qui dépend de la largeur de l’écran de diffusion.

Dans la colonne, la boîte <div> contenant les boutons utilise deux classes. La classe .d-grid permet d’utiliser une grille flexible d’affichage et la classe...

couv_OW5BOO.png

Découvrez 

le livre :

Aussi inclus dans nos :

Précédent
Les boutons classiques
Suivant
Les groupes de boutons