change heading colour and background colour in Jumbotron

Bootstrap Studio Help
1

Hi all,

I've tried to change the colour of heading text and background of heading in Jumbotron via CSS but it doesn't work. I don't why. Any tips or tricks will be appreciated.

Ben

2

I found my solution now. I had to assign an id for each heading. Then, CSS would work. Just cannot work with h1 as a global tag. :)

3

Yeah, add an ID or an additional class name. Glad you got it worked out though. :)

4

Hi @bensw,

If you click to expand the STYLES pane, then select the heading you want to modify. In the STYLES pane you will see the first option as

element.style {
}

Then the second one is

.jumbotron .h1, .jumbotron h1 {
  color:inherit;
}

On the second one, to the right is vertical triple dot section that says Bootstrap with a lock icon. Click the triple dots and select Copy to and select your stylesheet. This will add a duplicate of the section of CSS that you want to edit above the locked Bootstrap CSS code. Now you can change the color. If you need different colors for each jumbotron then it would make more sense to do what you did.

I hope this helps you on what you can do with the app.

Saj