In You website you can use this header section design. In this header section design we are display title,description and search input. in this header design we are user linear-gradient color with background banner image. this is fully responsive layout design.

We allows to free snippets of bootstrap layout examples , you can download full code of bootstrap header example layout. Here in this post i will give you example of bootstrap 4 example sites snippet and you will get simple code of html, css and jquery. In bootstrap 4 website tutorial snippet i give you three tab with html, css and js, you can easily get code of bootstrap examples code 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-1 col-lg-4 section-part"> <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> <div class="input-group"> <input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn"> <button class="btn btn-danger" type="button">GO</button> </span> </div> </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(00, 98 ,116 ,.5), rgba(255, 98 ,116 ,.5)), url("http://nicesnippets.com/demo/header-banner02.jpg"); height:500px; background-size: cover; } .main-section i{ font-size:35px; color:#fff; position:absolute; left:50%; transform: translateX(-50%); bottom:15px; } .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