Vue Bootstrap Jumbotron

Vue Jumbotron - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Vue Bootstrap Jumbotron is a responsive component which the main goal is to focus visitor's attention or highlight the special piece of information.

Inside a Jumbotron, you can make use of almost any other Bootstrap code to additionally increase its engagement value.

Its flexibility lets you operate with images, enlarged fonts, different background styles, and CTA's.

Jumbotron use examples:

  • Project presentation
  • Article introduction
  • Image showcase

See a number of Bootstrap Jumbotron examples to familiarize yourself with its design.

Jumbotron with a background image

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

Create your beautiful website with MDBootstrap

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!

View project 
        
            
        <template>
          <mdb-card class="card-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Others/gradient12.webp)">
            <div class="text-white text-center py-5 px-4 my-5">
              <div>
                <h2 class="card-title h1-responsive pt-3 mb-5 font-bold"><strong>Create your beautiful website with MDBootstrap</strong></h2>
                <p class="mx-5 mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem,
                  optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!
                </p>
                <mdb-btn outline="white" size="md" icon="clone">View project</mdb-btn>
              </div>
            </div>
          </mdb-card>
        </template>
      
        
    
        
            
        <script>
          import { mdbCard, mdbBtn } from 'mdbvue';
          export default {
            name: 'JumbotronPage',
            components: {
              mdbCard,
              mdbBtn
            }
          }
        </script>

Basic example

A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

It uses utility classes for typography and spacing to space content out within the larger container.

Learn more 
        
            
        <template>
          <mdb-jumbotron class="mb-0">
            <h1 class="display-4">Hello, world!</h1>
            <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
            <hr class="my-4" />
            <p>It uses utility classes for typgraphy and spacing to space content out within the larger container.</p>
            <mdb-btn color="primary" size="lg">Learn more</mdb-btn>
          </mdb-jumbotron>
        </template>
      
        
    
        
            
        <script>
          import { mdbJumbotron, mdbBtn } from 'mdbvue';
          export default {
            name: 'JumbotronPage',
            components: {
              mdbJumbotron,
              mdbBtn
            }
          }
        </script>

Fluid jumbotron

To make the jumbotron full width, and without rounded corners, add the .jumbotron-fluid modifier class and add a .container or .container-fluid within.

Fluid jumbotron

This is a modified jumbotron that occupies the entire horizontal space of its parent.

        
            
        <template>
          <mdb-jumbotron fluid class="mb-0">
            <mdb-container>
              <h2 class="display-4">Fluid jumbotron</h2>
              <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
            </mdb-container>
          </mdb-jumbotron>
        </template>
      
        
    
        
            
        <script>
          import { mdbJumbotron, mdbContainer } from 'mdbvue';
          export default {
            name: 'JumbotronPage',
            components: {
              mdbJumbotron,
              mdbContainer
            }
          }
        </script>

Jumbotron with image

My adventure
Photography

Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

        
            
        <template>
          <mdb-jumbotron class="mb-0 text-center">
            <mdb-card-title class="pb-2 h4"><strong>My adventure</strong></mdb-card-title>
            <mdb-view class="my-4" src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).webp" alt="">
              <a><mdb-mask waves overlay="white-slight"/></a>        
            </mdb-view>
            <h5 class="indigo-text h5 mb-4">Photography</h5>
            <p class="card-text">Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
            <a class="fa-lg p-2 m-2 li-ic"><mdb-icon fab icon="linkedin-in" class="grey-text" /></a>
            <a class="fa-lg p-2 m-2 tw-ic"><mdb-icon fab icon="twitter" class="grey-text" /></a>
            <a class="fa-lg p-2 m-2 fb-ic"><mdb-icon fab icon="facebook-f" class="grey-text" /></a>
          </mdb-jumbotron>
        </template>
      
        
    
        
            
        <script>
          import { mdbJumbotron, mdbCardTitle, mdbView, mdbMask, mdbIcon } from 'mdbvue';
          export default {
            name: 'JumbotronPage',
            components: {
              mdbJumbotron,
              mdbCardTitle,
              mdbView,
              mdbMask,
              mdbIcon
            }
          }
        </script>

Jumbotron without padding MDB Pro component

Sample image

Card title

Some quick example text to build on the card title and make up the bulk of the card's

