Bootstrap Jumbotron and Page Header
Bootstrap provides two components that are commonly used for creating a visually appealing header or hero section for a website: Jumbotron and Page Header.
Jumbotron:
The Jumbotron component is a large, full-width container that can be used to showcase important content or messages on a webpage. It provides a background image or color with a large heading and a call to action button.
Here is an example of how to create a basic Jumbotron using Bootstrap:
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>
Bootstrap Jumbotron and Page Header
You can also customize the Jumbotron by changing the background color, text color, and adding different content and styles.
Page Header:
The Page Header component is a smaller, more compact version of the Jumbotron that is often used to create a section heading or page title. It provides a simple background color or image with a heading and subheading.
Here is an example of how to create a basic Page Header using Bootstrap:
<div class="page-header">
<h1>Page Title</h1>
<p>Page Subtitle</p>
</div>
You can also customize the Page Header by changing the background color, text color, and adding different content and styles.
Both the Jumbotron and Page Header components are very flexible and can be customized to fit your specific design needs. They can be combined with other Bootstrap components and utilities to create unique and visually appealing headers or hero sections for your website.