Alter the background of only one jumbotron

Question

I have a situation where I need to customize the color of one of the two jumbotrons on my page. Here is the HTML for the jumbotrons:

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h3 class="display-5">TEST</h3>

After trying to change the background color of just one of the jumbotrons in CSS, I realized that both jumbotrons were affected by the changes.

.jumbotron-fluid{
    background-color: red!important;
}

I attempted to use an ID to target and modify the background color of one specific jumbotron, but unfortunately, it did not work as intended.

Answer 1

Answer №1

Try adding an ID to the jumbotron - there is no reason it shouldn't work

  #id {
      background-color: red!important;
   }

Alternatively, you can add another class to it

  <div class="jumbotron red"></div>

CSS

  .red {
      background-color: red!important;
   }

Or you can use inline styles

     <div class="jumbotron" style="background-color: red"></div>

Answer 2

Try adding an ID to the jumbotron - there is no reason it shouldn't work

  #id {
      background-color: red!important;
   }

Alternatively, you can add another class to it

  <div class="jumbotron red"></div>

CSS

  .red {
      background-color: red!important;
   }

Or you can use inline styles

     <div class="jumbotron" style="background-color: red"></div>