How to fix bootstrap breadcrump-items with broken height? - html

Question

I tried to make breadcrumb line using bootstrap and thymeleaf but it has this strange broken height in it.
like this
CODE
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<!--<div class="collapse navbar-collapse" id="navbarSupportedContent">-->
<div class="navbar-nav container">
<ol class="breadcrumb mr-auto">
<li class="breadcrumb-item">
<a th:href="#{/account/notebooks}">
<i class="fas fa-book"></i>
Notebooks
</a>
</li>
<li class="breadcrumb-item">
<a th:href="#{'/notebook/{notebookId}/edit' (notebookId=${notebook.id})}">
<div th:text="${notebook.title}"></div>
</a>
</li>
<li class="breadcrumb-item" th:if="${currentNote} != null">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" th:text="${currentNote.name}">
</a>
</li>
</ol>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
How to make it into a straight line?

Answer 1

Use flexbox for set elements in straight line.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<!--<div class="collapse navbar-collapse" id="navbarSupportedContent">-->
<div class="navbar-nav container">
<ol class="breadcrumb mr-auto">
<li class="breadcrumb-item d-flex">
<a th:href="#{/account/notebooks}">
<i class="fas fa-book"></i>
Notebooks
</a>
</li>
<li class="breadcrumb-item d-flex">
<a th:href="#{'/notebook/{notebookId}/edit' (notebookId=${notebook.id})}">
<div th:text="${notebook.title}">Test</div>
</a>
</li>
<li class="breadcrumb-item d-flex" th:if="${currentNote} != null">
<a class="nav-link dropdown-toggle p-0" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" th:text="${currentNote.name}">Test
</a>
</li>
</ol>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>