Хлібні крихти в Bootstrap 4

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>