Bootstrap 4 Jumbotron Component Installation Process

December 06, 2020

Bootstrap 4 Jumbotron Component Installation Process

The 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 only. The method requires a copy and paste process, which makes it easy to add the component on any part of the template such as post content.

Where to place a jumbotron for header section

The HTML markup for jumbotron component should be place inside the <header> tag after the <nav> tags markup as shown in the example below.

Html Code

<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 is applied CSS element of background-image to display the 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>

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.

Bootstrap jumbotron component is a responsive component which is highly flexible and customizable for any website or blog. This component 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.

Search This Blog

Blogger Codes