I want to know how to change the background-color of \'jumbotron\' class, it has a default background-color #eee
in bootstrap.css.
I tried to override by e
just and another class to jumbotron
bg-transparent
It will work perfectly
bootstrap color documentation: https://getbootstrap.com/docs/4.3/utilities/colors/
In the .css try
.jumbotron {
background-color:red !important;
}
You can use the following to change the background-color of a Jumbotron:
<div class="container">
<div class="jumbotron text-white" style="background-color: #8c6278;">
<h1>Coffee lover project !</h1>
</div>
</div>
The easiest way to change the background color of the jumbotron
If you want to change the background color of your jumbotron, then for that you can apply a background color to it using one of your custom class.
HTML Code:
<div class="jumbotron myclass">
<h1>My Heading</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
CSS Code:
<style>
.myclass{
background-color: red;
}
</style>
You don't necessarily have to use custom CSS (or even worse inline CSS), in Bootstrap 4 you can use the utility classes for colors, like:
<div class="jumbotron bg-dark text-white">
...
And if you need other colors than the default ones, just add additional bg-classes using the same naming convention. This keeps the code neat and understandable.
You might also need to set text-white on child-elements inside the jumbotron, like headings.
You can also create a custom jumbotron with whatever features/changes you want and apply that class in your html.
.jumbotronTransp {
padding: 30px;
margin-bottom: 30px;
font-size: 21px;
font-weight: 200;
line-height: 2.1428571435;
color: inherit;
background-color: transparent;
}