Jumbotron

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

You can set the heading and lead text via the header and lead props, or use the named slots header and lead if you need HTML support.

Anything else between the opening and closing tags will be rendered at the bottom of the jumbotron.

Usage with props:

<div>
  <b-jumbotron header="BootstrapVue" lead="Bootstrap v4 Components for Vue.js 2">
    <p>For more information visit website</p>
    <b-button variant="primary" href="#">More Info</b-button>
  </b-jumbotron>
</div>

<!-- b-jumbotron.vue -->

Usage with slots:

<div>
  <b-jumbotron>
    <template #header>BootstrapVue</template>

    <template #lead>
      This is a simple hero unit, a simple jumbotron-style component for calling extra attention to
      featured content or information.
    </template>

    <hr class="my-4">

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

    <b-button variant="primary" href="#">Do Something</b-button>
    <b-button variant="success" href="#">Do Something Else</b-button>
  </b-jumbotron>
</div>

<!-- b-jumbotron-using-slots.vue -->

Options

Control which tag is rendered for the header by setting the header-tag to the appropriate HTML element. The default is h1. Both the prop header and slot header will be rendered inside this tag. If both the prop and the slot are specified, the slot will be shown.

Control the overall size of the header text by setting the header-level prop to a value between 1 and 4 - with 1 being the largest and 4 being smallest. The default value is 3.

Lead text

Control which tag is rendered for the lead text by setting the lead-tag to the desired HTML element. The default is p. Both the prop lead and slot lead will be rendered inside this tag. If both the prop and the slot are specified, the slot will be shown.

Fluid width

To make <b-jumbotron> full width, and without rounded corners, set the fluid prop. The inner content will automatically be placed into a <b-container> (fixed width at the various breakpoints). To change this to a fluid container, set the container-fluid prop. The container-fluid prop has no effect if the fluid prop is not set

Component tag

By default, <b-jumbotron> will render its root element as a div. Change the element tag to any other appropriate element by setting the tag prop to the desired element tag name.

Variants

Control the overall background variant with the bg-variant prop ( set to info, danger, warning, light, dark, etc.), the border variant with the border-variant prop, and the text variant with text-variant prop. All three props default to null, which will instruct the jumbotron to use the default styling.

<div>
  <b-jumbotron bg-variant="info" text-variant="white" border-variant="dark">
    <template #header>BootstrapVue</template>

    <template #lead>
      This is a simple hero unit, a simple jumbotron-style component for calling extra attention to
      featured content or information.
    </template>

    <hr class="my-4">

    <p>
      It uses utility classes for typography and spacing to space content out within the larger
      container.
    </p>
  </b-jumbotron>
</div>

<!-- b-jumbotron-variants.vue -->

Component reference

Properties

All property default values are globally configurable.

Property
(Click to sort ascending)
Type
(Click to sort ascending)
Default
Description
bg-variant
StringApplies one of the Bootstrap theme color variants to the background
border-variant
StringApplies one of the Bootstrap theme color variants to the border
container-fluid
Boolean or StringfalseWhen prop 'fluid' is set, this prop will make the inner container wrapper also fluid in width. Can also be set to one of the Bootstrap breakpoint names
fluid
BooleanfalseMakes the jumbotron full width, and without rounded corners. When set, the inner content will automatically be wrapped into a 'b-container' (fixed width at the various breakpoints)
header
StringText content to place in the header
header-html
Use with caution
StringHTML string content to place in the header
header-level
Number or String3Scaling factor of the header. Values range from 1 to 5
header-tag
String'h1'Specify the HTML tag to render instead of the default tag for the header
lead
StringText string to place in the lead paragraph
lead-html
Use with caution
StringHTML string to place in the lead paragraph
lead-tag
String'p'Specify the HTML tag to render instead of the default tag for the lead paragraph
tag
String'div'Specify the HTML tag to render instead of the default tag
text-variant
StringApplies one of the Bootstrap theme color variants to the text

Caution: Props that support HTML strings (*-html) can be vulnerable to Cross Site Scripting (XSS) attacks when passed raw user supplied values. You must properly sanitize the user input first!

Slots

Name
Description
default Content to place in the jumbotron
header Slot for custom header content. Placed inside 'header-tag'. Overrides the `header` and `header-html` props
lead For custom rendering of lead text content. Placed inside 'lead-tag'. Overrides the `lead` and `lead-html` props

Importing individual components

You can import individual components into your project via the following named exports:

Component
Named Export
Import Path
<b-jumbotron>BJumbotronbootstrap-vue

Example:

import { BJumbotron } from 'bootstrap-vue'
Vue.component('b-jumbotron', BJumbotron)

Importing as a Vue.js plugin

This plugin includes all of the above listed individual components. Plugins also include any component aliases.

Named Export
Import Path
JumbotronPluginbootstrap-vue

Example:

import { JumbotronPlugin } from 'bootstrap-vue'
Vue.use(JumbotronPlugin)