JUMBTRON USAGE

in order to use the Jumbotron Unit First Create a div element with class name **jumbtron** and if you wanna make fixed width along with the containers just add to it class name container then inside the jumbtron section Create Another div With Class name jumbtron-content it’s support the container class too , after that you can place you content elements as you want ••• see the Example below.

<!-- Jumbtron -->
<div class="jumbtron">
    <div class="jumbtron-content container">
        <!-- Content Divide -->
        <div class="row align-center-y">
            <!-- Image/icons Content -->
            <div class="col-12 col-m-4 col-l-2">
                <img src="img/icon.png" alt="icon image">
            </div>
            <!-- Text Content -->
            <div class="col-12 col-m-8 col-l-10">
                <h2 class="tx-uppercase">Jumbotron / Hero Unit Title</h2>
                <p>In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam id dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. </p>
            </div>
            <!-- Action Content -->
            <div class="action-area">
                <p>pharetra vitae, orci. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor.</p>
                <a href="#" class="btn primary tx-capitalize">Learn More Details</a>
            </div>
        </div>
        <!-- // Content Divide -->
    </div>
</div>
<!-- // Jumbtron -->

JUMBTRON EXAMPLE #2

centered content with no images example of the Hero Unit

<!-- Jumbtron-->
<div class="jumbtron">
    <div class="jumbtron-content container tx-align-center">
        <!-- Content -->
        <h2 class="tx-uppercase">Jumbotron / Hero Unit Title</h2>
        <p>In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam id dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. </p>
        <a href="#" class="btn primary tx-uppercase">Learn More</a>
        <a href="#" class="btn warning tx-uppercase">Contact US</a>
        <!-- // Content -->
    </div>
</div>
<!-- // Jumbtron-->

JUMBTRON UNIT COLORING

in order to gain a Background Color for the Hero Unit you can use the standard coloring classes like [ primary , secondary , success , warning , danger , dark , info , etc.]

<!-- Jumbtron -->
<div class="jumbtron primary">
    <div class="jumbtron-content container">
        <!-- Content Divide -->
        <div class="row align-center-y">
            <!-- Image/icons Content -->
            <div class="col-12 col-m-4 col-l-2">
                <img src="img/icon.png" alt="icon image">
            </div>
            <!-- Text Content -->
            <div class="col-12 col-m-8 col-l-10">
                <h2 class="tx-uppercase">Jumbotron / Hero Unit Title</h2>
                <p>In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam id dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. </p>
            </div>
            <!-- Action Content -->
            <div class="action-area">
                <p>pharetra vitae, orci. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor.</p>
                <a href="#" class="btn light tx-capitalize">Learn More Details</a>
            </div>
        </div>
        <!-- // Content Divide -->
    </div>
</div>
<!-- // Jumbtron -->

UTILITIES

Jumbtron Unit Class Names Utilities for Layout and Coloring.

Class Name element description
jumbtron jumbtron wrapper The Main Wrapper of The Unit
jumbtron-content Content wrapper The Jumbotron Content Wrapper
action-area Interaction Elements Wrapper for Creating Interaction Elements Aligned Like a Paragraph and Button.
Coloring Classes
primary jumbotron wrapper Coloring The Unit With The Primary Color Theme.
secondary jumbtron wrapper Coloring The Unit With The Secondary Color Theme.
dark jumbtron wrapper Coloring The Unit With The Dark Color Theme.
success jumbtron wrapper Coloring The Unit With The Success Green Color.
danger jumbtron wrapper Coloring The Unit With The Danger Red Color.
info jumbtron wrapper Coloring The Unit With The info skyblue Color.
warning jumbtron wrapper Coloring The Unit With The Warning Yellow Color.