What is the Bootstrap page header ?
Last Updated :
18 Aug, 2021
Page header is used to add suitable spacing around the headings on a page and adds a horizontal line under the heading. This particularly helps a web page where you may have several post titles and need a way to add distinction to each of them. As header is always the first impression of the viewer. So, one would want that their page has a good-looking header at the top of the page and the header can be highlighted easily. For this purpose, a page header is used by the web developers which adds spacing around the headings on a page and adds a horizontal line under the heading.
Let’s see the step-by-step approach for the implementation.
Step 1: Include Bootstrap and jQuery CDN into the <head> tag before all other stylesheets to load our CSS.
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js”></script>
Step 2: Add <div> tag in the HTML body with class container.
Step 3: To use a page header, wrap your heading in a <div> with a class of .page-header.
<div class = "page-header"> </div>
Example 1: In this example, we will see how to use Bootstrap page header with underline heading.
index.html
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >Example</ title >
< link
rel = "stylesheet"
href =
< script src =
</ script >
< script src =
</ script >
< style >
img {
border-radius: 50%;
}
</ style >
</ head >
< body >
< div class = "container" >
< div class = "page-header" >
< h1 style = "color: green" >Example Page Header</ h1 >
</ div >
< p >This is a paragraph</ p >
< img
src =
alt = "Flowers in Chania"
width = "460"
height = "345" />
< p >This is another text.</ p >
</ div >
</ body >
</ html >
|
Output:
suitable spacing and a horizontal line under the heading
Example 2: In this example, we will see page header with different size of headings and without underline.
index.html
<!DOCTYPE html>
< html lang = "en" >
< head >
< title >Example</ title >
< meta charset = "utf-8" />
< meta name = "viewport" content = "width=device-width, initial-scale=1" />
< link
rel = "stylesheet"
href =
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "container" >
< div class = "page-header" >
< h1 style = "color: green" >
GeeksForGeeks
< small > All In One</ small >
</ h1 >
</ div >
< p >Extensive collection of questions ranging variety of topics</ p >
< p >All done by Experts</ p >
</ div >
</ body >
</ html >
|
Output:
proper spacing without underline
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...