Angular Bootstrap Jumbotron

Angular jumbotron - Bootstrap 4 & Material Design

Angular 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

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

HTML



        <div class="card card-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Others/gradient1.jpg);">
          <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>
              <a mdbBtn color="white" outline="true" class="waves-light" mdbWavesEffect>
                <mdb-icon fas icon="clone" class="left"></mdb-icon>View project
              </a>
            </div>
          </div>
        </div>

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

HTML



        <div class="jumbotron">
          <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 typography and spacing to space content out within the larger container.</p>
          <a mdbBtn color="primary" size="lg" href="#" role="button" mdbWavesEffect>Learn more</a>
        </div>

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.

HTML



        <div class="jumbotron jumbotron-fluid">
          <div class="container">
            <h1 class="display-4">Fluid jumbotron</h1>
            <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
          </div>
        </div>

Jumbotron with image

My adventure

Photography

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

HTML



        <!-- Jumbotron -->
        <div class="jumbotron text-center">

          <!-- Title -->
          <h4 class="card-title h4 pb-2"><strong>My adventure</strong></h4>

          <!-- Card image -->
          <div class="view overlay my-4 waves-light" mdbWavesEffect>
            <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg" class="img-fluid" alt="">
            <a>
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>

          <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>

          <!-- Linkedin -->
          <a class="fa-lg p-2 m-2 li-ic"><i class="fab fa-linkedin-in grey-text"></i></a>
          <!-- Twitter -->
          <a class="fa-lg p-2 m-2 tw-ic"><i class="fab fa-twitter grey-text"></i></a>
          <!-- Dribbble -->
          <a class="fa-lg p-2 m-2 fb-ic"><i class="fab fa-facebook-f grey-text"></i></a>

        </div>
        <!-- Jumbotron -->

Jumbotron without padding MDB Pro component

Card title

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

Button

HTML



        <!-- Jumbotron -->
        <div class="jumbotron p-0">

          <!-- Card image -->
          <div class="view overlay rounded-top waves-light" mdbWavesEffect>
            <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(134).jpg" class="img-fluid" alt="Sample image">
            <a >
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>

          <!-- Card content -->
          <div class="card-body text-center mb-3">

            <!-- Title -->
            <h3 class="card-title h3 my-4"><strong>Card title</strong></h3>
            <!-- Text -->
            <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>
            <!-- Button -->
            <a mdbBtn gradient="purple" rounded="true" class="white-text mb-4" mdbWavesEffect>Button</a>

          </div>

        </div>
        <!-- Jumbotron -->

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.

HTML



        <!-- Jumbotron -->
        <div class="jumbotron text-center">

          <!-- Title -->
          <h2 class="card-title h2">Material Design for Bootstrap</h2>
          <!-- Subtitle -->
          <p class="blue-text my-4 font-weight-bold">Powerful and free Material Design UI KIT</p>

          <!-- Grid row -->
          <div class="row d-flex justify-content-center">

            <!-- Grid column -->
            <div class="col-xl-7 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>

            </div>
            <!-- Grid column -->

          </div>
          <!-- Grid row -->

          <hr class="my-4">

          <div class="pt-2">
            <button type="button" mdbBtn color="blue" mdbWavesEffect>Buy now <mdb-icon far icon="gem" class="ml-1"></mdb-icon> </button>
            <button type="button" mdbBtn color="primary" outline="true" mdbWavesEffect> Download <mdb-icon fas icon="download" class="ml-1"></mdb-icon></button>
          </div>

        </div>
        <!-- Jumbotron -->

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

HTML



        <!-- Jumbotron -->
        <div class="card card-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Others/forest2.jpg);">
          <div class="text-white text-center rgba-stylish-strong py-5 px-4">
            <div class="py-5">

              <!-- Content -->
              <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>
              <a mdbBtn gradient="peach" mdbWavesEffect> <mdb-icon fas icon="clone" class="left"></mdb-icon> View project</a>

            </div>
          </div>
        </div>
        <!-- Jumbotron -->

Light background MDB Pro component

Material Design for Bootstrap

Powerful and free Material Design UI KIT

HTML



        <!-- Jumbotron -->
        <div class="jumbotron text-center blue-grey lighten-5">

          <!-- Title -->
          <h2 class="card-title h2">Material Design for Bootstrap</h2>

          <!-- Subtitle -->
          <p class="indigo-text my-4 font-weight-bold">Powerful and free Material Design UI KIT</p>

          <!-- Grid row -->
          <div class="row d-flex justify-content-center">

            <!-- Grid column -->
            <div class="col-xl-7 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>

            </div>
            <!-- Grid column -->

          </div>
          <!-- Grid row -->

          <hr class="my-4 pb-2">

          <button mdbBtn gradient="blue" rounded="true" mdbWavesEffect>Buy now <mdb-icon far icon="gem" class="ml-1"></mdb-icon></button>
          <button mdbBtn color="indigo" rounded="true" mdbWavesEffect>Download <mdb-icon fas icon="download" class="ml-1"></mdb-icon></button>

        </div>
        <!-- Jumbotron -->

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

HTML



        <!-- News jumbotron -->
        <div class="jumbotron text-center hoverable p-4">

          <!-- Grid row -->
          <div class="row">

            <!-- Grid column -->
            <div class="col-md-4 offset-md-1 mx-3 my-3">

              <!-- Featured image -->
              <div class="view overlay waves-light" mdbWavesEffect>
                <img src="https://mdbootstrap.com/img/Photos/Others/laptop-sm.jpg" class="img-fluid" alt="Sample image for first version of blog listing">
                <a>
                  <div class="mask rgba-white-slight"></div>
                </a>
              </div>

            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col-md-7 text-md-left ml-3 mt-3">

              <!-- Excerpt -->
              <a href="#!" class="green-text">
                <h6 class="h6 pb-1"><i class="fas fa-desktop pr-1"></i> 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>

              <a mdbBtn color="success" mdbWavesEffect>Read more</a>

            </div>
            <!-- Grid column -->

          </div>
          <!-- Grid row -->

        </div>
        <!-- News jumbotron -->

Dark background

Material Design for Bootstrap

Powerful and free Material Design UI KIT

HTML



        <!-- Jumbotron -->
        <div class="jumbotron text-center mdb-color lighten-2 white-text mx-2 mb-5">

          <!-- Title -->
          <h2 class="card-title h2">Material Design for Bootstrap</h2>

          <!-- Subtitle -->
          <p class="my-4 h6">Powerful and free Material Design UI KIT</p>

          <!-- Grid row -->
          <div class="row d-flex justify-content-center">

            <!-- Grid column -->
            <div class="col-xl-7 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>

            </div>
            <!-- Grid column -->

          </div>
          <!-- Grid row -->

          <hr class="my-4 rgba-white-light">

          <div class="pt-2">
            <button type="button" mdbBtn color="white" outline="true" mdbWavesEffect class="waves-light">Buy now <mdb-icon far icon="gem" class="ml-1"></mdb-icon> </button>
            <button type="button" mdbBtn color="white" outline="true" mdbWavesEffect class="waves-light">Download <mdb-icon fas icon="download" class="ml-1"></mdb-icon></button>
          </div>

        </div>
        <!-- Jumbotron -->

Angular Jumbotron - API

In this section you will find informations about jumbotron and its required modules.

Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.

// MDB Angular Pro
import { ButtonsModule, IconsModule, WavesModule } from 'ng-uikit-pro-standard'

// MDB Angular Pro
import { ButtonsModule, IconsModule, WavesModule } from 'angular-bootstrap-md'

Import example Modules list

Introduction
Modules used