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>