css Question posted in
Some basic documentation can be found here.

Css – How to fix arrow position in this Bootstrap 5.2.0 based custom breadcrumbs?

I created a custom Bootstrap 5.2.0 breadcrumb, but when I add one or more breadcrumb’s item the right arrow is before the end of breadcrumb’s item box

I have created a fiddle, so I can show you the possible error

.breadcrumb.breadcrumb-custom {
     padding: 0 0;
    border-color: #dbe3e6;
}

.breadcrumb {
    border: 1px solid #f3f3f3;
}

.breadcrumb.breadcrumb-custom .breadcrumb-item {
    font-size: 17px;
    background: #dbe3e6;
    padding: 8px 8px;
    color: #000;
}

 a:link{

    text-decoration: none;
} 


.breadcrumb.breadcrumb-custom .breadcrumb-item a {
    position: relative;
    color: inherit;
    border: 1px solid #dbe3e6;
    padding-left: 10px;
}

.breadcrumb.breadcrumb-custom .breadcrumb-item a::before {
    right: -21px;
    z-index: 3;
    border-left-color: #dbe3e6;
    border-left-style: solid;
    border-left-width: 12px;

}

.breadcrumb.breadcrumb-custom .breadcrumb-item a::after {
    border-top: 21px solid transparent;
    border-bottom: 22px solid transparent;
    border-left: 12px solid #ffffff;
    top: -9px;
    right: -23px;
}

.breadcrumb.breadcrumb-custom .breadcrumb-item:last-child {
    background: transparent;
        margin-left: 10px;
}

.breadcrumb-item + .breadcrumb-item::before {
    display: inline-block;
    padding-right: 8px;
    color: #6c757d;
    content: "/";
}

