How to change the background-color of jumbrotron?
Try this:
<div style="background:transparent !important" class="jumbotron">
<h1>Welcome!</h1>
<p>We're an awesome company that creates virtual things for portable devices.</p>
<p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
</div>
Inline CSS gets preference over classes defined in a .css file and the classes declared inside <style>
Just remove class full from <html> and add it to <body> tag. Then set style background-color:transparent !important; for the Jumbotron div (as Amit Joki said in his answer).
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.
Add this to your css file
.jumbotron {
background-color:transparent !important;
}
It worked for me.