Whats wrong with this code?

[Jack_9]

My program isn't working correctly, it's not getting the output that I want in this bit of code so can somebody tell me what is wrong with it?

.jumbotron h1 {
    color: #fff;
    font-size: 48px;
    font-weight bold;
    font-family: 'Shift', sans-serif;
}

[dany12]

Yes it's very easy,bootstrap is overwriting your code.

So to override the bootstrap code use the important rule.

I prepared a codepen version for you

Click Here

Hope this helps

[Taywin]

Hmm.. I am not sure why you are calling a style in CSS as a code snippet? And when you said "my program isn't working correctly," to me it implies that you have a "software" running off the code you wrote. However, I have to change my mind when I saw your CSS and it should be "my page doesn't correctly display" instead.

Anyway, there are many reasons to explain why certain CSS style may not be displayed correctly.

1) Misspelled the class name in the display page (.html, .jsp, etc).

i.e.
<div class="jumbotronn">
  <h1>Header 1</h1>
  blah blah
</div>

2) Forgot that the header tag is not properly nested inside the class.

i.e. #1 - outside the nest
<h1>Header 1</h1>
<div class="jumbotron">
  Blah blah
</div>

i.e. #2 - too deep inside the nest
<div class="jumbotron">
  <h1>Header1</h1>
  The header tag display should follow the CSS
  <div class="something-else">
    <h1>Header2</h1>
    Default header tag style, global header tag style, or
    header tag style declared under 'something-else' class is applied
  </div>
</div>

3) Misused the CSS

i.e.
<h1 class="jumbotron">Header 1</h1>
Blah blah

4) Style is being overwritten (in many different ways)

i.e. #1
multiple declaration of the same style inside the css 1
.jumbotron h1 {
  color: #fff;
  font-size: 48px;
  font-weight bold;
  font-family: 'Shift', sans-serif;
}
...
.jumbotron h1 {
  color: #000;
  font-size: 40px;
  background-color: #FFF;
}
<div class="jumbotron">
  <h1>Header 1</h1>
  blah blah
</div>

i.e. #2
multiple declaration of the same style inside the css 2
.jumbotron h1 {
  color: #fff;
  font-size: 48px;
  font-weight bold;
  font-family: 'Shift', sans-serif;
}
...
.mamatron h1 {
  color: #000;
  font-size: 40px;
  background-color: #FFF;
}
look at the 2) #2 example

i.e. #3
multiple declaration of the same style inside the css
.jumbotron h1 {
  color: #fff;
  font-size: 48px;
  font-weight bold;
  font-family: 'Shift', sans-serif;
}

...

.jumbotron h1 {
  color: #000;
  font-size: 40px;
  background-color: #FFF;
}

i.e. #3
inline style overriden the CSS
<div class="jumbotron">
  <h1 style="color:#777">Header 1</h1>
  Blah blah
</div>

There are many browser plug-in tools that help you to test/verify that the intended CSS is applied to your element. On Firefox, firebug or webdeveloper tool is good and easy to use. On Chrome, there is already a built-in tool for you. I am not sure about IE because it has too many versions of its own browser!

[veera100]

In your css code you are missing the semicolon of font weight property.

Here is the correct code

    .jumbotron h1 {
    color: #fff;
    font-size: 48px;
    font-weight: bold;
    font-family: 'Shift', sans-serif;
    }

[almostbob]

Veera found it, mark it solved Jack