Button 
        
            
        <template>
          <mdb-jumbotron class="mb-0 p-0">
            <mdb-view class="rounded-top" src="https://mdbootstrap.com/img/Photos/Slides/img%20(134).webp" alt="">
              <a><mdb-mask waves overlay="white-slight"/></a>        
            </mdb-view>
            <mdb-card-body class="text-center">
              <h3 class="card-title h3 my-4"><strong>Card title</strong></h3>
              <p class="card-text py-2">Some quick example text to build on the card title and make up the bulk of the card's</p>
              <mdb-btn tag="a" gradient="purple" rounded class="mb-4">Button</mdb-btn>
            </mdb-card-body>
          </mdb-jumbotron>
        </template>
      
        
    
        
            
        <script>
          import { mdbJumbotron, mdbCardTitle, mdbCardBody, mdbView, mdbMask, mdbBtn } from 'mdbvue';
          export default {
            name: 'JumbotronPage',
            components: {
              mdbJumbotron,
              mdbCardTitle,
              mdbView,
              mdbMask,
              mdbCardBody,
              mdbBtn
            }
          }
        </script>

Jumbotron with buttons

Material Design for Bootstrap

Powerful and free Material Design UI KIT

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga aliquid dolorem ea distinctio exercitationem delectus qui, quas eum architecto, amet quasi accusantium, fugit consequatur ducimus obcaecati numquam molestias hic itaque accusantium doloremque laudantium, totam rem aperiam.

        
            
        <template>
          <mdb-jumbotron class="mb-0 text-center">
            <h2 class="card-title h2">Material Design for Bootstrap</h2>
            <p class="blue-text my-4 font-weight-bold">Powerful and free Material Design UI KIT</p>
            <mdb-row class="d-flex justify-content-center">
              <mdb-col xl="7" class="pb-2">
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga aliquid dolorem ea distinctio exercitationem delectus qui, quas eum architecto, amet quasi accusantium, fugit consequatur ducimus obcaecati numquam molestias hic itaque accusantium doloremque laudantium, totam rem aperiam.</p>
              </mdb-col>
            </mdb-row>
            <hr class="my-4">
            <mdb-btn color="blue" icon="gem" iconRight>Buy now</mdb-btn>
            <mdb-btn outline="primary" icon="download" iconRight darkWaves>Download</mdb-btn>
          </mdb-jumbotron>
        </template>
      
        
    
        
            
        <script>
          import { mdbJumbotron, mdbRow, mdbCol, mdbBtn } from 'mdbvue';
          export default {
            name: 'JumbotronPage',
            components: {
              mdbJumbotron,
              mdbCol,
              mdbRow,
              mdbBtn
            }
          }
        </script>

Jumbotron with image overlay

Photography

Jumbotron with image overlay

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur obcaecati vero aliquid libero doloribus ad, unde tempora maiores, ullam, modi qui quidem minima debitis perferendis vitae cumque et quo impedit.

View project 
        
            
        <template>
          <mdb-card class="card-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Others/forest2.webp)">
            <div class="text-white text-center rgba-stylish-strong py-5 px-4">
              <div class="py-5">
                <h5 class="h5 orange-text"><i class="fas fa-camera-retro"></i> Photography</h5>
                <h2 class="card-title h2 my-4 py-2">Jumbotron with image overlay</h2>
                <p class="mb-4 pb-2 px-md-5 mx-md-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur obcaecati vero aliquid libero doloribus ad, unde tempora maiores, ullam, modi qui quidem minima debitis perferendis vitae cumque et quo impedit.</p>
                <mdb-btn tag="a" gradient="peach" icon="clone">View project</mdb-btn>
              </div>
            </div>
          </mdb-card>
        </template>
      
        
    
        
            
        <script>
          import { mdbCard, mdbBtn } from 'mdbvue';
          export default {
            name: 'JumbotronPage',
            components: {
              mdbCard,
              mdbBtn
            }
          }
        </script>

Light background MDB Pro component

Material Design for Bootstrap

