0

I have some customized CSS settings to get my headers to look like this:

enter image description here

Here are my custom settings:

h2 {
    background-color: #665d5d;
    border-bottom: 1px solid #d4d4d4;
    border-top: 1px solid #d4d4d4;
    border-radius: 5px;
    color: #fff;
    font-size: 1.1em;
    margin: 12px;
    padding: 0.3em 1em;
    text-align: center;
}

After I referenced bootstrap.css, my headings changed to a bigger font than I would like:

enter image description here

To get around this, I can specify the font in every h2 in the HTML:

<h2 style="font-size: 1.1em;">

But I know that can't be the right way to handle this. How do I use my custom h2 settings for my headers now that it conflicts with bootstrap?

Tomas Voracek
  • 5,886
  • 1
  • 25
  • 41
Bob Horn
  • 33,387
  • 34
  • 113
  • 219

1 Answers1

1
  1. Declare your css AFTER Bootstrap declaration. Do not redefine H2 or any other element in Bootstrap unless you really want it. Define your own css class for H2 element and apply it to H2 tag you want to have your custom style.
  2. Not helping? Use !important

Also read https://stackoverflow.com/a/8672691/313199

Example:

In CSS:

h2.myHeader { font-size: 1.1em; }

In HTML:

<h2 class="myHeader">
Community
  • 1
  • 1
Tomas Voracek
  • 5,886
  • 1
  • 25
  • 41
  • But won't my custom CSS then conflict with bootstrap's? – Bob Horn Aug 04 '15 at 17:15
  • 1
    Of course they can. Write your own css class and apply it it H2 element instead of redefining H2 styles. That will work. – Tomas Voracek Aug 04 '15 at 17:16
  • When you say to define my own css class, do you mean to add something like h2.myHeader and set the font there? Then the h2 element would reference that? – Bob Horn Aug 04 '15 at 17:25
  • 1
    Okay, for completeness, I added an example in your answer. If that looks, right, we're good to go. But wait, what sucks about that is that I have to alter my h2 in HTML everywhere. Isn't there a way I can create my own h99 or something to use? – Bob Horn Aug 04 '15 at 17:32
  • I don't understand this at all. There is no need for a separate class. If you simply provide an `h2` rule with the desired font size after including Bootstrap, everything will work fine. –  Aug 04 '15 at 17:38
  • @torazaburo The question is if he wants to modify ALL headings (including those in Bootstrap) or not. From the question the latter seems more likely, thus best way to deal with this is to not interfere with bootstrap directly but to create new style instead. – Tomas Voracek Aug 04 '15 at 17:42
  • But if I do that, that will affect everything else. I only want that font size for my headers on certain pages. There may be other places where the standard h2 should remain what it is. – Bob Horn Aug 04 '15 at 17:42
  • @BobHorn Exactly how I understood it. And no, there is no other way if you want to have yours h2 to be customized without modifying bootstrap. You need to specify your class everywhere. That's how it works. – Tomas Voracek Aug 04 '15 at 17:43
  • Is it possible to extend h2 into something with a new name, like h99? Then I would only use h99 where I wanted this style. – Bob Horn Aug 04 '15 at 17:54
  • Overriding Bootstrap is not "interfering" with it, it's just "overriding" it. Unless he thinks he may want to go back to the native Bootstrap styles in some cases, then he absolutely should override it, and that's how everyone using Bootstrap does it. I cannot imagine why this answer is the accepted one. It's basically wrong. –  Aug 04 '15 at 18:35