border-*.
Ajouter une bordure classique à un élément en utilisant Bootstrap
Nous allons déjà pouvoir ajouter une bordure carrée autour d’un élément ou sur un côté spécifique d’un élément. Pour cela, nous allons utiliser les classes suivantes :
.border: va ajouter une bordure de couleur grise par défaut tout autour de l’élément ;.border-top: va ajouter une bordure de couleur grise par défaut uniquement sur le côté haut de l’élément ;.border-right: va ajouter une bordure de couleur grise par défaut à droite uniquement de l’élément ;.border-bottom: va ajouter une bordure de couleur grise par défaut uniquement sur le côté bas de l’élément ;.border-left: va ajouter une bordure de couleur grise par défaut à gauche uniquement de l’élément.
See the Pen
Bootstrap 2.5.1 by Pierre (@pierregiraud)
on CodePen.
Enlever certaines bordures d’un élément
Bootstrap nous propose une fonctionnalité relativement intéressante qui va être de pouvoir supprimer toutes les bordures d’un élément ou seulement une bordure d’un côté en particulier. Nous allons pouvoir faire cela en ajoutant « 0 » en fin de classe border-*. Cela va donc nous permettre de gérer très simplement quelles bordures doivent s’afficher autour d’un élément. Pour cela, nous allons utiliser les classes suivantes :
.border-0: supprime toutes les bordures de l’élément ;.border-top-0: supprime la bordure supérieure de l’élément ;.border-right-0: supprime la bordure droite de l’élément ;.border-bottom-0: supprime la bordure inférieure de l’élément ;.border-left-0: supprime la bordure gauche de l’élément.
See the Pen
Bootstrap 2.5.2 by Pierre (@pierregiraud)
on CodePen.
Notez ici que j’ai également utilisé une classe border simple pour ajouter des bordures tout autour de mes éléments par défaut. En effet, pour supprimer certaines bordures, il faut déjà que des bordures aient été ajoutées à un élément !
Créer des bordure de couleur avec Bootstrap
Nous allons pouvoir réutiliser le système de couleurs contextuelles de Bootstrap afin de personnaliser la couleur de nos bordures. Les classes disponibles dans la thème de base sont les suivantes :
.border-primary: la bordure créée sera colorée en bleu ;.border-secondary: la bordure créée sera colorée en gris foncé ;.border-success: la bordure créée sera colorée en vert ;.border-danger: la bordure créée sera colorée en rouge ;.border-warning: la bordure créée sera colorée en jaune ;.border-info: la bordure créée sera colorée en une autre teinte de bleu ;.border-light: la bordure créée sera colorée en gris clair ;.border-dark: la bordure créée sera colorée en noir ;.border-white: la bordure créée sera colorée en blanc.
See the Pen
Bootstrap 2.5.3 by Pierre (@pierregiraud)
on CodePen.
Notez bien que ces classes ne vont pas créer de bordures mais simplement ajouter une couleur à une bordure déjà existante. Il va donc également falloir utiliser une classe border-* pour avant tout créer des bordures pour nos éléments.
Créer des bordures arrondies avec Bootstrap
Nous allons finalement pouvoir changer le comportement et notamment arrondir des bordures avec Bootstrap en utilisant les classes suivantes. Notez bien encore une fois que ces classes ne vont pas créer de bordures mais simplement modifier l’apparence d’une bordure déjà existante. Pour créer notre bordure, nous devrons également utiliser une classe border-*.
rounded: arrondit légèrement une bordure ;rounded-top: arrondit légèrement les coins supérieurs d’une bordure ;rounded-right: arrondit légèrement les coins droits d’une bordure ;rounded-bottom: arrondit légèrement les coins inférieurs d’une bordure ;rounded-left: arrondit légèrement les coins gauche d’une bordure ;rounded-circlearrondit complètement la bordure ;rounded-pill: arrondit la bordure jusqu’à obtenir un demi-cercle ;rounded-0: annule l’arrondi d’une bordure ;
Notez qu’on va également pouvoir exercer un certain contrôle sur l’importance de l’arrondi des bordures avec les classes .rounded-sm et .rounded-lg qui vont nous permettre de définir des arrondis moins prononcés ou au contraire plus prononcés.
See the Pen
Bootstrap 2.5.4 by Pierre (@pierregiraud)
on CodePen.
Modifier l’épaisseur ou le style d’une bordure
Bootstrap 4 ne propose pas nativement de classe nous permettant de changer l’épaisseur ou le style (solid, dotted, etc.) d’une bordure. Si vous souhaitez ajouter ce type de comportement à vos bordures, il faudra alors rajouter vos propres règles ou créer vos propres classes en plus de ce qu’offre déjà Bootstrap.
