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. You can see an example of a banner in top of this page. Following code is the code for this banner. To make a better contrast between texts and image, it's better to use overlay helper classes with banners. You can use either Easily change the height of your banner by adding Uses It's default size, doesn't require any class.Banner
Basic usage
<header class="site-header sticky 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
.overlay-black or .overlay-white with your banner.Sizes
.banner-sm or .banner-lg to the .banner. Even you can make it full height by adding .navbar-full-height to the .banner.
Small
.banner-sm class.
Default
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.
