Bootstrap 4 : Button group

Avec Bootstrap 4, il est facile de regrouper un certain nombre de buttons sur une ligne et avoir une disposition agréable. Pour faire ceci, il suffit d'utiliser la class .btn-group sur un conteneur <div>. Par défaut, les buttons snt alignés de façon horizontale.

 

 

<div class="btn-group">
    <button type="button" class="btn btn-info">Accueil</button>
    <button type="button" class="btn btn-info">A propos</button>
    <button type="button" class="btn btn-info">Contact</button>
</div>

Vous pouvez aligner les buttons de façon verticale avec la class .btn-group-vertical sur le conteneur.

 

 

<div class="btn-group-vertical">
    <button type="button" class="btn btn-info">Accueil</button>
    <button type="button" class="btn btn-info">A propos</button>
    <button type="button" class="btn btn-info">Contact</button>
</div>

Les groupes de buttons sont par défaut côte à côte. Voyons quelques exemples simples : 

 

 

<div class="btn-group">
    <button type="button" class="btn btn-info">Accueil</button>
    <button type="button" class="btn btn-info">A propos</button>
    <button type="button" class="btn btn-info">Contact</button>
</div>
<div class="btn-group">
    <button type="button" class="btn btn-info">Equipe</button>
    <button type="button" class="btn btn-info">Compétences</button>
    <button type="button" class="btn btn-info">Carrière</button>
</div>

 

 

<div class="btn-group-vertical">
    <button type="button" class="btn btn-info">Accueil</button>
    <button type="button" class="btn btn-info">A propos</button>
    <button type="button" class="btn btn-info">Contact</button>
</div>
<div class="btn-group-vertical">
    <button type="button" class="btn btn-info">Equipe</button>
    <button type="button" class="btn btn-info">Compétences</button>
    <button type="button" class="btn btn-info">Carrière</button>
</div>

 

 

<div class="btn-group">
    <button type="button" class="btn btn-info">Accueil</button>
    <button type="button" class="btn btn-info">A propos</button>
    <button type="button" class="btn btn-info">Contact</button>
</div>
<div class="btn-group-vertical">
    <button type="button" class="btn btn-info">Equipe</button>
    <button type="button" class="btn btn-info">Compétences</button>
    <button type="button" class="btn btn-info">Carrière</button>
</div>

Jouons maintenant un peu avec les couleurs : 

 

<div class="btn-group">
    <button type="button" class="btn btn-primary">(°-°)</button>
    <button type="button" class="btn btn-warning">(°_°)</button>
    <button type="button" class="btn btn-danger">(°.°)</button>
</div>
<div class="btn-group-vertical">
    <button type="button" class="btn btn-primary">(°-°)</button>
    <button type="button" class="btn btn-warning">(°_°)</button>
    <button type="button" class="btn btn-danger">(°.°)</button>
</div>

Les tailles

Il est possible d'appliquer une taille sur tous les buttons d'un groupe avec les class .btn-group-lg pour une grande taille, .btn-group-sm pour une petite taille. Par défaut , sans préciser, la taille normale est appliquée.

 

<div class="btn-group btn-group-sm">
    <button type="button" class="btn btn-primary">Accueil</button>
    <button type="button" class="btn btn-primary">A propos</button>
</div>
<div class="btn-group btn-group">
    <button type="button" class="btn btn-primary">Accueil</button>
    <button type="button" class="btn btn-primary">A propos</button>
</div>
<div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-primary">Accueil</button>
    <button type="button" class="btn btn-primary">A propos</button>
</div>

Imbrication de groupes de buttons

l'imbrication de groupes de buttons est pratique dans le cas où on souhaiterait associer un menu déroulant (on abordera dans un autre chapitre) à un groupe de buttons. Voyons cela dans l'exemple ci-dessous : 

 

<div class="btn-group">
    <button type="button" class="btn btn-secondary">Copier</button>
    <button type="button" class="btn btn-secondary">Coller</button>
    <button type="button" class="btn btn-secondary">Imprimer</button>					
    <div class="btn-group">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
            Titre
        </button>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">H1</a>
            <a class="dropdown-item" href="#">H2</a>
        </div>
    </div>
    <button type="button" class="btn btn-primary">Enregitrer</button>
</div>

 

 

<div class="btn-group-vertical">
    <button type="button" class="btn btn-secondary">Copier</button>
    <button type="button" class="btn btn-secondary">Coller</button>
    <button type="button" class="btn btn-secondary">Imprimer</button>					
    <div class="btn-group">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
            Titre
        </button>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">H1</a>
            <a class="dropdown-item" href="#">H2</a>
        </div>
    </div>
    <button type="button" class="btn btn-primary">Enregitrer</button>
</div>

 

Partager :
comments powered by Disqus

Suivez-moi sur Twitter

Copyright © 2010-2020 Lookman Design, tous droits réservés .