Créer des bordures avec Bootstrap 5

Créer des bordures avec Bootstrap 5

Nous allons voir dans cette leçon comment créer et modifier des bordures avec Bootstrap 5 (couleur, épaisseur, arrondi).

Table des matieres

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.

Comment ajouter une bordure à un élément avec Bootstrap 5 ?

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 ajouter une bordure à un élément avec Bootstrap 5 ?

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 :

Comment changer l’épaisseur de la bordure ?

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 :

Comment enlever des bordures sur certains côtés ?

Il est bien sûr possible d’additionner les classes, par exemple créons une bordure de 5 px sans bordure à droite.

Comment enlever des bordures sur certains côtés ?

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 changer la couleur des bordures avec Bootstrap 5 ?

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>

  1. Je crée la bordure avec la classe border.
  2. Je donne à la bordure une épaisseur de 5px avec la classe border-5.
  3. J’arrondis les coins de 4 cotés avec la classe rounded.
Comment créer des bordures arrondies ?
Comment créer des bordures arrondies ?

Pour arrondir seulement certains côtés il suffit d’additionner les classes :

Comment créer des bordures arrondies ?

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.
Comment créer des bordures arrondies ?

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.

Comment créer des bordures arrondies ?

Exemple pour les colonnes:

Comment créer des bordures arrondies ?
Nous serions ravis de connaître votre avis

Laisser un commentaire

error: Content is protected !!
 
BOOGLIT
Logo
Enable registration in settings - general
Compare items
  • Total (0)
Compare
0