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:





Related Post

Responsive step menu design with header using html,css and bootstrap

Responsive step menu design with header using html,css and b...

Responsive submenu design using html and css. website header design with respons...

Read More
Bootstrap 4 user profile design usign with html and css

Bootstrap 4 user profile design usign with html and css

We provide bootstrap 4 user profile design. we provide new design of profile. bo...

Read More
Bootstrap 4 div structure and how to use bootstrap 4 div class ?

Bootstrap 4 div structure and how to use bootstrap 4 div cla...

Here We explain how to work bootstrap 4 column structure. ".col-" class work...

Read More

Random Post