How to change the background-color of jumbrotron?

Question 1

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).

Question 2

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>

Question 3

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.

Question 4

Add this to your css file

.jumbotron {
    background-color:transparent !important; 
}

It worked for me.

Question 5

In the HTML file itself, modify the background-color of the jumbotron using the style attribute:
<div class="jumbotron" style="background-color:#CFD8DC;"></div>

Question 6

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;
}

Question 7

just and another class to jumbotron

bg-transparent

It will work perfectly

bootstrap color documentation: https://getbootstrap.com/docs/4.3/utilities/colors/

Question 8

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>

Question 9

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>

Question 10

In the .css try

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

Question 11

.jumbotron {
background-color:black !important;

}

Add this one line code in .css file, worked for me!

Question 12

I put the jumbotron in a <header> class and added background-color: black !important; to the header class in css.

Question 13

Adding internal style is not good for SEO and Performance. I add an id to the div e.g. id="jumbocustom" and style it

#jumbocustom
   {
 background:red;
   }

Question 14

I think another way to do it is to use in-line css, just add your background-color in the html code

<div class="jumbotron" style="background-color:blue;">
    <h3>Piece of text</h3>
</div>