Crafting a sleek arrow-style stepper with Bootstrap 5 breadcrumbs

I am attempting to create a stepper similar to the one showcased in this instance.

To add color to the stepper, I utilized the text-bg-success or text-bg-primary classes on the breadcrumb-item as shown below.

However, the spacing between the steps appears as a diamond shape rather than a chevron arrow that aligns with the page's language direction (ltr: right arrow, rtl: left arrow).

Is there a way to modify the gap between each step to resemble an arrow rather than a diamond shape?

.breadcrumb-chevron {
    --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    gap: .5rem;
}

    .breadcrumb-chevron .breadcrumb-item {
        display: flex;
        gap: inherit;
        align-items: center;
        padding-left: 0;
        line-height: 1;
    }

        .breadcrumb-chevron .breadcrumb-item::before {
            gap: inherit;
            float: none;
            width: 1rem;
            height: 1rem;
        }

.breadcrumb-custom .breadcrumb-item {
    position: relative;
    flex-grow: 1;
    padding: .75rem 3rem;
}

    .breadcrumb-custom .breadcrumb-item::before {
        display: none;
    }

    .breadcrumb-custom .breadcrumb-item::after {
        position: absolute;
        top: 50%;
        right: -25px;
        z-index: 1;
        display: inline-block;
        width: 50px;
        height: 50px;
        margin-top: -25px;
        content: "";
        background-color: var(--bs-tertiary-bg);
        border-top-right-radius: .5rem;
        box-shadow: 1px -1px var(--bs-border-color);
        transform: scale(.707) rotate(45deg);
    }

    .breadcrumb-custom .breadcrumb-item:first-child {
        padding-left: 1.5rem;
    }

    .breadcrumb-custom .breadcrumb-item:last-child {
        padding-right: 1.5rem;
    }

        .breadcrumb-custom .breadcrumb-item:last-child::after {
            display: none;
        }
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="56343939222522243726166378657865">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f7959898838483859687b7c2d9c4d9c4">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <nav aria-label="breadcrumb" class="my-3">
      <ol class="breadcrumb breadcrumb-custom overflow-hidden text-center bg-body-tertiary border rounded-3">
              <li class="breadcrumb-item text-bg-success">
  Step 1            </li>
              <li class="breadcrumb-item text-bg-primary active" aria-current="page">
                          <i class="fa-solid fa-pen-to-square"></i>
                      <a class="fw-semibold text-decoration-none text-white" href="/blank1/Subscription/4c084aht14hc67nxhfpa8e9kw0/Signup/Step/Payment">
                          Step 2
                      </a>
              </li>
      </ol>
  </nav>
</div>

csstwitter-bootstrapbootstrap-5breadcrumbs

Answer №1