.breadcrumb.breadcrumb-custom .breadcrumb-item::before {
    content: "";

}
.breadcrumb.breadcrumb-custom .breadcrumb-item a::before, 
.breadcrumb.breadcrumb-custom .breadcrumb-item a::after {
    position: absolute;
    top: -9px;
    width: 0;
    height: 0;
    content: "";
    border-top: 21px solid transparent;
    border-bottom: 21px solid transparent;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class="page-content page-container" id="page-content">
    <div class="padding">
        <div class="row container">
            <div class="col-md-12">
                    <nav aria-label="breadcrumb">
                      <ol class="breadcrumb breadcrumb-custom">
                        <li class="breadcrumb-item"><a href="#" data-abc="true">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page"><span>Portfolio</span></li>
                      </ol>
                    </nav>
                    <nav aria-label="breadcrumb">
                      <ol class="breadcrumb breadcrumb-custom">
                        <li class="breadcrumb-item"><a href="#" data-abc="true">Home</a></li>
                        <li class="breadcrumb-item"><a href="#" data-abc="true">prova</a></li>
                        <li class="breadcrumb-item active" aria-current="page"><span>user</span></li>
                      </ol>
                    </nav>
                    <nav aria-label="breadcrumb">
                      <ol class="breadcrumb breadcrumb-custom">
                        <li class="breadcrumb-item"><a href="#" data-abc="true">Home</a></li>
                        <li class="breadcrumb-item"><a href="#" data-abc="true">Portfolio</a></li>
                        <li class="breadcrumb-item"><a href="#" data-abc="true">Eventi</a></li>
                        <li class="breadcrumb-item active" aria-current="page"><span>Santa Pasqua 2024</span></li>
                      </ol>
                    </nav>
                  </div>
                </div>
              </div>
            </div>

Custom Bootstrap 5.2.0 breadcrumb

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
    The problem is in the padding and margin for the breadcrumb's items. This is my solution

/* CSS */

 

        .breadcrumb.breadcrumb-custom {
            padding: 0;
            /*border-color: #dbe3e6;*/
        }
    
        /*.breadcrumb {
            border: 1px solid #f3f3f3; 
        }*/ 
    
        .breadcrumb.breadcrumb-custom .breadcrumb-item {
            font-size: 17px;
            background: #dbe3e6;
            padding: 8px;
            color: #000;
        }
    
         a:link{
            
            text-decoration: none;
        }
        
       
        .breadcrumb.breadcrumb-custom .breadcrumb-item a {
            position: relative;
            color: inherit;
            border: 1px solid #dbe3e6;
            /*padding-left: 5px;*/
        }
    
        .breadcrumb.breadcrumb-custom .breadcrumb-item a::before {
            right: -21px;
            z-index: 3;
            border-left-color: #dbe3e6;
            border-left-style: solid;
            border-left-width: 12px;
            
        }
    
        .breadcrumb.breadcrumb-custom .breadcrumb-item a::after {
            border-top: 21px solid transparent;
            border-bottom: 22px solid transparent;
            border-left: 12px solid #ffffff;
            top: -9px;
            right: -23px;
        }
    
        .breadcrumb.breadcrumb-custom .breadcrumb-item:last-child {
            background: transparent;
                margin-left: 5px;
        }
    
        .breadcrumb-item + .breadcrumb-item::before {
            display: inline-block;
            padding: 8px;
            color: #6c757d;
            content: "/";
        }
    
        .breadcrumb.breadcrumb-custom .breadcrumb-item::before {
            content: "";
            
        }
        .breadcrumb.breadcrumb-custom .breadcrumb-item a::before, 
        .breadcrumb.breadcrumb-custom .breadcrumb-item a::after {
            position: absolute;
            top: -9px;
            width: 0;
            height: 0;
            content: "";
            border-top: 21px solid transparent;
            border-bottom: 21px solid transparent;
            
        }

/* HTML */

<div class="page-content page-container" id="page-content">
    <div class="padding">
        <div class="row container">
            <div class="col-md-12">
                    <nav aria-label="breadcrumb">
                      <ol class="breadcrumb breadcrumb-custom">
                        <li class="breadcrumb-item"><a href="#" data-abc="true">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page"><span>Portfolio</span></li>
                      </ol>
                    </nav>
                    <nav aria-label="breadcrumb">
                      <ol class="breadcrumb breadcrumb-custom">
                        <li class="breadcrumb-item"><a href="#" data-abc="true">Home</a></li>
                        <li class="breadcrumb-item"><a href="#" data-abc="true">prova</a></li>
                        <li class="breadcrumb-item active" aria-current="page"><span>user</span></li>
                      </ol>
                    </nav>
                    <nav aria-label="breadcrumb">
                      <ol class="breadcrumb breadcrumb-custom">
                        <li class="breadcrumb-item"><a href="#" data-abc="true">Home</a></li>
                        <li class="breadcrumb-item"><a href="#" data-abc="true">Portfolio</a></li>
                        <li class="breadcrumb-item"><a href="#" data-abc="true">Eventi</a></li>
                        <li class="breadcrumb-item active" aria-current="page"><span>Santa Pasqua 2024</span></li>
                      </ol>
                    </nav>
                  </div>
                </div>
              </div>
            </div>

/* JS FIDDLE */

    This is my Js Fiddle: [https://jsfiddle.net/developer2018/nhrj7eyd/2/][1]

  2. 0

    Override the float:left; from the element .breadcrumb.breadcrumb-custom .breadcrumb-item::before so it’s no longer floated, and instead will be inline.

    .breadcrumb.breadcrumb-custom {
  padding: 0 0;
  border-color: #dbe3e6;
}

.breadcrumb {
  border: 1px solid #f3f3f3;
}

.breadcrumb.breadcrumb-custom .breadcrumb-item {
  font-size: 17px;
  background: #dbe3e6;
  padding: 8px 8px;
  color: #000;
}

a:link {
  text-decoration: none;
}

.breadcrumb.breadcrumb-custom .breadcrumb-item a {
  position: relative;
  color: inherit;
  border: 1px solid #dbe3e6;
  padding-left: 10px;
}

.breadcrumb.breadcrumb-custom .breadcrumb-item a::before {
  right: -21px;
  z-index: 3;
  border-left-color: #dbe3e6;
  border-left-style: solid;
  border-left-width: 12px;
}

.breadcrumb.breadcrumb-custom .breadcrumb-item a::after {
  border-top: 21px solid transparent;
  border-bottom: 22px solid transparent;
  border-left: 12px solid #ffffff;
  top: -9px;
  right: -23px;
}

.breadcrumb.breadcrumb-custom .breadcrumb-item:last-child {
  background: transparent;
  margin-left: 10px;
}

.breadcrumb-item+.breadcrumb-item::before {
  display: inline-block;
  padding-right: 8px;
  color: #6c757d;
  content: "/";
}

.breadcrumb.breadcrumb-custom .breadcrumb-item::before {
  content: "";
  float: none;
}

.breadcrumb.breadcrumb-custom .breadcrumb-item a::before,
.breadcrumb.breadcrumb-custom .breadcrumb-item a::after {
  position: absolute;
  top: -9px;
  width: 0;
  height: 0;
  content: "";
  border-top: 21px solid transparent;
  border-bottom: 21px solid transparent;
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class="page-content page-container" id="page-content">
  <div class="padding">
    <div class="row container">
      <div class="col-md-12">
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb breadcrumb-custom">
            <li class="breadcrumb-item"><a href="#" data-abc="true">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page"><span>Portfolio</span></li>
          </ol>
        </nav>
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb breadcrumb-custom">
            <li class="breadcrumb-item"><a href="#" data-abc="true">Home</a></li>
            <li class="breadcrumb-item"><a href="#" data-abc="true">prova</a></li>
            <li class="breadcrumb-item active" aria-current="page"><span>user</span></li>
          </ol>
        </nav>
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb breadcrumb-custom">
            <li class="breadcrumb-item"><a href="#" data-abc="true">Home</a></li>
            <li class="breadcrumb-item"><a href="#" data-abc="true">Portfolio</a></li>
            <li class="breadcrumb-item"><a href="#" data-abc="true">Eventi</a></li>
            <li class="breadcrumb-item active" aria-current="page"><span>Santa Pasqua 2024</span></li>
          </ol>
        </nav>
      </div>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search