Elements
These modular elements can be readily used and customized across pages and in different blocks.
Breadcrumb <> show code
<div class="bredcrumb bg-dark-navy">
<div class="row">
<div class="col-sm-8">
<h2>About us </h2>
</div>
<div class="col-sm-4">
<ul class="text-right">
<li><a href="" class="bread_link">Home</a></li>
<li>About us</li>
</ul>
</div>
</div>
</div>
<!-- Image background -->
<div class="bg-image-holder bredcrumb" style="background-image: url('.../....');">
<div class="row">
<div class="col-sm-8 col-6">
<h2>About us </h2>
</div>
<div class="col-sm-4 col-6">
<ul class="pager">
<li><a href="" class="bread_link">Home</a></li>
<li>About us</li>
</ul>
</div>
</div>
</div>
How to use
Above is the example:
- Use .bredcrumb wrapper
- Use any background color class with .bredcrumb for particular background color
- For image background add the class .bg-image-holder with the .bredcrumb class. You can also declare background-image property within .bg-image-holder class rather than inline
- Wrap page links into .pager
Alignments & variations <> show code
<!-- Left aligned -->
<div class="bredcrumb bg-dark-navy">
<div class="row">
<div class="col-sm-12">
<h2>About us </h2>
<ul class="">
<li><a href="" class="bread_link">Home</a></li>
<li>About us</li>
</ul>
</div>
</div>
</div>
<!-- Middle aligned -->
<div class="bredcrumb bg-primary text-center">
<div class="row">
<div class="col-sm-12">
<h2>About us </h2>
<ul class="">
<li><a href="" class="bread_link">Home</a></li>
<li>About us</li>
</ul>
</div>
</div>
</div>
<!-- With border under the title -->
<div class="bredcrumb bg-dark-navy">
<div class="row">
<div class="col-sm-12">
<h2>About us </h2>
<p class="devider devider_narrow devider_thik devider_primary"></p>
<ul class="">
<li><a href="" class="bread_link">Home</a></li>
<li>About us</li>
</ul>
</div>
</div>
</div>
How to use
- For the middle alignment use .text-center with .bredcrumb wrapper
- For a seperator under the title use <p> with the class .devider.