How to change the background-color of jumbrotron?

后端 未结 14 1215
遥遥无期
遥遥无期 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:28

    just and another class to jumbotron

    bg-transparent
    

    It will work perfectly

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

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

    In the .css try

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

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

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

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

    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.

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

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