If you want to update the background color and box shadow in this section, you can do the following:

 .breadcrumb-custom .breadcrumb-item::after {

        background-color: var(--bs-tertiary-bg);

        box-shadow: 1px -1px var(--bs-border-color);

To make the background color inherit and remove the box shadow, or have the box shadow inherit the text color, use the following code:

.breadcrumb-custom .breadcrumb-item::after {

        background-color: inherit;

        box-shadow: 1px -1px currentcolor;

Here is a demo:

.breadcrumb-chevron {
    --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    gap: .5rem;
}

    .breadcrumb-chevron .breadcrumb-item {
        display: flex;
        gap: inherit;
        align-items: center;
        padding-left: 0;
        line-height: 1;
    }

        .breadcrumb-chevron .breadcrumb-item::before {
            gap: inherit;
            float: none;
            width: 1rem;
            height: 1rem;
        }

.breadcrumb-custom .breadcrumb-item {
    position: relative;
    flex-grow: 1;
    padding: .75rem 3rem;
}

    .breadcrumb-custom .breadcrumb-item::before {
        display: none;
    }

    .breadcrumb-custom .breadcrumb-item::after {
        position: absolute;
        top: 50%;
        right: -25px;
        z-index: 1;
        display: inline-block;
        width: 50px;
        height: 50px;
        margin-top: -25px;
        content: "";
        background-color: inherit;
        border-top-right-radius: .5rem;
        box-shadow: 1px -1px currentcolor;
        transform: scale(.707) rotate(45deg);
    }

    .breadcrumb-custom .breadcrumb-item:first-child {
        padding-left: 1.5rem;
    }

    .breadcrumb-custom .breadcrumb-item:last-child {
        padding-right: 1.5rem;
    }

        .breadcrumb-custom .breadcrumb-item:last-child::after {
            display: none;
        }
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4b2924243f383f392a3b0b7e65786578">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="03616c6c77707771627343362d302d30">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <nav aria-label="breadcrumb" class="my-3">
      <ol class="breadcrumb breadcrumb-custom overflow-hidden text-center bg-body-tertiary border rounded-3">
              <li class="breadcrumb-item text-bg-success">
  Step 1            </li>
              <li class="breadcrumb-item text-bg-primary active" aria-current="page">
                          <i class="fa-solid fa-pen-to-square"></i>
                      <a class="fw-semibold text-decoration-none text-white" href="/blank1/Subscription/4c084aht14hc67nxhfpa8e9kw0/Signup/Step/Payment">
                          Step 2
                      </a>
              </li>
      </ol>
  </nav>
</div>

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

What steps do I need to take in order to accomplish this specific CSS

Hey there, I have a question that may seem silly, but I am struggling to find a solution on my own. Unfortunately, my CSS skills are not the best :( I'm trying to achieve the following layout where the text should wrap at the end of the container (di ...

css

Is there a unique shape element, such as a true circle, available in HTML5?

There doesn't seem to be any documentation on this, suggesting they may not exist. However, it's always worth investigating. I am in search of a perfectly circular (or any polygon shape other than a rectangle) element. I can create a circle in c ...

htmlcsselementgeometry

Using Twitter Bootstrap and jQuery UI modal within an mvc4 framework

I successfully integrated jQuery UI scripts for modal and datepicker into the generic MVC4 template view. However, when I tried to include Twitter Bootstrap layout as well, the datepicker and modal elements were not displaying properly. Additionally, I enc ...

jqueryjquery-uirazortwitter-bootstrapasp.net-mvc-4

Steps to Make a White Content Box on Top of an Image Background using HTML/CSS

I am currently struggling with overlaying a white box on top of my background image in order to have my text inside the box for a more visually appealing look. Despite trying to add CSS code like this: .white-box { position: absolute; background-c ...

htmlcss

What method does nosotroshq.com use to achieve the navigation effect when hovering over a menu item?

Seeking advice from skilled individuals familiar with JQUERY: Can anyone explain the technique used by nosotroshq.com in their top navigation bar? Specifically, how do they create the slow animation when hovering over "ABOUT US"? Any insights would be ap ...

jquerycssjquery-plugins

A layout featuring two columns: the right column has a fixed width, while the left column is fluid

I am in need of a simple solution: 2 columns with the right column having a fixed size. Despite searching on stackoverflow and Google, I have not been able to find a working answer that fits my specific context. The current approach is as follows: div.con ...

csshtml

Printed plaintext of CSS & jQuery code on the 200th iteration in PHP

I encountered an issue while working on a script that involved displaying query data based on domain type (referred to as typeX & type Y). To achieve this, I utilized the jQuery slidetoggle function along with some CSS. Everything was functioning perfectly ...

phpjqueryhtmlcss

Transitioning between sections by clicking on a navigation menu item

I'm looking to create a cool animation effect on my website. When a user clicks on a specific menu link, such as "about-section," I want the page to smoothly scroll down to that section in a parallax style. If anyone knows of a jQuery plugin that cou ...

jqueryhtmlcssjquery-pluginsparallax

How do I make the YouTube Grid Gallery player show up in a pop-up window?

I have been experimenting with the following code: <head> <script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script> <script type="text/javascript"> function loadVideo(playerUrl, ...

javascriptcsspopupyoutubegallery

Implementing a pop-up notification at the center of the display for empty fields

I am currently working on a task that requires me to display a pop-up message at the top-middle of the screen stating "please fill in all fields before submitting". This custom box should be stylable using CSS. Although the solution seems simple, I am str ...

javascripthtmlcsspopupwindow

Tips for adjusting website display height on mobile devices

My desktop website appears exactly as I want it to. When inspecting the site on the console to test responsiveness, everything seems fine. However, once I upload the changes to AWS and view the website on my phone, the vh and flexbox properties are not fun ...

htmlcssmobile

Click Event for Basic CSS Dropdown Menu

My goal is to develop a straightforward feature where a dropdown menu appears below a specific text field once it is clicked. $(".val").children("div").on("click", function() { alert("CLICK"); }); .container { display: inline-block; } .val { d ...

javascriptjquerycss

Why do I continue to encounter the error message saying 'jQuery is not defined'?

As a newcomer to the world of jQuery and Visual Studio Environment, I embarked on the journey of creating a circular navigation menu bar following the instructions provided in this link. Despite my efforts, I encountered a hurdle in the head section where ...

javascriptjqueryhtmlcssjquery-ui

CSS: Ensuring the width is adjusted to the content or wrapper that is wider

I am facing an issue with mouse-over highlighting on a set of list items. Below is the HTML structure I am working with: <div id="wrapper"> <div id="box"> <div class="item">Lorem ipsum dolor sit amet, sit nonumy utamur ponderum ex& ...

htmlcsswidthhorizontal-scrolling

Keep fancybox items in their designated spot

When the window is opened at full size, everything looks fine. However, when you resize the window horizontally, the thumbnails shift and disappear. I want them to remain fixed in their position like the large pop-up image so that users can still see them ...

javascriptjqueryhtmlcssfancybox

Troubleshooting textarea resize events in Angular 6

In the development of my Angular 6 application, I have encountered an issue with a textarea element. When an error occurs, an asterisk should be displayed next to the textarea in the top-right corner. However, there is a gap between the textarea and the as ...

javascripthtmlcssangular6

Video with dynamic sizing doesn't adapt properly

I successfully achieved my main goal, which was to have a background video at the top of my page. However, I am facing an issue with making the video responsive. Currently, as I decrease the screen size, the video shrinks in both width and height rather th ...

htmlcsstwitter-bootstrapvideoresponsive-design

What is the best way to ensure my footer remains at the bottom of the page even when scrolled?

I'm struggling to get my footer to stay at the bottom of a page that requires scrolling. The code I have only seems to work on pages without scrolling, causing the footer to display in the middle of the page instead of at the bottom where it belongs. ...

htmlcss

What is the reason for requiring a style to be set instead of using a class?

Trying to implement the footer staying at the bottom of my website like in this example. You can view my site here. The method is successful, however, I am required to apply the style style="min-height: 100vh;" directly to the body element inste ...

cssbootstrap-4footer

I have noticed that the Javascript code is being loaded prior to the completion of my HTML/CSS page for some unknown

I am completely new to the world of web development. I'm encountering an issue where my JavaScript code (specifically alerts) is loading before my HTML/CSS page has fully loaded. I've been using sample alerts to test this out, and ideally, they s ...

javascripthtmlcssfrontend