Elements
These modular elements can be readily used and customized across pages and in different blocks.
Breadcrumb <> show code
<!-- Color Backgroud -->
<div class="bg-image-holder bredcrumb bg-primary">
<div class="container">
<div class="row">
<div class="col-md-8">
<h2>Page Name </h2>
<hr class="hr_narrow hr_color">
<p>Page path links ...</p>
</div>
</div>
</div>
</div>
<!-- Image Backgroud -->
<div class="bredcrumb bg-image text-center" style="background-image: url('assets/img/bredcrumb.jpg');">
<div class="row bredcrumb-inner">
<div class="col-sm-12 align-self-center">
<h2>Page Name </h2>
<ul class="">
<li><a href="" class="bread_link">Prev page</a></li>
<li>Current page</li>
</ul>
</div>
</div>
</div>
How to use
- Use .bredcrumb wrapper
- Change the property or use any background color class with .bredcrumb for particular background color
- For image background add the class .bg-image with the .bredcrumb class. You can also declare background-image property within .bg-image class rather than inline
Example 1: Color Backgroud
Page Name
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus eius quo dignissimos quos ducimus.
Example 2: Image Backgroud
Page Name
- Prev page
- Current page