Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Bootstrap Basics Using Bootstrap Components Using Jumbotron to Showcase Key Content

Posted by tim123
tim123
9,461 Points

Jumbotron is no longer available in bootstrap

jumbotron is no longer available

4 Answers

Terry Babyuk
Terry Babyuk
9,231 Points
Terry Babyuk
Terry Babyuk
9,231 Points

Hey Timothy,

Since Steven hasn't really given you a concrete way to locate the jumbotron in the old version of Bootstrap, here is the link:

https://getbootstrap.com/docs/4.1/components/jumbotron/

Samuel Weirton
Samuel Weirton
6,945 Points
Samuel Weirton
Samuel Weirton
6,945 Points

Here's a work-around for the Jumbotron that I'm using for this lesson:

<!-- Jumbotron -->
<div class="p-5 rounded-lg bg-info text-white">
  <div class="container text-sm-center pt-5">
    <h1 class="display-2">Full Stack Conf</h1>
    <p class="lead">A One-day Conference About All Things JavaScript!</p>
  </div>
</div> <!-- Jumbotron -->
Steven Parker
Steven Parker
229,708 Points
Steven Parker
Steven Parker
229,708 Points

With any rapidly evolving technology, it's important to be sure you are using the same version as the course.

You've probably installed Bootstrap 5, but this course uses Bootstrap 4.

studio 9ine
studio 9ine
32 Points
studio 9ine
studio 9ine
32 Points

how do i locate the new jumbotron?

Steven Parker
Steven Parker
229,708 Points
Steven Parker
Steven Parker
229,708 Points

As Tim was pointing out 2 years ago, Jumbotrons are no longer supported in Bootstrap 5. However, you can use a <div> element and add special helper classes together with a color class to achieve the same effect:

<div class="mt-4 p-5 bg-primary text-white rounded">
  <h1>Jumbotron Example</h1>
  <p>Lorem ipsum...</p>
</div>

There are some other suggested examples on this page of the Bootstrap documentation.