Jumbotron

Vue Bootstrap Jumbotron - free examples, templates & tutorial

Responsive Vue Jumbotron built with Bootstrap 5. Classic hero component, jumbotron with background image, with navbar, full height, slider & more combinations.

To learn more read Card Docs.


With navbar

Since jumbotron is usually the first element of the page, it may be a good idea to combine your jumbotron with a navbar.

        
            
          <header>
            <!-- Navbar -->
            <nav class="navbar navbar-expand-lg navbar-light bg-white">
              <div class="container-fluid">
                <button
                  class="navbar-toggler"
                  type="button"
                  (click)="jumbotronExample.toggle()"
                  aria-controls="jumbotronExample"
                  aria-expanded="false"
                  aria-label="Toggle navigation"
                >
                  <i class="fas fa-bars"></i>
                </button>
                <div
                  mdbCollapse
                  #jumbotronExample="mdbCollapse"
                  class="collapse navbar-collapse"
                  id="jumbotronExample"
                >
                  <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item active">
                      <a class="nav-link" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Features</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Pricing</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">About</a>
                    </li>
                  </ul>
                </div>
              </div>
            </nav>
            <!-- Navbar -->
          
            <!-- Jumbotron -->
            <div class="p-5 text-center bg-light">
              <h1 class="mb-3">Heading</h1>
              <h4 class="mb-3">Subheading</h4>
              <a class="btn btn-primary" href="" role="button">Call to action</a>
            </div>
            <!-- Jumbotron -->
          </header>
          
        
    

Background image with navbar

Header with background image might help to outstand your call to action elements by catching the eyes to some beautiful image in the background.

To provide a proper contrast it's highly recommended to use a mask. You can change the color and the opacity of the mask by manipulating RGBA code.

You also must set the height of the background image, otherwise, the component will collapse. In the example below, we set the height to 400px.

We use flexbox utilities to center the content vertically and horizontally.

        
            
          <header>
            <!-- Navbar -->
            <nav class="navbar navbar-expand-lg navbar-light bg-white">
              <div class="container-fluid">
                <button
                  class="navbar-toggler"
                  type="button"
                  (click)="backgroundImageExample.toggle()"
                  aria-controls="backgroundImageExample"
                  aria-expanded="false"
                  aria-label="Toggle navigation"
                >
                  <i class="fas fa-bars"></i>
                </button>
                <div
                  mdbCollapse
                  #backgroundImageExample="mdbCollapse"
                  class="collapse navbar-collapse"
                  id="backgroundImageExample"
                >
                  <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item active">
                      <a class="nav-link" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Features</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Pricing</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">About</a>
                    </li>
                  </ul>
                </div>
              </div>
            </nav>
            <!-- Navbar -->
          
            <!-- Background image -->
            <div
              class="p-5 text-center bg-image"
              style="
                background-image: url('https://mdbootstrap.com/img/new/slides/041.webp');
                height: 400px;
              "
            >
              <div class="mask" style="background-color: rgba(0, 0, 0, 0.6);">
                <div class="d-flex justify-content-center align-items-center h-100">
                  <div class="text-white">
                    <h1 class="mb-3">Heading</h1>
                    <h4 class="mb-3">Subheading</h4>
                    <a class="btn btn-outline-light btn-lg" href="#!" role="button"
                      >Call to action</a
                    >
                  </div>
                </div>
              </div>
            </div>
            <!-- Background image -->
          </header>
          
          
        
    

Animated navbar

You can achieve a very impressive effect by using our animated navbar, which is transparent on start, and change the color after the scroll.

