We are giving you wesite landing page header section with backgrond banner image design in bootstrap 4. bootstrap 4 header design with banner. in this header section section design we are display title, description, button and background image. this is nice looking header section design. you can simply use in your landing page.

We allows to free snippets of bootstrap landing page free , you can download full code of bootstrap page header with image layout. Here in this post i will give you example of bootstrap heading styles snippet and you will get simple code of html, css and jquery. In bootstrap header design snippet i give you three tab with html, css and js, you can easily get code of bootstrap header design with banner layout.

<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="custom.css"> </head> <body> <div class="container-fluid main-section"> <div class="row"> <div class="offset-lg-2 col-lg-8 section-part text-center"> <h1>Header Title</h1> <P>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore eta. Ut enim ad minim veniam, quis nostrud exercgiat nulla deserunt mollit anim id est laborum.</P> <button class="btn btn-danger">Click Me</button> </div> </div> <i class="fa fa-angle-double-down blink" aria-hidden="true"></i> </div> </body> </html>
.main-section{ position: relative; background:linear-gradient(rgba(0, 0, 0, .7), rgba(235, 82, 73, .7), rgba(0, 0, 0, .7)), url("http://nicesnippets.com/demo/service-bg01.png"); height:500px; background-size: cover; } .main-section i{ font-size:35px; color:#fff; position:absolute; left:50%; bottom:15px; transform: translateX(-50%); } .main-section .section-part{ color:#fff; position: absolute; top: 50%; transform: translateY(-50%); } @-webkit-keyframes blinker { from {opacity: 1.0;} to {opacity: 0.0;} } .blink{ text-decoration: blink; -webkit-animation-name: blinker; -webkit-animation-duration: 0.6s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:ease-in-out; -webkit-animation-direction: alternate; }

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:

Random Post