Bootstrap full width header image

Bootstrap full width header image

Bootstrap is a popular css framework and almost everyone loves it, today I will teach you a trick that might help you with your next project.

You obviously saw many websites with full page image header and want to know how to do that, well this is for you then,

 

First of all we need a new container class because bootstrap default containers are included margins and padding and we don't want to change the default values and have effect on other part of our website so we will make new one.

 

 
TJD STUDIO
 

We've made container-full class for our purpose.

Then we need css codes:

.container-full {
    padding-right: 0;
     padding-left: 0; 
    margin-right: auto;
    margin-left: auto;
}

div.header-image{
 position: relative;
 width:100%;
 height: 700px;
 background-position: center;
 background-size: cover;
}
div.heading-text{
 position: absolute;
 bottom: 10px;
 width: 100%;
 padding: 10px;
 margin: 0px !important;
 opacity: 0.8;
 color: #373737;
 background-color: #d8d8d8;
}
div.heading-border{
 position: absolute;
 bottom: 0px;
 width: 100%;
 height: 10px;
}
div.head-image{
 background-image: url(//placehold.it/700x700);
}
div.head-image div.heading-border{
 background-color: #be0f35;
}

and that's all we need now go and take a look at your page. smiley

Enjoy this?

Subscribe our newsletter and get latest updates straight to your inbox.