Jumbotron
A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.
Example
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.
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.
SASS Reference
Variables
The available Customization options, or Sass variables, that can be customized for jumbotrons.
Name | Type | Default | Description |
---|---|---|---|
$enable-jumbotron |
boolean | true |
Enable the generation of the jumbotron classes.
Smaller segements of the jumbotron classes can be disabled with the following $enable-* variables.
|
$enable-jumbotron-fluid |
boolean | true |
Enable the generation of fluid width jumbotron class. |
$jumbotron-padding-y |
string | 3rem |
Vertical padding for jumbotron. |
$jumbotron-padding-x |
string | 1.5rem |
Horizontal padding for jumbotron. |
$jumbotron-breakpoint |
breakpoint | sm |
At which breakpoint to alter the jumbotron padding. |
$jumbotron-padding-xs-y |
string | 1.5rem |
Vertical padding for jumbotron below the specified breakpoint. |
$jumbotron-padding-xs-x |
string | .75rem |
Horizontal padding for jumbotron below the specified breakpoint. |
$jumbotron-bg |
string | $uibase-50 |
Background color for jumbotron. |
$jumbotron-border-radius |
string | .3125rem |
Border radius for jumbotron. |
Mixins
No mixins available.