Cours de frontières en bootstrap 5 | Expliqué

Les frontières sont utilisées pour mettre en évidence et spécifier l'élément ou l'image qui aide l'utilisateur à mieux comprendre les choses. Les bordures sont utilisées par des images, des textares, différentes boîtes pour les styliser en fonction de l'exigence de l'utilisateur.

Dans cet article, vous obtenez des connaissances détaillées sur les classes bootstrap 5 pour

• Ajout d'une frontière
• Élimination de la frontière
• Couleurs de bordure
• Largeur de la bordure
• Taille des frontières
• Tailles de rayon

Cours de frontières en bootstrap 5

Dans Bootstrap 5 Les bordures sont créées en ajoutant .frontière Classe à n'importe quelle div ou balise d'image ou n'importe quel formulaire ou textarea.

Cours pour appliquer la bordure

Bootstrap 5 fournit quelques classes pour spécifier la bordure à tout élément HTML qui est expliqué ci-dessous:

Frontière

.frontière La classe est utilisée pour appliquer des bordures sur les quatre côtés de la boîte.

Code

Cours de frontière

Lorem ipsum Dolor Sit Amet Consectetur Adipiscing Elit. Saufluri ipsum culpa neque Commodi Modi Eaque?

C'est ainsi que vous créez des bordures pour les quatre côtés.

Tête de frontière

.frontière La classe est utilisée pour appliquer la bordure sur le côté supérieur de la boîte.

Code

Cours de frontière

Lorem ipsum Dolor Sit Amet Consectetur Adipiscing Elit. Saufluri ipsum culpa neque Commodi Modi Eaque?

C'est ainsi que vous créez une bordure pour le côté supérieur.

Bordure du bas

.Bordure du bas La classe est utilisée pour appliquer la bordure sur le côté inférieur de la boîte.

Code

Cours de frontière

Lorem ipsum Dolor Sit Amet Consectetur Adipiscing Elit. Saufluri ipsum culpa neque Commodi Modi Eaque?

C'est ainsi que vous créez une bordure pour le côté inférieur.

Démarrage de la frontière

.démarrer au frontière La classe est utilisée pour appliquer la bordure sur le côté gauche de la boîte.

Code

Cours de frontière

Lorem ipsum Dolor Sit Amet Consectetur Adipiscing Elit. Saufluri ipsum culpa neque Commodi Modi Eaque?

C'est ainsi que vous créez une bordure pour le côté gauche.

Frontière

.frontière La classe est utilisée pour appliquer la bordure sur le côté droit de la boîte.

Code

Cours de frontière

Lorem ipsum Dolor Sit Amet Consectetur Adipiscing Elit. Saufluri ipsum culpa neque Commodi Modi Eaque?

C'est ainsi que vous créez une bordure pour le côté droit.

Classes pour supprimer la bordure

Pour retirer la bordure de n'importe quel côté, ajoutez simplement -0 à n'importe quelle classe d'ajout de frontière

De haut

Pour retirer la bordure du haut, ajoutez .border-top-0 avec .frontière classe.

Code

Cours de frontière

Lorem ipsum Dolor Sit Amet Consectetur Adipiscing Elit. Saufluri ipsum culpa neque Commodi Modi Eaque?

C'est ainsi que vous retirez la bordure du haut.

Du bas

Pour retirer la bordure du bas Ajouter .Border-Bottom-0 avec .frontière classe.

Code

Cours de frontière

Lorem ipsum Dolor Sit Amet Consectetur Adipiscing Elit. Saufluri ipsum culpa neque Commodi Modi Eaque?

C'est ainsi que vous retirez la bordure du bas.

De gauche

Pour retirer la bordure de la gauche Ajouter .border-start-0 avec .frontière classe.

Code

Cours de frontière

Lorem ipsum Dolor Sit Amet Consectetur Adipiscing Elit. Saufluri ipsum culpa neque Commodi Modi Eaque?

C'est ainsi que vous retirez la bordure du côté gauche.

De droite

Pour retirer la bordure de la droite, ajoutez .Border-End-0 avec .frontière classe.

Code

Cours de frontière

Lorem ipsum Dolor Sit Amet Consectetur Adipiscing Elit. Saufluri ipsum culpa neque Commodi Modi Eaque?

C'est ainsi que vous retirez la bordure du côté droit.

Cours de couleurs de bordure

Pour ajouter des couleurs de bordure ajouter simplement .Border-Primaire / Info / Success / Danger / Warning / Dark avec .frontière classe.

Code

Cours de frontière

C'est ainsi que vous donnez de la couleur à vos frontières.

Classes de largeur des frontières

Pour donner de l'épaisseur à votre bordure d'utilisation .Border-1 / 2/3/4/5 classe avec .frontière classe.

Code

Cours de frontière

C'est ainsi que vous donnez de l'épaisseur à votre frontière.

Rayon frontalier

Pour spécifier le rayon de la frontière, utilisez .arrondi, .Arrondage / fin / inférieur / start / cercle / pilule Des classes.

Code

Cours de frontière

Sortir

Pour créer un cercle arrondi et une pilule arrondie:

Code

Cours de frontière

C'est ainsi que vous spécifiez le rayon de la frontière.

Tailles de rayon

Pour spécifier la taille du rayon de la bordure, ajoutez simplement .Arrondi-0 / 1/2/3 Des classes.

Code

Cours de frontière

Sortir

C'est ainsi que vous spécifiez la taille de la radius frontalière.

Conclusion

Pour donner une frontière à n'importe quelle div ou élément, ajoutez un .frontière classe. Pour ajouter une bordure unilatérale Ajouter .bordure / inférieur / fin / début classe avec .frontière classe et pour retirer la bordure d'un côté simplement ajouter -0. Pour spécifier la couleur de la bordure Ajouter .Border-Primaire / Success / Danger / Info / Warning / Dark / Light / Light classe.
Pour donner de l'épaisseur à la frontière ajouter .Border-1 / 2/3/4/5, Pour spécifier le rayon de bordure Ajouter .arrondi, .Arrondage / inférieur / fin / start / cercle / pilule classe. Pour spécifier la taille du rayon de bordure Ajouter .Arrondi-0 / 1/2/3 classe.