Bread bread crumbs for bootstrap 5 frameworks
Conclusion: We offer CSS for the customized subscription 5 baking crumbs. This is an improved version of the previously published article.
1 The need for better bread crumbs
Bootstrap 5 Framework comes with the implementation of very basic bread crumbs. You need something much better, visually and more effective. Over time, in my applications, I found that it is very useful to use bread crumbs to enable the user to return to the higher level, after training has been done on details of the specific element/object. It is very important for me the ability to present Text data in two rowsEspecially in cases where I offer some data and identifier, such as an indication that data for some accounts, and at the same time, save the account number.
I was not satisfied with the solutions that I saw on the Internet, so I developed my country. While the title says that this is the “Bootstrap 5” library, it is completely independent of CSS Bootstrap, not only the chosen colors of CSS Bootstrap have been taken to match the theme of Bootstrap 5. You can independently use it from Bootstrap if you want.
1.1 Changes in this version
This version includes suggestions and symbols from [email protected] To make the code shorter. I do not necessarily agree with all suggestions because I think human reading is more important than the shorter code. Therefore, I made my new version. Also, this version is used Bootstrap symbols [1] Instead of wonderful symbols.
2 The end result
Here’s what the final result looks like with the experimental code that generates it. I created the slices of bread crumbs in 3 sizes (large, medium, small), with an optional use of the symbols. The colors can be chosen at the will, the effect of the wetter by default, unless it is explicitly disabled. The effect of the wetter is usually disabled for the latest bread because this is the current choice in reality.
Below the html symbol generates the presentation above. Any web developer should be able to read the HTML code and match it with the image above to find the variable he loves. If you want to use symbols, you can install the free version of Bootstrap icons [1]And refer to it, similar to how to do it in this example. The HTML icon to use the icon is somewhat complicated because we need to separate the symbols and stipulate two separate elements so that it can be designed independently.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="breadcrumb3.css" />
<!-- Download bootstrap icons from
and install -->
<link rel="stylesheet" href="bootstrap-icons-1.11.3\font\bootstrap-icons.min.css" />
</head>
<body>
<!--Large size --------------------------------------------------------------->
<H5>Large size, info case</H5>
<div class="breadcrumb3-lg ">
<a href="#" class="breadcrumb3-item info">Accounts</a>
<a href="#" class="breadcrumb3-item info">Account number</br>123456</a>
<a href="#" class="breadcrumb3-item primary">Details</a>
</div>
<H5>Large size, info case, with no hover effect on the last button</H5>
<div class="breadcrumb3-lg ">
<a href="#" class="breadcrumb3-item info">Contracts</a>
<a href="#" class="breadcrumb3-item info">Contract number</br>99999-2024</a>
<a href="#" class="breadcrumb3-item primary no-hover-effect">Contract Info</a>
</div>
<H5>Large size, Rainbow</H5>
<div class="breadcrumb3-lg ">
<a href="#" class="breadcrumb3-item info ">Breadcrumb</br>info</a>
<a href="#" class="breadcrumb3-item primary ">Breadcrumb</br>primary</a>
<a href="#" class="breadcrumb3-item warning ">Breadcrumb</br>warning</a>
<a href="#" class="breadcrumb3-item success ">Breadcrumb</br>success</a>
<a href="#" class="breadcrumb3-item secondary ">Breadcrumb</br>secondary</a>
<a href="#" class="breadcrumb3-item light ">Breadcrumb</br>light</a>
<a href="#" class="breadcrumb3-item danger ">Breadcrumb</br>danger</a>
</div>
<H5>Large size, icons usage</H5>
<div class="breadcrumb3-lg ">
<a href="#" class="breadcrumb3-item info">
<span class="breadcrumb3-icon" ><i class="bi bi-people-fill"></i></span>
<span class="breadcrumb3-text" >Users</span>
</a>
<a href="#" class="breadcrumb3-item info">
<span class="breadcrumb3-icon" ><i class="bi bi-person-fill"></i></span>
<span class="breadcrumb3-text" >User number</br>123456</span>
</a>
<a href="#" class="breadcrumb3-item primary">
<span class="breadcrumb3-icon" ><i class="bi bi-info-circle-fill"></i></span>
<span class="breadcrumb3-text" >Details</span>
</a>
</div>
<!--Medium size --------------------------------------------------------------->
<H5>Medium size, info case</H5>
<div class="breadcrumb3-md ">
<a href="#" class="breadcrumb3-item info">Accounts</a>
<a href="#" class="breadcrumb3-item info">Account number</br>123456</a>
<a href="#" class="breadcrumb3-item primary">Details</a>
</div>
<H5>Medium size, info case, with no hover effect on the last button</H5>
<div class="breadcrumb3-md ">
<a href="#" class="breadcrumb3-item info">Contracts</a>
<a href="#" class="breadcrumb3-item info">Contract number</br>99999-2024</a>
<a href="#" class="breadcrumb3-item primary no-hover-effect">Contract Info</a>
</div>
<H5>Medium size, Rainbow</H5>
<div class="breadcrumb3-md ">
<a href="#" class="breadcrumb3-item info ">Breadcrumb</br>info</a>
<a href="#" class="breadcrumb3-item primary ">Breadcrumb</br>primary</a>
<a href="#" class="breadcrumb3-item warning ">Breadcrumb</br>warning</a>
<a href="#" class="breadcrumb3-item success ">Breadcrumb</br>success</a>
<a href="#" class="breadcrumb3-item secondary ">Breadcrumb</br>secondary</a>
<a href="#" class="breadcrumb3-item light ">Breadcrumb</br>light</a>
<a href="#" class="breadcrumb3-item danger ">Breadcrumb</br>danger</a>
</div>
<H5>Medium size, icons usage</H5>
<div class="breadcrumb3-md ">
<a href="#" class="breadcrumb3-item info">
<span class="breadcrumb3-icon" ><i class="bi bi-people-fill"></i></span>
<span class="breadcrumb3-text" >Users</span>
</a>
<a href="#" class="breadcrumb3-item info">
<span class="breadcrumb3-icon" ><i class="bi bi-person-fill"></i></span>
<span class="breadcrumb3-text" >User number</br>123456</span>
</a>
<a href="#" class="breadcrumb3-item primary">
<span class="breadcrumb3-icon" ><i class="bi bi-info-circle-fill"></i></span>
<span class="breadcrumb3-text" >Details</span>
</a>
</div>
<!--Small size --------------------------------------------------------------->
<H5>Small size, info case</H5>
<div class="breadcrumb3-sm ">
<a href="#" class="breadcrumb3-item info">Accounts</a>
<a href="#" class="breadcrumb3-item info">Account number</br>123456</a>
<a href="#" class="breadcrumb3-item primary">Details</a>
</div>
<H5>Small size, info case, with no hover effect on the last button</H5>
<div class="breadcrumb3-sm ">
<a href="#" class="breadcrumb3-item info">Contracts</a>
<a href="#" class="breadcrumb3-item info">Contract number</br>99999-2024</a>
<a href="#" class="breadcrumb3-item primary no-hover-effect">Contract Info</a>
</div>
<H5>Small size, Rainbow</H5>
<div class="breadcrumb3-sm ">
<a href="#" class="breadcrumb3-item info ">Breadcrumb</br>info</a>
<a href="#" class="breadcrumb3-item primary ">Breadcrumb</br>primary</a>
<a href="#" class="breadcrumb3-item warning ">Breadcrumb</br>warning</a>
<a href="#" class="breadcrumb3-item success ">Breadcrumb</br>success</a>
<a href="#" class="breadcrumb3-item secondary ">Breadcrumb</br>secondary</a>
<a href="#" class="breadcrumb3-item light ">Breadcrumb</br>light</a>
<a href="#" class="breadcrumb3-item danger ">Breadcrumb</br>danger</a>
</div>
<H5>Small size, icons usage</H5>
<div class="breadcrumb3-sm ">
<a href="#" class="breadcrumb3-item info">
<span class="breadcrumb3-icon" ><i class="bi bi-people-fill"></i></span>
<span class="breadcrumb3-text" >Users</span>
</a>
<a href="#" class="breadcrumb3-item info">
<span class="breadcrumb3-icon" ><i class="bi bi-person-fill"></i></span>
<span class="breadcrumb3-text" >User number</br>123456</span>
</a>
<a href="#" class="breadcrumb3-item primary">
<span class="breadcrumb3-icon" ><i class="bi bi-info-circle-fill"></i></span>
<span class="breadcrumb3-text" >Details</span>
</a>
</div>
</body>
</html>
3 CSS bread crumbs
Here CSS. There is no need for Java Script. I used the name of the chapter deliberately “BRADCRUMBS3” To avoid the name of the name with the original Bootstrap 5 category.
/* breadcrumb3.css */
/* by [email protected],
using partly code from [email protected] */
.breadcrumb3-lg, .breadcrumb3-md, .breadcrumb3-sm{
/* colors taken from bootstrap.css Bootstrap v5.1.0 */
--bs-primary: #0d6efd;
--bs-secondary: #6c757d;
--bs-success: #198754;
--bs-info: #0dcaf0;
--bs-warning: #ffc107;
--bs-danger: #dc3545;
--bs-light: #f8f9fa;
--bs-dark: #212529;
--bs-gray: #6c757d;
--bs-white: white;
--bs-black: black;
/* changeable colors */
--_bgcolor: var(--bs-info);
--_color: var(--bs-black);
--_arrowbordercolor: var(--bs-gray);
--_hover-bgcolor: var(--bs-primary);
--_hover-color: var(--bs-white);
}
@media (max-width: 767px) {
/* making it responsive, using CSS Flexbox with column (vertical) direction*/
.breadcrumb3-lg, .breadcrumb3-md, .breadcrumb3-sm {
display: flex;
flex-direction: column;
}
.breadcrumb3-lg .breadcrumb3-item {
width: 80% ;
border-radius: 4px 0 0 4px;
padding-left: 25px ;
}
.breadcrumb3-md .breadcrumb3-item {
width: 80% ;
border-radius: 3px 0 0 3px;
padding-left: 20px ;
}
.breadcrumb3-sm .breadcrumb3-item {
width: 80% ;
border-radius: 3px 0 0 3px;
padding-left: 18px ;
}
}
/* large size breadcrumb3-item -----------------------------------*/
.breadcrumb3-item {
position: relative;
display: table-cell;
vertical-align: middle;
color: var(--_color);
background-color: var(--_bgcolor);
height: 40px;
line-height: 18px;
font-size: 18px;
text-align: center;
padding-right: 10px;
padding-left: 25px;
text-decoration: none;
}
.breadcrumb3-text {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.breadcrumb3-icon {
display: table-cell;
text-align: center;
line-height: 25px;
font-size: 25px;
padding-right: 10px;
vertical-align: middle;
}
.breadcrumb3-item:first-child {
border-radius: 4px 0 0 4px;
padding-left: 15px;
}
.breadcrumb3-item:before,
.breadcrumb3-item:after {
content: "";
display: block;
width: 0;
height: 0;
border-top: 20px solid transparent;
position: absolute;
margin-top: -20px;
border-bottom: 20px solid transparent;
left: 100%;
top: 50%;
}
/* all this to create edge on arrow, creating gray arrow in background */
.breadcrumb3-item:after {
border-left: 15px solid var(--_arrowbordercolor);
margin-left: 1px;
z-index: 2;
}
/* this is arrow itself, overwriting gray arrow */
.breadcrumb3-item:before {
border-left: 15px solid var(--_bgcolor);
margin-left: 0px;
z-index: 3;
}
.breadcrumb3-item:hover:not(.no-hover-effect) ,
.breadcrumb3-item:focus:not(.no-hover-effect){
background-color: var(--_hover-bgcolor);
color: var(--_hover-color);
}
.breadcrumb3-item:hover:not(.no-hover-effect):before,
.breadcrumb3-item:focus:not(.no-hover-effect):before {
border-left-color: var(--_hover-bgcolor);
}
/* remove keyboard navigation focus rectangle */
.breadcrumb3-item:focus-visible {
outline: none;
}
/* medium size breadcrumb3-item -----------------------------------*/
.breadcrumb3-md .breadcrumb3-item {
height: 32px;
line-height: 15px;
font-size: 15px;
padding-left: 20px;
}
.breadcrumb3-md .breadcrumb3-icon {
line-height: 20px;
font-size: 20px;
padding-right: 7px;
}
.breadcrumb3-md .breadcrumb3-item:first-child {
border-radius: 3px 0 0 3px;
padding-left: 12px;
}
/* all this to create edge on arrow, creating gray arrow in background */
.breadcrumb3-md .breadcrumb3-item:after {
border-top: 16px solid transparent;
border-bottom: 16px solid transparent;
border-left: 12px solid var(--_arrowbordercolor);
margin-top: -16px;
margin-left: 1px;
}
/* this is arrow itself, overwriting gray arrow */
.breadcrumb3-md .breadcrumb3-item:before {
border-top: 16px solid transparent;
border-bottom: 16px solid transparent;
border-left: 12px solid var(--_bgcolor);
margin-top: -16px;
}
/* small size breadcrumb3-item-sm -----------------------------------*/
.breadcrumb3-sm .breadcrumb3-item {
height: 24px;
line-height: 11px;
font-size: 11px;
padding-right: 8px;
padding-left: 18px;
}
.breadcrumb3-sm .breadcrumb3-icon {
line-height: 16px;
font-size: 16px;
padding-right: 5px;
}
.breadcrumb3-sm .breadcrumb3-item:first-child {
border-radius: 3px 0 0 3px;
padding-left: 10px;
}
/* all this to create edge on arrow, creating gray arrow in background */
.breadcrumb3-sm .breadcrumb3-item:after {
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-left: 8px solid var(--_arrowbordercolor);
margin-top: -12px;
margin-left: 1px;
}
/* this is arrow itself, overwriting gray arrow */
.breadcrumb3-sm .breadcrumb3-item:before {
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-left: 8px solid var(--_bgcolor);
margin-top: -12px;
}
/*breadcrumb3-item colors ------------------------------------------*/
/* we like specificity, to avoid namespace collisions */
.breadcrumb3-lg .info, .breadcrumb3-md .info, .breadcrumb3-sm .info {
--_color: var(--bs-black);
--_bgcolor: var(--bs-info);
--_arrowbordercolor: var(--bs-gray);
--_hover-bgcolor: var(--bs-primary);
--_hover-color: var(--bs-white);
}
.breadcrumb3-lg .primary , .breadcrumb3-md .primary , .breadcrumb3-sm .primary {
--_color: var(--bs-white);
--_bgcolor: var(--bs-primary);
--_arrowbordercolor: var(--bs-gray);
--_hover-bgcolor: var(--bs-success);
--_hover-color: var(--bs-white);
}
.breadcrumb3-lg .warning, .breadcrumb3-md .warning, .breadcrumb3-sm .warning {
--_color: var(--bs-black);
--_bgcolor: var(--bs-warning);
--_arrowbordercolor: var(--bs-gray);
--_hover-bgcolor: var(--bs-primary);
--_hover-color: var(--bs-white);
}
.breadcrumb3-lg .success, .breadcrumb3-md .success, .breadcrumb3-sm .success {
--_color: var(--bs-black);
--_bgcolor: var(--bs-success);
--_arrowbordercolor: var(--bs-gray);
--_hover-bgcolor: var(--bs-primary);
--_hover-color: var(--bs-white);
}
.breadcrumb3-lg .secondary, .breadcrumb3-md .secondary, .breadcrumb3-sm .secondary {
--_color: var(--bs-white);
--_bgcolor: var(--bs-secondary);
--_arrowbordercolor: var(--bs-gray);
--_hover-bgcolor: var(--bs-primary);
--_hover-color: var(--bs-white);
}
.breadcrumb3-lg .light, .breadcrumb3-md .light, .breadcrumb3-sm .light {
--_color: var(--bs-black);
--_bgcolor: var(--bs-light);
--_arrowbordercolor: var(--bs-gray);
--_hover-bgcolor: var(--bs-primary);
--_hover-color: var(--bs-white);
}
.breadcrumb3-lg .danger, .breadcrumb3-md .danger, .breadcrumb3-sm .danger {
--_color: var(--bs-white);
--_bgcolor: var(--bs-danger);
--_arrowbordercolor: var(--bs-gray);
--_hover-bgcolor: var(--bs-primary);
--_hover-color: var(--bs-white);
}
4 How works css
Here, we will provide some hints on how CSS works, although this is a very simple CSS code and most of them are self -expansion.
4.1 tricks to make triangles with CSS
A very common trick is used on how to make triangles with CSS here. The important point is the abuse of CSS’s ability to make the borders and make it make the borders the shape of a triangle. You can do this by creating a block component with a zero width, height and colored borders on one side that works as an arrow, and two transparent borders on two adjacent sides.
4.2 A trick to create limits for the CSS triangle
Since the triangle itself is limits, we cannot create borders on it. Therefore, the trick needed to create boundaries on the triangle/arrow is to create two triangles and introduce one to the other with the least displacement. This way we create the border look.
You can consider the CSS icon in the determinants (. See carefully in the CSS rules for the first (margin-left: 1px; z-ampiex: 2;) and the second (left margin: 0px; Z-Index: 3;). You can see a slight displacement and present the second triangle on the first triangle.
False elements (: before,: after) only have the purpose of linking these triangles with an element.
4.3 An educational example
Here, we will provide an educational example icon, just to show how to create triangles. Here is an educational symbol:
<!DOCTYPE html>
<html>
<head>
<style>
.test1 {
position: relative;
display: table-cell;
vertical-align: middle;
color: blue;
background-color: yellow;
height: 40px;
line-height: 18px;
font-size: 18px;
text-align: center;
padding-right: 10px;
padding-left: 25px;
text-decoration: none;
}
.test1:after {
content: "";
display: block;
width: 0;
height: 0;
border-top: 20px solid red;
position: absolute;
margin-top: -20px;
border-bottom: 20px solid red;
left: 100%;
top: 50%;
border-left: 15px solid gray;
margin-left: 1px;
z-index: 2;
}
.test2 {
position: relative;
display: table-cell;
vertical-align: middle;
color: blue;
background-color: yellow;
height: 40px;
line-height: 18px;
font-size: 18px;
text-align: center;
padding-right: 10px;
padding-left: 25px;
text-decoration: none;
}
.test2:after {
content: "";
display: block;
width: 0;
height: 0;
border-top: 20px solid transparent;
position: absolute;
margin-top: -20px;
border-bottom: 20px solid transparent;
left: 100%;
top: 50%;
border-left: 15px solid gray;
margin-left: 1px;
z-index: 2;
}
.test3 {
position: relative;
display: table-cell;
vertical-align: middle;
color: blue;
background-color: yellow;
height: 40px;
line-height: 18px;
font-size: 18px;
text-align: center;
padding-right: 10px;
padding-left: 25px;
text-decoration: none;
}
.test3:before {
content: "";
display: block;
width: 0;
height: 0;
border-top: 20px solid transparent;
position: absolute;
margin-top: -20px;
border-bottom: 20px solid transparent;
left: 100%;
top: 50%;
border-left: 15px solid blue;
margin-left: 0px;
z-index: 3;
}
</style>
</head>
<body>
<div class="test1">
Note how gray arrow is created from red border
</div>
<br/>
<div >
Now we will change red to transparent to keep just arrow
</div>
<br/>
<div class="test2">
Now we have only gray arrow, with 1 pixel offset to the right
</div>
<br/>
<div class="test3">
Similarly we have blue arrow, without that offset
</div>
<br/>
<div class="test2 test3">
Now we overlap 2 arrows, to get border effect for the arrow
</div>
</body>
</html>
Here is the result of implementation:
Any programmer should be better able to match code samples to produce results.
5 Use Bootstrap icons
It may seem complicated to find the appropriate bootstra icon icon for your application but very easy. The symbols are indexed by the main words, so you need to search for your main word first, then choose (in this example for free) the icon of attention, then copy your identity category to your application. Here are screen clips showing this process.
6 references
[1]
