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 Framework Basics Prototyping with Bootstrap Building a Header, Navigation, and Jumbotron Component

Leigh Maher
Leigh Maher
21,830 Points
Posted by Leigh Maher
Leigh Maher
21,830 Points

.jumbotron p styles overriding the .lead class styles

When I add the jumbotron class to the relevant div, and then add the lead class to the first paragraph, and look at the inspector, there's a style called .jumbotron p that overrides the styles that .lead ads. So, for example, when you narrow the viewport, the font size does not decrease as it should.

Does this happen for anyone else?

Thanks.

4 Answers

Stuart Elmore
Stuart Elmore
84 Points

This is due to the specificity of the selector - the p has a greater weight and thus overrides it.

For more information on CSS specificity, I'd recommend this article by Smashing Mag or Mozilla's specification of specificity here for more information.

Leigh Maher
Leigh Maher
21,830 Points
Leigh Maher
Leigh Maher
21,830 Points

Thanks for that, Stuart. But in the case of Bootstrap, why would they create a class that would never work within a jumbotron?

Stuart Elmore
Stuart Elmore
84 Points

Do you have an example of your code? I'm interested to see why they would do that too!

Leigh Maher
Leigh Maher
21,830 Points
Leigh Maher
Leigh Maher
21,830 Points

Thanks Stuart. Here's what I've got:

html
       <div class="jumbotron">
        <h1>Self-destructing message app</h1>
        <p class="lead">Learn how to build this fun little app by signing up for a Treehouse account today! We'll teach you how to build both apps from scratch!</p>
        <p class="btn-group">
          <a class="btn btn-success btn-lg" href="#">Download the app</a>
          <a class="btn btn-default btn-lg hidden-xs" href="#">Text me the link</a>
        </p>
      </div>

I could solve it by making the lead paragraph into a div but it wouldn't be semantically correct, so I don't want to to that. I could probably also create my own style with something like .jumbotron p.lead, but I don't want to add more styles if I don't have to.

Thanks.

Stuart Elmore
Stuart Elmore
84 Points

I honestly think it's an oversight on the part of Bootstrap. It looks like the component Jumbotron wasn't built with the p.lead in mind. In fact, looking at the styles on the Jumbotron vs the p.lead, they both are very similar. I guess semantically they maybe felt that as you're only likely to have one 'leading' paragraph in a Jumbotron, then it wouldn't need to have a specific 'leading' class - the specificity of the singular p in the Jumbotron should be enough. With that in mind, you could modify the links in your code (2nd p tag) to be an unordered list, since technically (and semantically) they are a list of links...? :)

Leigh Maher
Leigh Maher
21,830 Points
Leigh Maher
Leigh Maher
21,830 Points

Thanks Stuart. Yes, probably an oversight. Although, when Guil is doing it in the video, the class styles do work as they should, which is weird. Also, won't the style of .jumbotron p affect all paragraphs in the jumbotron? Which wouldn't make sense, if you wanted one of them to stand out in some way. The .lead class should allow this paragraph to stand out from any others.

Yes, making those links an ul would do the trick, too, and would probably make more sense.

Also, I'm using SASS to generate my CSS, which Guil is not doing in these videos. Maybe the source of the issue lies in this?

Thanks for your help.

Fernando Vidoto
Fernando Vidoto
13,323 Points
Fernando Vidoto
Fernando Vidoto
13,323 Points

Got the same issue,

This happens to be an error with the css that I've used, which was installed with bower. after switching back to the minified version inside 'css/bootstrap.min.css' solved the problem