Nous allons voir dans cette leçon comment créer et modifier des bordures avec Bootstrap 5 (couleur, épaisseur, arrondi).
Comment ajouter une bordure à un élément avec Bootstrap 5 ?
Pour ajouter une bordure à un élément, nous allons nous servir de la classe border. Cette dernière va créer par défaut une bordure de 1px de couleur gris clair.
Pour établir des bordures uniquement sur certains côtés nous allons utiliser les classes suivantes :
- border-top: bordure d’en haut.
- border-end: bordure de droite.
- border-bottom: bordure d’en bas.
- border-start: bordure de gauche.
Comment changer l’épaisseur de la bordure ?
Une nouveauté de Bootstrap 5 est la possibilité de changer l’épaisseur des bordures qui est de 1px par défaut.
6 choix d’épaisseur sont disponibles :
- 0 : pour enlever la bordure.
- 1 : épaisseur 1 px.
- 2 : épaisseur 2 px.
- 3 : épaisseur 3 px.
- 4 : épaisseur 4 px.
- 5 : épaisseur 5 px.
Pour changer l’épaisseur nous allons devoir utiliser la classe border-* que l’on viendra rajouter a la classe aux classes border de base.
<h3 class= »border border-3« >Bordure 3 px</h3>
<h3 class= »border-top border-3« >Bordure 3 px</h3>
La première classe border déclare la bordure la seconde détermine son épaisseur.
Ps : border-1 est le choix par défaut.
Exemple :
Il n’est par contre pas possible de choisir des épaisseurs différentes pour chaque côté.
Comment enlever des bordures sur certains côtés ?
Si nous voulons enlever un des bordures nous allons rajouter à la classe border, les classe border-top, border-bottom, border-start ou border-end accompagné du nombre 0.
Exemple :
Il est bien sûr possible d’additionner les classes, par exemple créons une bordure de 5 px sans bordure à droite.
Je récapitule :
- border : j’entoure mon élément (titre h3) d’une bordure.
- border-end-0 : j’enlève la bordure située à droite.
- border-5 : je donne une épaisseur de 5 px à ma bordure.
Comment changer la couleur des bordures avec Bootstrap 5 ?
Pour changer la couleur par défaut des bordures nous allons réutiliser les couleurs de base proposées par Bootstrap 5 que nous avons vu dans cette leçon : Les couleurs dans Bootstrap 5.
Nous allons créer dans un premier temps la bordure elle-même avec la classe border puis nous allons rajouter la classe correspondant à la couleur de bordure souhaitée.
Comment créer des bordures arrondies ?
Pour créer des bordures arrondies, nous allons utiliser différentes classes permettant d’accentuer ou diminuer l’arrondi.
- rounded : léger arrondi des 4 côtés de la bordure.
- rounded-top : léger arrondi sur les coins supérieurs de la bordure.
- rounded-end : léger arrondi légèrement sur les coins droits de la bordure.
- rounded-bottom : léger arrondi sur les coins inférieurs de la bordure ;
- rounded-start : léger arrondi sur les coins gauches de la bordure ;
- rounded-circle : arrondi complet de la bordure ;
- rounded-pill : arrondi de la bordure pour former un demi-cercle ;
- rounded-0 : efface l’arrondi d’une bordure ;
Exemple :
Pour créer une bordure de 5px de large avec des coins légèrement arrondis :
<h3 class= »border border-5 rounded« >Exemple</h3>
- Je crée la bordure avec la classe border.
- Je donne à la bordure une épaisseur de 5px avec la classe border-5.
- J’arrondis les coins de 4 cotés avec la classe rounded.
Pour arrondir seulement certains côtés il suffit d’additionner les classes :
Si vous souhaitez avoir des arrondis plus prononcés, il est possible de rajouter un nombre a la classe rounded.
- rounded-0 : supprime les arrondis.
- rounded-1 : arrondi par défaut
- rounded-2 : arrondi légèrement plus prononcé que l’arrondi par défaut.
- rounded-3 : arrondi légèrement plus prononcé que l’arrondi par défaut.
A noter que toutes les classes que nous avons vu dans cette leçon ne s’appliquent pas uniquement aux bordures, elles peuvent aussi être appliquées aux éléments (dans les exemples ci-dessus, l’élément est le titre h3) et aux colonnes que nous allons voir dans la prochaine leçon.
Exemple pour les éléments:
Créons 3 éléments avec 3 titres h3, mettons une couleur de fond sur chacun d’entre eux et appliquons-leur des arrondis.
Exemple pour les colonnes:
