Jumbotron For Header

Bootstrap 4 Jumbotron for Blog

A Jumbotron is a lightweight flexible Bootstrap component to display important content and information such as video, image, URL link, heading and description, in the full viewport width to spark an instant attention from readers.

Bootstrap 4 Jumbotron Installation Process

Bootstrap 4 Jumbotron Component can be added to any section of the template. This post is to explain the process to install the component to header section. The method requires a simple copy and paste process, which makes it easy to add the component as a part of your blog content.

Where to place a jumbotron for header section?

A basic idea to use a jumbotron as a header is to insert a markup for jumbotron as the first HTML markup element in sequence after <nav> tag markup to prevent any other components displayed between navbar and jumbotron header.

Header Title

Description

Action Button

Example | Jumbotron.

HTML Markup For Jumbotron in Header

                      <body expr:class='loading" + data:blog.mobileClass'>
   <div class='header'>
      <!-- Navbar -->
         <nav> --- </nav>
      <!-- End of Navbar -->

      <!-- Place Your Jumbotron component here -->
         <div class='row m-0'>
            <div class='jumbotron'>
               ---
            </div>
         </div>
      <!-- End of Jumbotron component -->         
   </header>
   ---
</body>

Full Code For The Bootstrap 4 Jumbotron Header

This code is to create a jumbotron that occupies the entire horizontal space of your page layout. This jumbotron is more suitable for header as it applies background-image CSS element to display an image in full-width of the header section.

                <div class='row m-0'>
   <div class='jumbotron jumbotron-fluid img-fluid m-0 p-0 d-flex justify-content-center align-items-center' style='width: 100%; background-image: url("YOUR IMAGE URL HERE"); height: 45.5vh; min-height: 30.5vmin; background-repeat: no-repeat; background-size: cover; background-position: center center; flex-center;'>
      <div class='col-12 mb-md-2 mx-auto text-center'>
         <h1 class='h1-reponsive text-success text-uppercase font-weight-bold mb-0 pt-md-5 pt-5'>
            <strong class='text-capitalize'>Header Title</strong>
         </h1>
         <h5 class='h5-responsive text-uppercase text-success'>
            <strong>Header Descrition</strong>
         </h5>
         <hr class='hr-light my-2 d-none d-md-block' style='width: 70%; border: 1.5px solid green;'/>
         <a class='btn btn-outline-primary waves-effect text-white' href='YOUR URL LINK' rel='noopener' target='_blank'>
            <strong class='blue-grey-text'>Action Button</strong>
         </a>
      </div>
   </div>
</div>

Bootstrap 4 Jumbotron Header Examples Based on Desktop Screen Views

Method Explanation

How To - Simply copy and paste the above code and place the code in the suggested <header> tags. Add your image URL and other contents, and it is good to go.

Change height - To change the height of the jumbotron, you need to change the viewport height (vh) and/or Viewport Minimum (vmin) elements in the inline-styling of <div class='jumbotron'>.

Create rounded corners - To make a jumbotron with rounded corners, remove jumbotron modifier class and container or container-fluid within the markup.

Missing Image Issue - If you have this issue, you may need to change the double quotation mark ( " ) for background-image URL link with the single quotation mark (apostrophe) ( ' ) as shown in the HTML markup below:

<div class='jumbotron jumbotron-fluid img-fluid m-0 p-0 d-flex justify-content-center align-items-center' style='width: 100%; background-image: url("YOUR IMAGE URL HERE"); height: 45.5vh; min-height: 30.5vmin; background-repeat: no-repeat; background-size: cover; background-position: center center; flex-center;'>...</div>

The single quotation mark (apostrophe) ( ' ) is a result from ampersand entity numbers of ' or ' and the double quotation mark ( " ) is from " or ". In certain situation, these signs can not be used interchangeably in blogger platform.

Bootstrap jumbotron component is a responsive component which is highly flexible and customizable for any website or blog. This compoisnent can be used as a header or a responsive banner to display images, information or any key contents to attract audiences. Furthermore the content of a jumbotron such as background style, image, text and button can easily be customized based on our preferences.

. . .