Borders ^commun

Voici les possibilités offertes par la librairie au sujet des bordures. Certaines propriétés sont cumulatives.

<span class="border"></span>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>

Dans l'hypothèse que l'élément dispose d'une bordure, voici les exemples de suppressions de certaines d'entre elles.

<span class="border-0"></span>
<span class="border-top-0"></span>
<span class="border-end-0"></span>
<span class="border-bottom-0"></span>
<span class="border-start-0"></span>

<span class="border border-primary"></span>
<span class="border border-primary-subtle"></span>
<span class="border border-secondary"></span>
<span class="border border-secondary-subtle"></span>
<span class="border border-success"></span>
<span class="border border-success-subtle"></span>
<span class="border border-danger"></span>
<span class="border border-danger-subtle"></span>
<span class="border border-warning"></span>
<span class="border border-warning-subtle"></span>
<span class="border border-info"></span>
<span class="border border-info-subtle"></span>
<span class="border border-light"></span>
<span class="border border-light-subtle"></span>
<span class="border border-dark"></span>
<span class="border border-dark-subtle"></span>
<span class="border border-black"></span>
<span class="border border-white"></span>

L'utilisation de ces classes sur des éléments ayant déjà une bordure changeront le comportement de l'élément.

<div class="mb-4">
    <label for="exampleFormControlInput1" class="form-label">Email address</label>
    <input type="email" class="form-control border-success" id="exampleFormControlInput1" placeholder="name@example.com">
</div>

<div class="h4 pb-2 mb-4 text-danger border-bottom border-danger">
    Dangerous heading
</div>

<div class="p-3 bg-info bg-opacity-10 border border-info border-start-0 rounded-end">
    Changing border color and width
</div>

Il est possible de modifier l'opacité des bordures en modifiant la variable css --bs-border-opacity ou bien en utilisant les classes prédéfinies .border-opacity-* avec pour valeurs possibles 75, 50, 25 et 10.

<div class="border border-success p-2 mb-2">This is default success border</div>
<div class="border border-success p-2" style="--bs-border-opacity: .5;">This is 50% opacity success border</div>

<div class="border border-success p-2 mb-2">This is default success border</div>
<div class="border border-success p-2 mb-2 border-opacity-75">This is 75% opacity success border</div>
<div class="border border-success p-2 mb-2 border-opacity-50">This is 50% opacity success border</div>
<div class="border border-success p-2 mb-2 border-opacity-25">This is 25% opacity success border</div>
<div class="border border-success p-2 border-opacity-10">This is 10% opacity success border</div>

<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>
        </div>

Fonctionne aussi bien sur des blocs que sur des images. Toute une gamme de .rounded-* à votre disposition.

<img src="..." class="rounded" alt="...">
<img src="..." class="rounded-top" alt="...">
<img src="..." class="rounded-end" alt="...">
<img src="..." class="rounded-bottom" alt="...">
<img src="..." class="rounded-start" alt="...">

Gestion des tailles de .rounded-0 à .rounded-5 ainsi que .rounded-circle et .rounded-pill.

<span class="square-exemple rounded-0"></span>
<span class="square-exemple rounded-1"></span>
<span class="square-exemple rounded-2"></span>
<span class="square-exemple rounded-3"></span>
<span class="square-exemple rounded-4"></span>
<span class="square-exemple rounded-5"></span>
<span class="square-exemple rounded-circle"></span>
<span class="square-exemple rounded-pill" style="width:175px;"></span>

<span class="square-exemple rounded-bottom-1"></span>
<span class="square-exemple rounded-start-2"></span>
<span class="square-exemple rounded-end-circle"></span>
<span class="square-exemple rounded-strat-pill"></span>
<span class="square-exemple rounded-5 rounded-top-0"></span>

En savoir plus.