.breadcrumb
alors que dans les balises <li>, utilisez la classe .breadcrumb-item
.aria-label="breadcrumb"
: fournit une étiquette décrivant le type de navigation fourni dans l’élément nav
.aria-current="page"
: représente la page en cours dans la liste.<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Acceuil</a></li>
<li class="breadcrumb-item"><a href="#">Cours</a></li>
<li class="breadcrumb-item"><a href="#">Développement Web</a></li>
<li class="breadcrumb-item active" aria-current="page">Bootstrap</li>
</ol>
</nav>
<div class="container">
<h3 class="text-primary">Exemple de Breadcrumbs</h3>
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-dark ">
<li class="breadcrumb-item "><a href="#" class="text-light">Accueil</a></li>
<li class="breadcrumb-item "><a href="#" class="text-light">Cours</a></li>
<li class="breadcrumb-item"><a href="#" class="text-light">Développement Web</a></li>
<li class="breadcrumb-item text-light active" aria-current="page">Bootstrap</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-warning ">
<li class="breadcrumb-item "><a href="#" class="text-success">Accueil</a></li>
<li class="breadcrumb-item"><a href="#" class="text-success">Cours</a></li>
<li class="breadcrumb-item"><a href="#" class="text-success">Développement Web</a></li>
<li class="breadcrumb-item text-success active" aria-current="page">Bootstrap</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-info ">
<li class="breadcrumb-item "><a href="#" class="text-dark">Accueil</a></li>
<li class="breadcrumb-item"><a href="#" class="text-dark">Cours</a></li>
<li class="breadcrumb-item"><a href="#" class="text-dark">Développement Web</a></li>
<li class="breadcrumb-item text-dark active" aria-current="page">Bootstrap</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-danger ">
<li class="breadcrumb-item "><a href="#" class="text-warning">Accueil</a></li>
<li class="breadcrumb-item"><a href="#" class="text-warning">Cours</a></li>
<li class="breadcrumb-item"><a href="#" class="text-warning">Développement Web</a></li>
<li class="breadcrumb-item text-warning active" aria-current="page">Bootstrap</li>
</ol>
</nav>
</div>
$breadcrumb-divider
. <nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-dot bg-dark ">
<li class="breadcrumb-item "><a href="#" class="text-light">Accueil</a></li>
<li class="breadcrumb-item "><a href="#" class="text-light">Cours</a></li>
<li class="breadcrumb-item"><a href="#" class="text-light">Développement Web</a></li>
<li class="breadcrumb-item text-light active" aria-current="page">Bootstrap</li>
</ol>
</nav>
Le CSS
<style>
.breadcrumb-dot
.breadcrumb-item+
.breadcrumb-item::before {
content: "•";
color: #ffffff;
}
</style>
<div class="font-up-bold text-uppercase"> <nav aria-label="breadcrumb"> <ol class="breadcrumb breadcrumb-dot bg-dark "> <li class="breadcrumb-item "><a href="#" class="text-light">Accueil</a></li> <li class="breadcrumb-item "><a href="#" class="text-light">Cours</a></li> <li class="breadcrumb-item"><a href="#" class="text-light">Développement Web</a></li> <li class="breadcrumb-item text-light active" aria-current="page">Bootstrap</li> </ol> </nav> </div>
<div class="font-up-bold text-uppercase">
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-dot bg-dark ">
<li class="breadcrumb-item "><a href="#" class="text-light">
<span class="fa fa-home mr-2" aria-hidden="true"></span>Accueil</a></li>
<li class="breadcrumb-item "><a href="#" class="text-light">
<span class="fa fa-book mr-2" aria-hidden="true"></span>Cours</a></li>
<li class="breadcrumb-item"><a href="#" class="text-light">
<span class="fa fa-window-restore mr-2" aria-hidden="true"></span>Développement Web</a></li>
<li class="breadcrumb-item text-light active" aria-current="page">Bootstrap</li>
</ol>
</nav>
</div>