Powerful and free Material Design UI KIT

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga aliquid dolorem ea distinctio exercitationem delectus qui, quas eum architecto, amet quasi accusantium, fugit consequatur ducimus obcaecati numquam molestias hic itaque accusantium doloremque laudantium, totam rem aperiam.

        
            
        <template>
          <mdb-jumbotron class="mb-0 text-center blue-grey lighten-5">
            <h2 class="card-title h2">Material Design for Bootstrap</h2>
            <p class="indigo-text my-4 font-weight-bold">Powerful and free Material Design UI KIT</p>
            <mdb-row class="d-flex justify-content-center">
              <mdb-col xl="7" class="pb-2">
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga aliquid dolorem ea distinctio exercitationem delectus qui, quas eum architecto, amet quasi accusantium, fugit consequatur ducimus obcaecati numquam molestias hic itaque accusantium doloremque laudantium, totam rem aperiam.</p>
              </mdb-col>
            </mdb-row>
            <hr class="my-4 pb-2">
            <mdb-btn gradient="blue" rounded icon="gem" iconRight>Buy now</mdb-btn>
            <mdb-btn color="indigo" rounded icon="download" iconRight>Download</mdb-btn>
          </mdb-jumbotron>
        </template>
      
        
    
        
            
        <script>
          import { mdbJumbotron, mdbCol, mdbRow, mdbBtn } from 'mdbvue';
          export default {
            name: 'JumbotronPage',
            components: {
              mdbJumbotron,
              mdbCol,
              mdbRow,
              mdbBtn
            }
          }
        </script>

Jumbotron with news post

Sample image for first version of blog listing
Work

This is title of the news

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur.

by Carine Fox, 19/08/2016

Read more 
        
            
        <template>
          <mdb-jumbotron class="mb-0 text-center hoverable p-4">
            <mdb-row>
              <mdb-col md="4" offsetMd="1" class="m-3">
                <mdb-view src="https://mdbootstrap.com/img/Photos/Others/laptop-sm.webp" alt="Sample image for first version of blog listing">
                  <a><mdb-mask waves overlay="white-slight"/></a>
                </mdb-view>
              </mdb-col>
              <mdb-col md="7" class="text-md-left ml-3 mt-3">
                <a href="#!" class="green-text">
                  <h6 class="h6 pb-1"><mdb-icon icon="desktop" class="pr-1"/> Work</h6>
                </a>
                <h4 class="h4 mb-4">This is title of the news</h4>
                <p class="font-weight-normal">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque, totam
                  rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
                  dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur.</p>
                <p class="font-weight-normal">by <a><strong>Carine Fox</strong></a>, 19/08/2016</p>
                <mdb-btn color="success">Read more</mdb-btn>
              </mdb-col>
            </mdb-row>
          </mdb-jumbotron>
        </template>
      
        
    
        
            
        <script>
          import { mdbJumbotron, mdbRow, mdbCol, mdbView, mdbBtn, mdbIcon, mdbMask } from 'mdbvue';
          export default {
            name: 'JumbotronPage',
            components: {
              mdbJumbotron,
              mdbView,
              mdbMask,
              mdbIcon,
              mdbRow,
              mdbCol,
              mdbBtn
            }
          }
        </script>

Dark background

Material Design for Bootstrap

Powerful and free Material Design UI KIT

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga aliquid dolorem ea distinctio exercitationem delectus qui, quas eum architecto, amet quasi accusantium, fugit consequatur ducimus obcaecati numquam molestias hic itaque accusantium doloremque laudantium, totam rem aperiam.

        
            
        <template>
          <mdb-jumbotron class="mb-0 text-center mdb-color lighten-2 white-text">
            <h2 class="card-title h2">Material Design for Bootstrap</h2>
            <p class="my-4 font-weight-bold">Powerful and free Material Design UI KIT</p>
            <mdb-row class="d-flex justify-content-center">
              <mdb-col xl="7" class="pb-2">
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga aliquid dolorem ea distinctio exercitationem delectus qui, quas eum architecto, amet quasi accusantium, fugit consequatur ducimus obcaecati numquam molestias hic itaque accusantium doloremque laudantium, totam rem aperiam.</p>
              </mdb-col>
            </mdb-row>
            <hr class="my-4 rgba-white-light">
            <div class="pt-2">
              <mdb-btn outline="white" icon="gem" iconRight>Buy now</mdb-btn>
              <mdb-btn outline="white" icon="download" iconRight>Download</mdb-btn>
            </div>
          </mdb-jumbotron>
        </template>
      
        
    
        
            
        <script>
          import { mdbJumbotron, mdbRow, mdbCol, mdbBtn } from 'mdbvue';
          export default {
            name: 'JumbotronPage',
            components: {
              mdbJumbotron,
              mdbRow,
              mdbCol,
              mdbBtn
            }
          }
        </script>