Tribute Page - problem with .small class. Help please!

Hi, I am trying to stick to pure Bootstrap for this first challenge, like in the example.
I am using Bootstrap 3.3. Here’s my problem:

The default font-size anywhere wrapped in the Jumbotron is much bigger than the default in a separate container without a Jumbotron. Also, the .small class isn’t working for me inside the Jumbotron.

See here for a demonstration of my problem.

Can anyone see what I’m doing wrong here and help me fix it? Ideally I would like to see the default text size in the Jumbotron to be consistent with other text not wrapped in a Jumbotron… of course I may be barking up the wrong tree. Any advice much appreciated.

Cheers, Rainer

Try this. Give the paragraph an id and then using CSS chose font size.
example:
id=“wantsmall”

#wantsmall {
font-size: 12px;
}

Thanks for that Ken but keep in mind I am trying to do this using Bootstrap classes only - no additional CSS.
I don’t understand why the default font size for elements contained in the Jumbotron div should be so large.

May be annother solution to your font size issue. check out this stackoverflow topic.
https://stackoverflow.com/questions/28678542/how-to-change-bootstraps-global-default-font-size

Thanks again Ken. Your pointer has now led me to look at the bootstrap min.css file directly and sure enough, the font-size declared for the jumbotron container is 21px… so I’ve relented and put a rule in my css to override that font size.
> .jumbotron p {
> font-size: 14px;
> }
Cheers, Rainer

I guess it’s all a trade off. Bootstrap’s responsiveness for styling choices.
Sometimes when using Bootstrap I feel like I am swimming in “div” soup and using more CSS than I would like. The alternative is to use flexbox and media queries.

Thanks for the pointers. I am an absolute newbie to all this, esp. styling :blush: