As a user of Bootstrap, I rely on the Bootswatch themes for my projects. However, I have noticed that the Jumbotron in every theme defaults to an unappealing grey background. To address this issue, I am exploring the use of the .bg- classes for customizing the color scheme.
In addition, I encountered the following advice:
Dealing with specificity
Sometimes, contextual background classes may not apply due to the specificity of another selector. In such cases, wrapping the element's content in a division with the corresponding class might provide a workaround solution.
Following this guidance, here is what I attempted:
<div class="jumbotron bg-success">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
</div>
<div class="bg-success">
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
</div>
</div>
Unfortunately, the bg- class did not override the default jumbotron background color as expected.
For a visual example, refer to: http://www.bootply.com/yhvhdor7lr
Edit
Related discussion: https://github.com/twbs/bootstrap/issues/10202