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 matthewmitchell6
matthewmitchell6
7,279 Points

I am using Bootstrap 5 and that no longer has Jumbotron. How do I get around this?

I am trying to complete this challenge using Bootstrap 5 instead of Bootstrap 4 since it is now outdated. Can someone point me into the right direction so I can continue on this? Thanks in advance

3 Answers

Anton Steenhoudt
Anton Steenhoudt
9,235 Points

This is in the documentation of bootstrap. Jumbotron The jumbotron component is removed in favor of utility classes like .bg-light for the background color and .p-* classes to control padding. https://getbootstrap.com/docs/5.0/migration/#jumbotron So i think(not sure because i'm not writing the code for bootstrap) you should use something like

    <div class="container-fluid text-sm-center p-5 bg-light"> <!-- bg-light is background color & p-5 is padding -->
        <h1 class="display-2">Full Stack Conf</h1>
        <p class="lead">A One-day Conference About All Things JavaScript!</p>
    </div>
Zoltán Erkel
Zoltán Erkel
6,340 Points

Only thing missing is that for some reason the padding added to the div does not create a top padding on the h1..I added a "pt-5" class to the h1 so that it looks more close to the jumbotron solution.

Also I'm wondering why the padding only seems to function until 5 units, and when a bigger value is added to it (like p-7 or pt-7 to the h1 component) it collapses?

Alexandru Muntean
Alexandru Muntean
8,333 Points
Alexandru Muntean
Alexandru Muntean
8,333 Points

The only way I found that works:

<div style="margin-top:55px; padding-top:55px;" class="container-fluid text-sm-center p-5 bg-info text-white "> <!-- bg-light is background color & p-5 is padding -->
    <h1 class="display-2">Full Stack Conf</h1>
    <p class="lead">A One-day Conference About All Things JavaScript!</p>
</div>```
Alexandru Muntean
Alexandru Muntean
8,333 Points

I've compensated for the height of the navbar. I'm sure there is a better way of doing this. Anyone?

Jesse Wang
Jesse Wang
5,050 Points

this worked, thank you!

Kirt Perez
Kirt Perez
7,374 Points

I found that using sticky-top instead of fixed-top for the navbar makes the jumbotron section or the whole webpage not collapse under the navbar. Though I'm not sure what is best practice for it and I haven't gone to the part where Guil said he will go over how to fix the collapsing part of it.

Martin Sole
Martin Sole
82,062 Points
Martin Sole
Martin Sole
82,062 Points

Hi

To follow along you would need to either make your own Jumbotron or better would be to use the most recent version of Bootstrap 4(4.5) seeing as that is what the course is focusing on. Bootstrap 4 isn't out of date, the Beta version of 5 only came out three days ago and Bootstrap 4.5 was released in May this year.