Comme vous avez pu le lire, Bootstrap 4 en version Alpha vient de sortir ce jeudi 19 août dernier. Le framework apporte dans ses valises quelques améliorations graphiques très appréciables. Parmi elles, les Boutons « outline » font leur apparition.
Créer un bouton avec Bootstrap
Pour rappel, la création d’un élément <button> sur Bootstrap doit comporter 2 classes CSS ainsi qu’un « type ». La seconde classe CSS .btn-primary n’est pas indispensable. Cette dernière permet d’apporter une couleur différente du bouton classique.
/* sans classe stylistique */ <button class="btn" type="submit">Bouton</button> /* Avec la classe stylistique "Primary" */ <button class="btn btn-primary" type="submit">Bouton</button>
Créer un bouton « outline »
On vous l’a fait pas : Bootstrap reste dans l’efficacité.
Afin d’afficher un style graphique différent des boutons classiques, il vous suffit d’ajouter -outline à la suite de la classe stylistique choisie. Par exemple, si vous désirez appliquer un outline à un bouton de classe .btn-primary, vous devez écrire .btn-primary-outline.
<button class="btn btn-primary-outline" type="button">Primary</button> <button class="btn btn-secondary-outline" type="button">Secondary</button> <button class="btn btn-success-outline" type="button">Success</button> <button class="btn btn-warning-outline" type="button">Warning</button> <button class="btn btn-danger-outline" type="button">Danger</button>
Découvre le résultat :