Jumbotron

Another variety of attention box for any taste

Default

<div class="jumbotron container">
  <div class="jumbotron-actual">
    <h2 class="display-4 m-b">Purchase on Market</h2>
    <p class="lead-alt m-b-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor</p>
    <a href="#" class="button button-theme button-large hvr-icon-fade button-rounded text-uppercase"><span>I just love it</span></a>
  </div>
</div>

Purchase on Market

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor

I just love it

Center align

<div class="jumbotron text-center container">
  <div class="jumbotron-actual">
    <h2 class="display-4 m-b">Purchase on Market</h2>
    <p class="lead-alt m-b-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor</p>
    <a href="#" class="button button-theme button-large hvr-icon-fade button-rounded text-uppercase"><span>I just love it</span></a>
  </div>
</div>

Purchase on Market

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor

I just love it

Right align

<div class="jumbotron text-right container">
  <div class="jumbotron-actual">
    <h2 class="display-4 m-b">Purchase on Market</h2>
    <p class="lead-alt m-b-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor</p>
    <a href="#" class="button button-theme button-large hvr-icon-fade button-rounded text-uppercase"><span>I just love it</span></a>
  </div>
</div>

Purchase on Market

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor

I just love it

Border

<div class="jumbotron jumbotron-border container">
  <div class="jumbotron-actual">
    <h2 class="display-4 m-b">Purchase on Market</h2>
    <p class="lead-alt m-b-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor</p>
    <a href="#" class="button button-theme button-large hvr-icon-fade button-rounded text-uppercase"><span>I just love it</span></a>
  </div>
</div>

Purchase on Market

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor

I just love it

No animation

<div class="jumbotron jumbotron-no-anim container">
  <div class="jumbotron-actual">
    <h2 class="display-4 m-b">Purchase on Market</h2>
    <p class="lead-alt m-b-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor</p>
    <a href="#" class="button button-theme button-large hvr-icon-fade button-rounded text-uppercase"><span>I just love it</span></a>
  </div>
</div>

Purchase on Market

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor

I just love it

Background color

Theme background

<div class="jumbotron jumbotron-bg-theme container">
  <div class="jumbotron-actual">
    <h2 class="display-4 m-b">Purchase on Market</h2>
    <p class="lead-alt m-b-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor</p>
    <a href="#" class="button button-theme button-large hvr-icon-fade button-rounded text-uppercase"><span>I just love it</span></a>
  </div>
</div>

Purchase on Market

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor

I just love it

Theme background 2

<div class="jumbotron jumbotron-bg-theme jumbotron-no-anim container">
  <div class="jumbotron-actual">
    <h2 class="display-4 m-b">Purchase on Market</h2>
    <p class="lead-alt m-b-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor</p>
    <a href="#" class="button button-large button-border button-border-white hvr-icon-fade button-rounded text-uppercase"><span>I just love it</span></a>
  </div>
</div>

Purchase on Market

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor

I just love it

Dark background

<div class="jumbotron jumbotron-bg-black container">
  <div class="jumbotron-actual">
    <h2 class="display-4 m-b">Purchase on Market</h2>
    <p class="lead-alt m-b-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor</p>
    <a href="#" class="button button-theme button-large hvr-icon-fade button-rounded text-uppercase"><span>I just love it</span></a>
  </div>
</div>

Purchase on Market

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor

I just love it

Dark background 2

<div class="jumbotron jumbotron-bg-black container">
  <div class="jumbotron-actual">
    <h2 class="display-4 m-b">Purchase on Market</h2>
    <p class="lead-alt m-b-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor</p>
    <a href="#" class="button button-large button-border button-border-white hvr-icon-fade button-rounded text-uppercase"><span>I just love it</span></a>
  </div>
</div>

Purchase on Market

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor

I just love it

Button color

Dark color

<div class="jumbotron container">
  <div class="jumbotron-actual">
    <h2 class="display-4 m-b">Purchase on Market</h2>
    <p class="lead-alt m-b-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor</p>
    <a href="#" class="button button-inverse button-large hvr-icon-fade button-rounded text-uppercase"><span>I just love it</span></a>
  </div>
</div>

Purchase on Market

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor

I just love it

Primary color

