Bootstrap 4 Groupes de boutons
Bootstrap 4 nous permet de placer des boutons sur la même ligne.
Vous pouvez<div>ajouter à un élément.btn-groupla classe pour créer un groupe de boutons
Exemple
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Essayez-le vous-même »
Astuce :Nous pouvons utiliser.btn-group-lg|smla classe pour définir la taille du groupe de boutons.
Exemple
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Essayez-le vous-même »
Groupe de boutons vertical
Vous pouvez utiliser.btn-group-verticalla classe pour créer un groupe de boutons vertical :
Exemple
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Essayez-le vous-même »
Groupes de boutons imbriqués et menus déroulants
Nous pouvons placer un menu déroulant à l'intérieur d'un groupe de boutons :
Exemple
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Tablette</a>
<a class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
Essayez-le vous-même »
Menu déroulant à bouton divisé
Exemple
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
<span class="caret"></span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Tablette</a>
<a class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
Essayez-le vous-même »
Groupes de boutons verticaux et menus déroulants
Exemple
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Tablette</a>
<a class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
Essayez-le vous-même »
Groupes de boutons multiples
Les groupes de boutons peuvent être affichés côte à côte sur la même ligne :
Exemple
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">BMW</button>
<button type="button" class="btn btn-primary">Mercedes</button>
<button type="button" class="btn btn-primary">Volvo</button>
</div>
Essayez-le vous-même »