Les bordures UTILITAIRES:Bordures

Bootstrap propose plusieurs classes pour ajouter des bordures simples ou colorées aux éléments HTML voulus.

Les exemples de ce titre sont à télécharger dans le dossier nommé 12-Utilitaires-01.

1. Ajouter une bordure BORDURES:Ajouter

La classe .border permet d’ajouter une bordure à tous les côtés d’un élément.

Voici le code de cet exemple très simple :

<div class="border" style="width: 300px;"> 
        Integer posuere... 
</div> 

Voici l’affichage obtenu :

images/C12-001.png

Voici les propriétés utilisées par cette classe :

.border { 
        border: 1px solid #dee2e6!important; 
} 

2. Supprimer une bordure d’un côté BORDURES:Supprimer un côté

Bootstrap vous permet aussi de supprimer une bordure d’un des côtés de l’élément qui en contient. Pour cela il suffit d’ajouter la classe .border-cote-0, où le libellé cote indique quel côté ne doit pas avoir de bordure. :

  • .border-top-0 : pas de bordure côté haut.

  • .border-left-0 : pas de bordure côté gauche.

  • .border-bottom-0 : pas de bordure côté bas.

  • .border-right-0 : pas de bordure côté droit.

  • .border-0 : pas de bordure nulle part.

Voici le code utilisé pour cet exemple :

<div class="border border-0" style="width: 100px;...
Pour consulter la suite, découvrez le livre suivant :
couv_OW24BOO.png
60-signet.svg
En version papier
20-ecran_lettre.svg
En version numérique
41-logo_abonnement.svg
En illimité avec l'abonnement ENI
130-boutique.svg
Sur la boutique officielle ENI
Précédent
Les objectifs
Suivant
Le flottement