Click the button below to see the full-screen demo.

        
            

            <!--Main Navigation-->
            <header>
              <!-- Animated navbar-->
              <nav
                class="navbar navbar-expand-lg fixed-top navbar-scroll"
                [class.navbar-scrolled]="navbarScrolled"
              >
                <div class="container-fluid">
                  <button
                    class="navbar-toggler"
                    type="button"
                    (click)="animatedNavbarExample2.toggle()"
                    aria-controls="animatedNavbarExample2"
                    aria-expanded="false"
                    aria-label="Toggle navigation"
                  >
                    <span class="navbar-toggler-icon d-flex justify-content-start align-items-center">
                      <i class="fas fa-bars"></i>
                    </span>
                  </button>
                  <div
                    mdbCollapse
                    #animatedNavbarExample2="mdbCollapse"
                    class="collapse navbar-collapse"
                    id="animatedNavbarExample2"
                  >
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                      <li class="nav-item active">
                        <a class="nav-link" aria-current="page" href="#intro">Home</a>
                      </li>
                      <li class="nav-item">
                        <a
                          class="nav-link"
                          href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA"
                          rel="nofollow"
                          target="_blank"
                          >Learn Bootstrap 5</a
                        >
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="https://mdbootstrap.com/docs/standard/" target="_blank"
                          >Download MDB UI KIT</a
                        >
                      </li>
                    </ul>

                    <ul class="navbar-nav flex-row">
                      <!-- Icons -->
                      <li class="nav-item">
                        <a
                          class="nav-link pe-2"
                          href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA"
                          rel="nofollow"
                          target="_blank"
                        >
                          <i class="fab fa-youtube"></i>
                        </a>
                      </li>
                      <li class="nav-item">
                        <a
                          class="nav-link px-2"
                          href="https://www.facebook.com/mdbootstrap"
                          rel="nofollow"
                          target="_blank"
                        >
                          <i class="fab fa-facebook-f"></i>
                        </a>
                      </li>
                      <li class="nav-item">
                        <a
                          class="nav-link px-2"
                          href="https://twitter.com/MDBootstrap"
                          rel="nofollow"
                          target="_blank"
                        >
                          <i class="fab fa-twitter"></i>
                        </a>
                      </li>
                      <li class="nav-item">
                        <a
                          class="nav-link ps-2"
                          href="https://github.com/mdbootstrap/mdb-ui-kit"
                          rel="nofollow"
                          target="_blank"
                        >
                          <i class="fab fa-github"></i>
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </nav>
              <!-- Animated navbar -->

              <!-- Background image -->
              <div
                id="intro"
                class="bg-image"
                style="
                  background-image: url(https://mdbcdn.b-cdn.net/img/new/fluid/city/113.webp);
                  height: 100vh;
                "
              >
                <div class="mask text-white" style="background-color: rgba(0, 0, 0, 0.8)">
                  <div class="container d-flex align-items-center text-center h-100">
                    <div>
                      <h1 class="mb-5">This is title</h1>
                      <p>
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis molestiae laboriosam
                        numquam expedita ullam saepe ipsam, deserunt provident corporis, sit non accusamus
                        maxime, magni nulla quasi iste ipsa architecto? Autem!
                      </p>
                    </div>
                  </div>
                </div>
              </div>
              <!-- Background image -->
            </header>
            <!--Main Navigation-->

            <div class="container my-5">
              <p>
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis quam minima perspiciatis eos
                tenetur. Praesentium dolores at quos aperiam sed, sint provident consectetur incidunt, nostrum
                porro earum commodi, ex architecto.
              </p>
            </div>

            
        
    
        
            
            import { Component, OnInit } from '@angular/core';
            import { fromEvent } from 'rxjs';
            
            @Component({
              selector: 'app-root',
              templateUrl: './app.component.html',
              styleUrls: ['./app.component.scss']
            })
            export class AppComponent implements OnInit {
              constructor() {}
            
              navbarScrolled = false;
            
              ngOnInit(): void {
                fromEvent(window, 'scroll').subscribe(() => {
                  if (window.scrollY > 0) {
                    this.navbarScrolled = true;
                  } else {
                    this.navbarScrolled = false;
                  }
                });
              }
            }