<div class="jumbotron container">
  <div class="jumbotron-actual">
    <h2 class="display-4 m-b">Purchase on Market</h2>
    <p class="lead-alt m-b-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor</p>
    <a href="#" class="button button-primary button-large hvr-icon-fade button-rounded text-uppercase"><span>I just love it</span></a>
  </div>
</div>

Purchase on Market

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor

I just love it

Primary color dark background

<div class="jumbotron jumbotron-bg-black container">
  <div class="jumbotron-actual">
    <h2 class="display-4 m-b">Purchase on Market</h2>
    <p class="lead-alt m-b-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor</p>
    <a href="#" class="button button-primary button-large hvr-icon-fade button-rounded text-uppercase"><span>I just love it</span></a>
  </div>
</div>

Purchase on Market

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor

I just love it

Action color

<div class="jumbotron container">
  <div class="jumbotron-actual">
    <h2 class="display-4 m-b">Purchase on Market</h2>
    <p class="lead-alt m-b-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor</p>
    <a href="#" class="button button-action button-large hvr-icon-fade button-rounded text-uppercase"><span>I just love it</span></a>
  </div>
</div>

Purchase on Market

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor

I just love it

Action color dark background

<div class="jumbotron jumbotron-bg-black container">
  <div class="jumbotron-actual">
    <h2 class="display-4 m-b">Purchase on Market</h2>
    <p class="lead-alt m-b-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor</p>
    <a href="#" class="button button-action button-large hvr-icon-fade button-rounded text-uppercase"><span>I just love it</span></a>
  </div>
</div>

Purchase on Market

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor

I just love it

Highlight color

<div class="jumbotron container">
  <div class="jumbotron-actual">
    <h2 class="display-4 m-b">Purchase on Market</h2>
    <p class="lead-alt m-b-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor</p>
    <a href="#" class="button button-highlight button-large hvr-icon-fade button-rounded text-uppercase"><span>I just love it</span></a>
  </div>
</div>

Purchase on Market

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor

I just love it

Highlight color dark background

<div class="jumbotron jumbotron-bg-black container">
  <div class="jumbotron-actual">
    <h2 class="display-4 m-b">Purchase on Market</h2>
    <p class="lead-alt m-b-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor</p>
    <a href="#" class="button button-highlight button-large hvr-icon-fade button-rounded text-uppercase"><span>I just love it</span></a>
  </div>
</div>

Purchase on Market

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor

I just love it

Caution color

<div class="jumbotron container">
  <div class="jumbotron-actual">
    <h2 class="display-4 m-b">Purchase on Market</h2>
    <p class="lead-alt m-b-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor</p>
    <a href="#" class="button button-caution button-large hvr-icon-fade button-rounded text-uppercase"><span>I just love it</span></a>
  </div>
</div>

Purchase on Market

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor

I just love it

Caution color dark background

<div class="jumbotron jumbotron-bg-black container">
  <div class="jumbotron-actual">
    <h2 class="display-4 m-b">Purchase on Market</h2>
    <p class="lead-alt m-b-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor</p>
    <a href="#" class="button button-caution button-large hvr-icon-fade button-rounded text-uppercase"><span>I just love it</span></a>
  </div>
</div>

Purchase on Market

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor

I just love it

Royal color

<div class="jumbotron container">
  <div class="jumbotron-actual">
    <h2 class="display-4 m-b">Purchase on Market</h2>
    <p class="lead-alt m-b-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor</p>
    <a href="#" class="button button-royal button-large hvr-icon-fade button-rounded text-uppercase"><span>I just love it</span></a>
  </div>
</div>

Purchase on Market

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor

I just love it

Royal color dark background

<div class="jumbotron jumbotron-bg-black container">
  <div class="jumbotron-actual">
    <h2 class="display-4 m-b">Purchase on Market</h2>
    <p class="lead-alt m-b-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor</p>
    <a href="#" class="button button-royal button-large hvr-icon-fade button-rounded text-uppercase"><span>I just love it</span></a>
  </div>
</div>

Purchase on Market

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum quis dolor vehicula suscipit. Ut interdum et arcu non hustensaft. Nullam nec volutpat felis, ac convallis tortor

I just love it