A page header is text that is separated from the main body of text and appears at the top of a page. The page header is more useful on a web page when we have several titles and need to add distinction between them. We can use h1’s default small element and other components to create appropriate spacing around the header. We can create appropriate page header by using Bootstrap’s .page-header class within a div element.
also read:
We can create appropriate page header by using the class .page-header as shown in the following example. If you have any questions about bootstrap page header, please write it in the comments section.
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Page Header
<small>small page header</small>
</h1>
<p>The Bootstrap is most popular front end framework for creating websites and web applications. Bootstrap is a powerful front end framework which makes faster and easier web development.
It includes CSS and HTML for typography, icons, forms, buttons, tables, layout grids and other interface components, as well as optional JavaScript extensions.</p>
</div>
</div>
</body>
</html>
Above script defines page header by using page-header class within div element and <small> element is used to display subtext for the header in the document.
Bootstrap Jumbotron