Understanding Page Header in Bootstrap

Bootstrap 3 page header : With this functionality header can be more highlighted easily. As header is always the first impression of the viewer so this page header component of the bootstrap is quite popular among the designers. With ease of design and customization this feature can uplift the whole layout of the website respectively. In this post we are going to study all about the page header feature, customization and more with examples.

Bootstrap Page Header CSS

Bootstrap provides default CSS for page header with three specific properties that are determined with the inherited values of respective attributes only.

// Page header
// -------------------------

.page-header {
  padding-bottom: ((@line-height-computed / 2) - 1);
  margin: (@line-height-computed * 2) 0 @line-height-computed;
  border-bottom: 1px solid @page-header-border-color;
}
// Default Value
.page-header {
  padding-bottom:9px;
  margin: 40px 0 20px;
  border-bottom:1px solid #eee;
}

Bootstrap Page Header Example

Bootstrap Page Header is another flexible feature from bootstrap that one customize in many ways to match the layouts. Here is the HTML structure mark up with heading tag followed by small tag to make Bootstrap Page header.

Bootstrap Page Header Color

You can highlight the heading of the page with any color of your choice. In this example we have given red color to the heading with light color to the followed small heading.

 .page-header {color: red;}
 .page-header small{color: green;}

Bootstrap Page Header Background color
One can also add specific background color to the page header with simple CSS attributes. To do that you need to add extra CSS for .page-header class respectively.

 .page-header {background-color: lightgrey;}

Bootstrap Page Header without line

If you are looking to remove the line the is followed by page header than you need to override the default css behaviour and make changes to get the desired layout. Border bottom value needs to be changed

.page-header {
border-bottom: none;
}

Bootstrap Page Header with image

You can also add images in the logo depending from small logo to background image that covers the whole area. To do this you will need to customize the layout accordingly.

Bootstrap Page Header with logo

In this example we are going to see Page header design with logo.

Bootstrap Page Header with icon

Add specially built logo to the whole design with special features to bring more design elements to your website layout. You can use all the bootstrap default icons to get specific effect of the icons.

Bootstrap Page Header with button

Integrate buttons in the bootstrap page header to highlight it more and give special colors to the heading entirely.

Bootstrap Page Header and footer

Page header are also used in combination with footer to make suit the layout needs.

Bootstrap Page Header and Footer Example

Bootstrap Page Header Template

Here are few page header templates which can enhance your website layout with certain needs.