Banner
Banner is a combination of an image, some heading text, paragraphs, buttons, etc. which comes to header of your page and gives your readers an important message and make your page more fancier.
Basic usage
You can see an example of a banner in top of this page. Following code is the code for this banner.
<header class="site-header navbar-transparent navbar-fullwidth">
<!-- Top navbar & branding -->
<nav class="navbar navbar-default">
...
</nav>
<!-- END Top navbar & branding -->
<!-- Banner -->
<div class="banner overlay-black" style="background-image: url(assets/img/banner1.jpg);">
<div class="container text-center">
<h1>Online Documentation Template</h1>
<h5><strong>theDocs</strong> reduce the burden of developing documentation for your next product.</h5>
<br><br><br>
<p><a class="btn btn-white btn-lg btn-outline" href="#" role="button"> Getting Started </a></p>
</div>
</div>
<!-- END Banner -->
</header>
Overlays
To make a better contrast between texts and image, it's better to use overlay helper classes with banners. You can use either .overlay-black or .overlay-white with your banner.
Sizes
Easily change the height of your banner by adding .banner-sm or .banner-lg to the .banner. Even you can make it full height by adding .navbar-full-height to the .banner.
Small
Uses .banner-sm class.
Default
It's default size, doesn't require any class.
Large
Uses .banner-lg class.
Full Height
Uses .banner-full-height class.
Phones
Due to lack of enough space, banner size will be full height in phones.
Variations
Apart from size varieties, you can make different type of variations.
