Create Stylish Breadcrumbs with HTML, CSS, Bootstrap 5

Discover a sophisticated breadcrumb snippet using HTML, CSS, and Bootstrap 5. This design features a modern look with a full-width background and responsive layout.

HTML

<section id="breadcrumb-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-9 col-md-8">
                <div class="bread_inner">
                    <div class="sub_title">Lorem ipsum dolor</div>
                    <div class="back_title">About Us</div>
                    <h1 class="title">About Us</h1>
                </div>
            </div>
            <div class="col-lg-3 col-md-4">
                <div class="link">
                    <a href="#0" class="">Home</a>
                    /
                    <span class="">About Us</span>
                </div>
            </div>
        </div>
    </div>
</section>

CSS

@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
 #breadcrumb-5{
     background: url(https://freewebsnippets.com/public/frontend/snippet_img/slider-5-1.jpg);
     background-size: cover;
     background-repeat: no-repeat;
     position: relative;
     padding: 300px 0 150px;
     font-family: "Rubik", sans-serif;
     overflow: hidden;
}
 #breadcrumb-5::after {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.7);
     pointer-events: none;
}
 #breadcrumb-5 .bread_inner{
     position: relative;
     z-index: 1;
     color: #fff;
}
 #breadcrumb-5 .link{
     color: #fff;
     position: relative;
     z-index: 1;
     text-align: right;
}
 #breadcrumb-5 .sub_title{
     font-size: 0.875rem;
     font-weight: 600;
     line-height: 1rem;
     text-transform: uppercase;
     color: #ff5a19;
     margin-bottom: 20px;
}
 #breadcrumb-5 .back_title{
     white-space: nowrap;
     position: absolute;
     bottom: -2.5rem;
     left: 0;
     font-size: 7.5rem;
     font-weight: 400;
     line-height: 1.15;
     color: transparent;
     -webkit-text-stroke: 1px rgba(255, 255, 255, 0.2);
}
 #breadcrumb-5 h1{
     font-size: 4.375rem;
     font-weight: 400;
     line-height: 1.1;
     position: relative;
     left: 50px;
}
 #breadcrumb-5 .link a{
     color: #fff;
     text-decoration: none;
     color: #ff5a19;
     margin-right: 7px;
}
 #breadcrumb-5 .link span{
     margin-left: 7px;
}
 @media (max-width: 768px){
     #breadcrumb-5 .link{
         text-align: left;
         margin-top: 30px;
    }
}
 @media (max-width: 576px){
     #breadcrumb-5 .back_title{
         font-size: 4rem;
         bottom: -25px;
    }
     #breadcrumb-5 h1{
         font-size: 3rem;
         left: 25px;
    }
     #breadcrumb-5{
         padding: 100px 0;
    }
}

JS

Width:

Height:

Upgrade your website’s navigation with our elegant breadcrumb snippet. Featuring a sophisticated design with a stylish background and responsive layout, this snippet enhances user experience by providing clear navigation paths. The modern look, complete with bold typography and striking colors, ensures your site remains visually appealing while improving usability. Ideal for showcasing essential navigation elements, this breadcrumb snippet is perfect for both desktop and mobile views, offering a polished, professional appearance that seamlessly integrates with your site’s overall design. Enhance your site’s functionality and aesthetics with this versatile breadcrumb solution.