<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('assets/img/bread.jpg');">
		<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

	<!-- 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.