Elements
These modular elements can be readily used and customized across pages and in different blocks.
Elements
- Alerts
- Animation
- Background
- Badge
- Breadcrumb
- Buttons
- Button group
- Card
- Carousel
- Collapse
- Columns
- Countdown
- Dropdowns
- Forms
- Gallery
- Icon Set
- Image
- Input group
- List group
- Map
- Modal
- Navs
- Navbar
- Pagination
- Popovers
- Pricing Table
- Progress
- Responsive Utilities
- Scrollspy
- Seperators
- Tabs & wizards
- Tables
- Team
- Testimonials
- Tooltips
- Typography
- Video & Audio
Breadcrumb <> show code
<div class="bredcrumb bg-dark-navy">
<div class="container">
<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>
</div>
<!-- Image background -->
<div class="bg-image-holder bredcrumb" style="background-image: url('.../....');">
<div class="container">
<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>
</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="container">
<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>
</div>
<!-- Middle aligned -->
<div class="bredcrumb bg-primary text-center">
<div class="container">
<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>
</div>
<!-- With border under the title -->
<div class="bredcrumb bg-dark-navy">
<div class="container">
<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>
</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.