<p>Color Backgroud</p>
	<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>

	<p>Image Backgroud</p>
	<div class="bredcrumb bg-image text-center"  style="background-image: url('img/page-title-bg.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

Above is the example:

• 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-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