Banner

Full Width Banner

Source Code

<div class="banner" data-banner-height="200" data-banner-img="assets/img/banner.jpg" data-banner-width="100%">
	<div class="caption center">
		<h1>Your Banner Title</h1>
		<h2>Second Line</h2>
		<a href="#" class="btn btn-default action">Action Banner</a>
	</div>
</div>

Another Example Banner

Source Code

<div class="banner col-md-6" data-banner-height="200" data-banner-bgcolor="#ea6153" data-banner-overlay="false">
	<div class="caption left top">
		<h1>Your Banner Title</h1>
		<h2>Second Line</h2>
		<a href="#" class="btn btn-default action">Action Banner</a>
	</div>
</div>
<div class="banner col-md-6" data-banner-height="200" data-banner-bgcolor="#32b176" data-banner-overlay="false">
	<div class="caption bottom right">
		<h1>Your Banner Title</h1>
		<h2>Second Line</h2>
		<a href="#" class="btn btn-default action">Action Banner</a>
	</div>
</div>

Banner Options

Add a few options for your banner

Attribute Description Example
data-banner-width="" This option to set the width banner <div class="banner" data-banner-width="200"></div>
data-banner-height="" This option to set the height banner <div class="banner" data-banner-height="100"></div>
data-banner-img="{URL}" This option to set the background image of the banner <div class="banner" data-banner-img="mydir/bg-for-banner.jpg"></div>
data-banner-bgcolor="{Color Code}" This option to set the background color of the banner (if not using an image for the background) <div class="banner" data-banner-bgcolor="#34989db"></div>
data-banner-overlay="true/false" This option to set the caption overlay. Default: true <div class="banner" data-banner-overlay="true"></div>