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;
}
});
}
}