2. 3.x Component Gallery
  3. Jumbotrons

Jumbotrons

v3.x

Jumbotrons create a prominent visual introductory focus to a page.

BBootstrap 3.x | Jumbotrons

| Find Image
Add sample image URL
  
Example | Africana Studies
Example | The problematics of...

Africana Studies

The Problematics of Race, Class and Gender

Course Page 

<div class="jumbotron" style="background-size: cover; background-image: url("https://libapps.s3.amazonaws.com/accounts/38465/images/Africana-mini.jpg");">
   <h1 style="color:#FFFFFF;text-shadow: 1px 1px gray;" class="jumbotronic">Africana Studies</h1>
   <h6 style=" text-shadow: 1px 1px gray; color:#FFFFFF">The Problematics of Race, Class and Gender</h6>
   <p class="text-left">
      <a class="btn btn-danger btn-lg" href="" target="_blank" role="button">
         <i class="fa fa-fw fa-graduation-cap" aria-hidden="true"></i>
         Course Page
      </a>
   </p>
</div>

Custom CSS

You may wish to add the .text-shadow class to add contrast to the heading and parapgraph elements. You may also with to add some top margin to the button with the margin-top propert. You might use classes such as the .btn-secondary-dark and .btn-secondary-light to create transparent buttons.

View all custom Bootstrapr.io CSS 
/* Adds text shadow to make the text inside the jumbotron pop */
.jumbotron p,
.jumbotron h1 {
   text-shadow: 2px 2px 1px black;
}

/* Adds a top margin to the jumbotron button for better readability */
.jumbotron .btn {
   margin-top: 1.5rem;
}

/* Transparent buttons */
.btn-secondary-dark {
    color: #000000;
    background-color: transparent;
    border-color: #000000;
}

.btn-secondary-light {
   color: #FFFFFF;
   background-color: transparent;
   border-color: #FFFFFF;
}