February 12, 2016

Page Header Class in Bootstrap 3

By Krishnaa Bootstrap 0 Comments

In Bootstrap, while creating header section, we make use of page-header class. However, it is not necessary to use and will not make any huge difference in appearance apart from a thin grayish horizontal line at the bottom which represents separation from body of the page. But point to remember here is that you can enhance its appearance using CSS3 style sheets. Example is given.

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Tutorials for Beginners </title>
 	
 	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
 	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 
	<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
 	<script src="js/jquery.js"></script>
	<script src="js/bootstrap.js"></script>
	
 </head>
<body>
 
<div class="container-fluid">
 	<div class="page-header"><h1>Bootstrap Header</h1> </div>
 	 <div><h1>Normal Header</h1></div>  
 </div>

</body>
</html>

You May Also Like: