What is the best way to repair bootstrap breadcrumb items that have irregular height?

I attempted to create a breadcrumb line using bootstrap and thymeleaf, but it seems to have an odd disjointed height in the display.

just like this example

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84f4ebf4f4e1f6aaeef7c4b5aab5b2aab4">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Is there a way to align it in a straight line?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Utilize the flexbox property to align elements in a 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8bfbe4fbfbeef9a5e1f8cbbaa5babda5bb">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implementing week numbers display in Twitter Bootstrap's date picker

I am currently utilizing the Twitter Bootstrap datepicker plugin which can be found at the following link: My goal is to display week numbers similar to the example shown here: http://jsbin.com/omaqe/1/edit Instead of modifying the jQuery plugin, I would ...

javascriptjquerycsstwitter-bootstrapdatepicker

The image data is not displaying in the $_FILES variable

I am having an issue updating an image in my database. I have a modal that loads using jQuery. When I click on the save modification button, all the form data appears except for the image file, which does not show up in the $_FILES array in PHP. I have tri ...

javascriptphpjqueryhtmlajax

Attempting to design a uniform question mark enclosed within a circle using CSS

I'm attempting to use CSS to create a glyph of a question mark inside a circle, similar to the copyright symbol ©. a::before { content: '?'; font-size: 60%; font-family: sans-serif; vertical-align: middle; font-weig ...

htmlcsspseudo-element

Understanding Arrays in Angular JSIn this article, we

I am new to working with Angular JS. Currently, I am populating an array and attempting to showcase its contents on the HTML page using ng-repeat. $scope.groupedMedia = []; // Elements are being added through a for loop. $scope.groupedMedia[year].push(r ...

javascripthtmlarraysangularjs

Tips for resuming a video playback in HTML5 after pausing it for a brief moment

I am working with a video called introVid, and my goal is for it to pause for 2 seconds when it reaches the 1 second mark before resuming playback. Although I've attempted to achieve this using the code below, the video remains in a paused state after ...

javascriptjqueryhtmlvideohtml5-video

Correcting CSS to ensure alignment of container-fluid container

Having trouble aligning the login box to the center of the page. Any suggestions on how to achieve this? https://i.sstatic.net/3AFoL.png The following code attempts to achieve center alignment using Bootstrap 4.x base_nologin.html <!DOCTYPE html> ...

htmlcssbootstrap-4

ES6 Error: Uncaught TypeError - Unable to call modal function

Looking for assistance with ES6 since I am new to it and could use another set of eyes and expertise. Here is my index.js file where I'm attempting to integrate fullcalendar.io: import $ from 'jquery'; import 'bootstrap'; import ...

javascriptjquerytwitter-bootstrapnpmecmascript-6

Crafting a unique datalist from an XML file with the help of jQuery

<mjesta> <mjesto>Zagreb</mjesto> <mjesto>Split</mjesto> <mjesto>Ploce</mjesto> <mjesto>Pula</mjesto> <mjesto>Pazin</mjesto> <mjesto>Daruvar</mjesto> <mjesto>Bjelovar</mj ...

jqueryhtmlajaxxml

"Create an interactive button on your webpage using Javascript

My current HTML code includes a button with the following syntax: <form id="tfnewsearch" method="get" > <input type="text" id="search_query" name="q" size="21" maxlength="120"><input type="button" id="search_button" name="search ...

javascriptjqueryhtml

What is the best way to display a tooltip above a parent container that has the tailwind class overflow-x-scroll enabled?

I'm having trouble displaying a tooltip when I hover over a square inside a parent container with the overflow-x-scroll class. The issue arises because the tooltip gets cut off due to the parent container's properties. Adjusting z-index and overf ...

htmlcsstailwind-css

Intermittent functionality observed with jQuery mobile swipe feature

I have implemented swipe events using jQuery mobile 1.3.2, where I slide the note_container left/right with each swipe. However, I am facing issues with the swipe event registration on Samsung Galaxy S3 and other android devices, as it is intermittent and ...

jqueryhtmljquery-mobilemobile

What's causing this issue in Internet Explorer?

I recently created a new website at Unfortunately, I'm facing an issue with Internet Explorer. Despite trying various workarounds, I can't seem to pinpoint the CSS error causing the bug. Why am I struggling to fix this? 1- I predominantly use ...

htmlcssinternet-explorer

What causes Tailwind Height to malfunction at breakpoints?

Recently, I integrated Tailwind CSS and Elements into my Laravel project. While working on the responsive design aspect, I encountered an issue with the "height" property not functioning correctly when utilizing breakpoints such as "md:xxx". Interestingl ...

csslaravelheighttailwind-cssbreakpoints

Tips on creating Twitter Bootstrap tooltips with multiple lines:

I have been using the function below to generate text for Bootstrap's tooltip plugin. Why is it that multiline tooltips only work with <br> and not \n? I would prefer to avoid having any HTML in my links' title attributes. Current Sol ...

javascripthtmlcsstwitter-bootstrap

Revamping HTML Label 'for' with JavaScript: Unveiling Effective Techniques

I'm facing an issue with changing the target of a label that is associated with a checkbox using JavaScript. Here's the code I have: <input type="checkbox" id="greatId" name="greatId"> <label id="checkLabel" for="greatId">Check Box&l ...

javascripthtmllabel

Looking to display an SVG icon and text side by side in HTML/CSS/Bootstrap?

I'm having trouble displaying an inline SVG image/icon and text on the same line. Here's the code snippet: .row.justify-content-left.icon1 { padding-left: 260px; padding-top: 36px; } <div class="row justify-content-left icon1"> <d ...

htmlcsssvgbootstrap-5

Using AngularJS to create a form and showcase JSON information

My code is below: PizzaStore.html: <!DOCTYPE html> <html ng-app="PizzaApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Delicious pizza for all!</title> ...

javascripthtmljsonangularjs

CSS filling a height percentage from the bottom up to the top

I have a container div containing a transparent image with only a border. Here is an example: In the "dislike" case, I am able to dynamically change the container's height percentage so it appears as if the figure is being filled. As the height grows ...

htmlcssheightpercentage

Styling a single column with two rows and sibling elements using flexbox, similar to the design of the flag of Benin!

To make it easier to understand, I will use the flag of Benin as an example: I have been attempting to achieve a similar layout using flexbox in CSS without success. The challenge is to have each of the three regions as siblings, like this: <div clas ...

cssflexbox

unable to submit Angular form via post method

I'm encountering an issue with the code I wrote in HTML. The error message says, "The page you are looking for cannot be displayed because an invalid method (HTTP verb) is being used." This is how my HTML code looks: <form name="payment" action ...

angularjshtmlforms