How to change the background-color of jumbrotron?

后端 未结 14 1214
遥遥无期
遥遥无期 2021-02-01 13:03

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

相关标签:
14条回答
  • 2021-02-01 13:17

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

    0 讨论(0)
  • 2021-02-01 13:18

    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>

    0 讨论(0)
  • 2021-02-01 13:18

    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;
       }
    
    0 讨论(0)
  • 2021-02-01 13:21

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

    0 讨论(0)
  • 2021-02-01 13:24
    .jumbotron {
    background-color:black !important; 
    

    }

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

    0 讨论(0)
  • 2021-02-01 13:24

    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>
    
    0 讨论(0)
提交回复
热议问题