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.

        
            
          <template>
            <header>
              <!-- Navbar -->
              <MDBNavbar expand="lg" light bg="white" container>
                <MDBNavbarToggler
                  target="#navbarExample01"
                  @click="collapse1 = !collapse1"
                ></MDBNavbarToggler>
                <MDBCollapse id="#navbarExample01" v-model="collapse1">
                  <MDBNavbarNav class="mb-2 mb-lg-0">
                    <MDBNavbarItem to="#" active> Home </MDBNavbarItem>
                    <MDBNavbarItem to="#"> Features </MDBNavbarItem>
                    <MDBNavbarItem to="#"> Pricing </MDBNavbarItem>
                    <MDBNavbarItem to="#"> About </MDBNavbarItem>
                  </MDBNavbarNav>
                </MDBCollapse>
              </MDBNavbar>
             <!-- 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>
          </template>
          
        
    
        
            
            <script>
              import { MDBBtn, MDBNavbar, MDBNavbarToggler, MDBNavbarNav, MDBNavbarItem, MDBCollapse } from 'mdb-vue-ui-kit';
              import { ref } from 'vue';

              export default {
                components: {
                  MDBBtn,
                  MDBNavbar,
                  MDBNavbarToggler,
                  MDBNavbarNav,
                  MDBNavbarItem,
                  MDBCollapse,
                },
                setup() {
                  const collapse1 = ref(false);
                  return { collapse1 };
                },
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import {
                MDBNavbar,
                MDBNavbarToggler,
                MDBNavbarNav,
                MDBNavbarItem,
                MDBBtn,
                MDBCollapse,
              } from 'mdb-vue-ui-kit';
              import { ref } from 'vue';

              const collapse1 = ref(false);
            </script>
          
        
    

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.

        
            
          <template>
            <header>
              <!-- Navbar -->
              <MDBNavbar expand="lg" light bg="white" container>
                <MDBNavbarToggler 
                target="#navbarExample02"
                @click="collapse2 = !collapse2"
                ></MDBNavbarToggler>
                <MDBCollapse id="navbarExample02" v-model="collapse2">
                  <MDBNavbarNav class="mb-2 mb-lg-0">
                    <MDBNavbarItem to="#" active>
                      Home
                    </MDBNavbarItem>
                    <MDBNavbarItem to="#">
                      Features
                    </MDBNavbarItem>
                    <MDBNavbarItem to="#">
                      Pricing
                    </MDBNavbarItem>
                    <MDBNavbarItem to="#">
                      About
                    </MDBNavbarItem>
                  </MDBNavbarNav>
                </MDBCollapse>
              </MDBNavbar>
              <!-- 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>
                      <MDBBtn tag="a" lg outline="light"
                        href="#!"
                        role="button"
                        >Call to action
                      </MDBBtn>
                    </div>
                  </div>
                </div>
              </div>
              <!-- Background image -->
            </header>
          </template>
          
        
    
        
            
            <script>
              import { MDBBtn, MDBNavbar, MDBNavbarToggler, MDBNavbarNav, MDBNavbarItem, MDBCollapse } from 'mdb-vue-ui-kit';
              import { ref } from 'vue';

              export default {
                components: {
                  MDBBtn,
                  MDBNavbar,
                  MDBNavbarToggler,
                  MDBNavbarNav,
                  MDBNavbarItem,
                  MDBCollapse,
                },
                setup() {
                  const collapse2 = ref(false);
                  return { collapse2 };
                },
              };
            </script>
          
        
    
        
            
            <script setup lang="ts">
              import {
                MDBNavbar,
                MDBNavbarToggler,
                MDBNavbarNav,
                MDBNavbarItem,
                MDBBtn,
                MDBCollapse,
              } from 'mdb-vue-ui-kit';
              import { ref } from 'vue';

              const collapse2 = ref(false);
            </script>
          
        
    

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.

        
            
            <template>
              <!--Main Navigation-->
              <header>
                <!-- Animated navbar-->
                <MDBNavbar container expand="lg" position="top" scroll>
                  <MDBNavbarToggler
                    v-on:click="collapse = !collapse"
                    target="#navbarExample"
                  ></MDBNavbarToggler>
                  <MDBCollapse v-model="collapse" id="navbarExample">
                    <MDBNavbarNav class="me-auto mb-2 mb-lg-0">
                      <MDBNavbarItem to="#intro" active>
                        Home
                      </MDBNavbarItem>
                      <MDBNavbarItem
                        href="https://www.youtube.com/channel/UC5CF7mLQZhvx8O5GODZAhdA"
                        newTab
                        rel="nofollow"
                      >
                        Learn Bootstrap 5
                      </MDBNavbarItem>
                      <MDBNavbarItem
                        href="https://mdbootstrap.com/docs/vue/"
                        newTab
                        rel="nofollow"
                      >
                        Download MDB UI KIT
                      </MDBNavbarItem>
                    </MDBNavbarNav>
                    <ul class="navbar-nav flex-row">
                      <!-- Icons -->
                      <MDBNavbarItem
                        href="https://www.youtube.com/channel/"
                        newTab
                        rel="nofollow"
                        class="pe-2"
                      >
                        <MDBIcon iconStyle="fab" icon="youtube" />
                      </MDBNavbarItem>
                      <MDBNavbarItem
                        href="https://www.facebook.com/mdbootstrap"
                        newTab
                        rel="nofollow"
                        class="px-2"
                      >
                        <MDBIcon iconStyle="fab" icon="facebook-f" />
                      </MDBNavbarItem>
                      <MDBNavbarItem
                        href="https://twitter.com/MDBootstrap"
                        newTab
                        rel="nofollow"
                        class="px-2"
                      >
                        <MDBIcon iconStyle="fab" icon="twitter" />
                      </MDBNavbarItem>
                      <MDBNavbarItem
                        href="https://github.com/mdbootstrap/mdb-ui-kit"
                        newTab
                        rel="nofollow"
                        class="ps-2"
                      >
                        <MDBIcon iconStyle="fab" icon="github" />
                      </MDBNavbarItem>
                    </ul>
                  </MDBCollapse>
                </MDBNavbar>
                <!-- 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)">
                    <MDBContainer class="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>
                    </MDBContainer>
                  </div>
                </div>
                <!-- Background image -->
              </header>
              <!--Main Navigation-->
              <MDBContainer class="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>
              </MDBContainer>
              <!--Main Navigation-->
            </template>
            
        
    
        
            
            <script>
              import { MDBBtn, MDBNavbar, MDBNavbarToggler, MDBNavbarNav, MDBNavbarItem } from 'mdb-vue-ui-kit';
              export default {
                components: {
                  MDBBtn,
                  MDBNavbar,
                  MDBNavbarToggler,
                  MDBNavbarNav,
                  MDBNavbarItem
                },
              };
            </script>