Bootstrap предлагает класс .breadcrumb, который оформляет список в виде хлебных крошек. Чтобы получить эффект «хлебных крошек» Bootstrap добавляет разделители (через ::before и content), а также display: inline-block к элементу li.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Главная</a></li>
<li class="breadcrumb-item"><a href="#">Фрукты</a></li>
<li class="breadcrumb-item active">Груши</li>
</ul>
Создание хлебных крошек
Для создания:
- добавьте class="breadcrumb" к элементу <ul> для отображения хлебных крошек;
- добавьте класс .breadcrumb-item к каждому элементу <li> внутри класса .breadcrumb;
- также добавьте к <li> класс .active, который представляет текущую страницу или раздел (страницу, на которой пользователь находится в данный момент) — почти всегда это будет последней крошкой в списке.
Хлебные крошки без списка
Для хлебных крошек не обязательно требуется список, при необходимости вы можете использовать их следующим образом.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="breadcrumb">
<a class="breadcrumb-item" href="#">Главная</a>
<a class="breadcrumb-item" href="#">Фрукты</a>
<span class="breadcrumb-item active">Груши</span>
</div>
Bootstrap 4 против Bootstrap 3
Bootstrap 3 требует только класс .breadcrumb для элемента <ul>. Bootstrap 4 кроме этого требует, чтобы .breadcrumb-item применялся к каждому пункту хлебных крошек.