Créer des boutons « outline » avec Bootstrap 4

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.   Avant de commencer l’exercice, assurez-vous d’avoir bien télécharger la version 4 Alpha de Bootstrap sur le site […]

Posté le par Benoît Philibert|1362 vues

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.

 

Avant de commencer l’exercice, assurez-vous d’avoir bien télécharger la version 4 Alpha de Bootstrap sur le site officiel.

 

Démo

Editer dans jsfiddle

 

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 :

 

Démo

Editer dans jsfiddle

 


Ces articles pourraient vous intéresser

Tags

Commenter
Votre adresse email ne sera pas publiée. Champs obligatoire *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.