CODEWITHSUNDEEP
csstwitter-bootstrap
eran
eran

Reputation: 15136

Jumbotron color and background won't change

trying to change the background and color of my jumbotron and nothing happens. The padding works, but the background does not.

My CSS:

.jumbotron {
    padding:70px 30px 70px 30px;
    margin:0px auto;
    background: #7986CB ;
    color:blue;
}

.row-header{
    margin:0px auto;
    padding:0px auto;
}

My <body>:

<header class="jumbotron">
        <div class="container">
            <div class="row row-header">
                <div class="col-xs-12 col-sm-8">
                    <h1>Header</h1>
                    <p style="padding:40px;"></p>
                    <p>bla bla</p>
                </div>
                <div class="col-xs-12 col-sm-4">
                </div>
            </div>
        </div>
    </header>

Why won't the collor change to blue, or the background to #7986CB? The inclusion of the CSS is ok, since changing the paddings does affect the jumbotron.

Upvotes: 3

Views: 6529

Answers (5)

Kavian Rabbani
Kavian Rabbani

Reputation: 984

use:

    background-color : #222 !important;

Update:
This is not a good way to override a style as it overrides every other background-color (except those that are specified in the inline style attribute). Try increasing the specificity of the CSS selector rather than using !important.
Read more about specificity here:
https://css-tricks.com/specifics-on-css-specificity/

Upvotes: 2

hsjeevan
hsjeevan

Reputation: 306

Your CSS Link has to be below the Bootstrap Link.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <--Bootstrap-->
	<link rel="stylesheet" href="app.css"> <--User_Defined-->

Upvotes: 2

Ekaji Onah
Ekaji Onah

Reputation: 11

The way I see it, it should work so make sure your css link is below the bootstrap or else the default bootstrap styles would keep overriding your css.

Upvotes: 1

vanburen
vanburen

Reputation: 21663

Use a custom class for specificity if need be, you don't need to use !important for something so simple. See MDN Specificity.

Working Example: 

.jumbotron.jumbotron-blue {
  background: #7986CB;
  color: blue;
  padding: 70px 30px;
  margin: 0;
}
.jumbotron.jumbotron-blue h1 {
  margin: 0;
}
.heading-paragraph {
  padding-top: 70px;
  margin: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<header class="jumbotron jumbotron-blue">
  <div class="container">
    <h1>This is a Heading</h1>
    <p class="heading-paragraph">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    </p>
  </div>
</header>

<div class="well">Hello</div>

Upvotes: 0

Toby
Toby

Reputation: 13385

Because you're directly overriding Bootstrap's CSS, you'll need to use the same syntax as they do:

.jumbotron {
  background-color: #7986CB;
}

Alternatively, you can add !important to force the override, but this is not recommended.

Using Developer Tools it's easy to see which CSS is applied and to which rules. Valid rules that are not applied are crossed out.

Upvotes: 4

Related Questions