Bootstrap–Additional Styles in the Jumbotron

Posted by Blake on 11/4/2018
)

This morning I working on a site that uses the Bootstrap jumbotron and I decided that I wanted a smaller version of it that was more compact with smaller Typography (but still larger than other elements I could use otherwise).

In version 4 of Bootstrap the display elements used in the standard jumbotron range from display-1 to display-4 (1 being the largest and 4 being the smallest). Below I'm sharing three CSS classes. The first is a jumbotron-mini that is a more compact version of the jumbotron (still large, just smaller than the standard). Also included are "display-5" and "display-6" which cna be used for smaller caption sizes if those are needed or desired.

.jumbotron-mini {    
    padding: 1rem .5rem;
    margin-bottom: 1rem;
    background-color: #e9ecef;
}

.display-5 {
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1.2;
}

.display-6 {
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.2;
}