Headers
Vue Bootstrap 5 Headers component
Headers are compositions that extend standard navbar functionalities. They contain additional components like a jumbotron, sub-navbar, or image covers which serve as a containers for extra navigation elements - usually links, forms, or call-to-action buttons.
Jumbotron
A jumbotron is a lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.
<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 { MDBNavbar, MDBNavbarToggler, MDBNavbarNav, MDBNavbarItem, MDBCollapse } from 'mdb-vue-ui-kit';
import { ref } from 'vue';
export default {
components: {
MDBNavbar,
MDBNavbarToggler,
MDBNavbarNav,
MDBNavbarItem,
MDBCollapse
},
setup() {
const collapse1 = ref(false);
return { collapse1 };
}
};
</script>
<script setup lang="ts">
import {
MDBNavbar,
MDBNavbarToggler,
MDBNavbarNav,
MDBNavbarItem,
MDBCollapse
} from 'mdb-vue-ui-kit';
import { ref } from 'vue';
const collapse1 = ref(false);
</script>
Background image
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>
If you need to set a different height of the background image for large and small devices it's better to set it via regular CSS instead of inline CSS.
In the example below, we give it an
id="intro-example" and set a height of 400px for small devices and
600px for larger.
Learn Bootstrap 5 with MDB
Best & free guide of responsive web design
Start tutorial Download MDB UI KIT
<template>
<header>
<!-- Navbar -->
<MDBNavbar expand="lg" light bg="white" container>
<MDBNavbarToggler
target="#navbarExample03"
@click="collapse3 = !collapse3"
></MDBNavbarToggler>
<MDBCollapse id="#navbarExample03" v-model="collapse3">
<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
id="intro-example"
class="p-5 text-center bg-image"
style="background-image: url('https://mdbootstrap.com/img/new/slides/041.webp');"
>
<div class="mask" style="background-color: rgba(0, 0, 0, 0.7);">
<div class="d-flex justify-content-center align-items-center h-100">
<div class="text-white">
<h1 class="mb-3">Learn Bootstrap 5 with MDB</h1>
<h5 class="mb-4">Best & free guide of responsive web design</h5>
<MDBBtn lg tag="a" outline="light"
class="m-2"
href="https://www.youtube.com/watch?v=c9B4TPnak1A"
role="button"
rel="nofollow"
target="_blank"
>Start tutorial</MDBBtn>
<MDBBtn lg tag="a" outline="light"
class="m-2"
href="https://mdbootstrap.com/docs/vue/"
target="_blank"
role="button"
>Download MDB UI KIT</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 collapse3 = ref(false);
return { collapse3 };
},
};
</script>
<script setup lang="ts">
import {
MDBNavbar,
MDBNavbarToggler,
MDBNavbarNav,
MDBNavbarItem,
MDBBtn,
MDBCollapse,
} from 'mdb-vue-ui-kit';
import { ref } from 'vue';
const collapse3 = ref(false);
</script>
<style>
/* Default height for small devices */
#intro-example {
height: 400px;
}
/* Height for devices larger than 992px */
@media (min-width: 992px) {
#intro-example {
height: 600px;
}
}
</style>