0

I have in my application a bootstrap card with a header, which looks like this: card

As a code I used:

<div class="card">
      <div class="card-header card-header-warning">
           <h4 class="card-title">Blah blah</h4>
      </div>

      <div class="card-body">
      </div>
</div>

But I don't want to use the in bootstrap defined colors (like primary, warning, success...), I want to use other colors like cyan or bordeaux (in GRB fromat or HEX, just not bootstrap).

How may I implement this? I tried with defining an ID in the div like this:

<div class="card-header card-header-warning" id="card-header-color">

And in my css I had:

#card-header-color {
   background-color: cyan;
}

But nothing has changed.

Then I deleted the "card-header-warning" part, but then the styling was also gone (look at the picture), so I just need a way to change the color, without having to style the header again. card-2

I'd be really happy, if you could help me.

2
  • What kind of styling is gone. I can not reproduce this issue ? Sep 10, 2020 at 8:07
  • @AlwaysHelping you see on the first picture the border has a radius is there and it is somehow smaller. And then the cyan one has no border radius and it goes the whole width of the card.
    – user12304080
    Sep 10, 2020 at 8:10

4 Answers 4

0
  1. Make sure that your css file attached after bootstrap css file on the head tag
  2. Try like this .card > .card-header-warning{background: cyan} still issue there ?
  3. Make sure that your piece of code is at the end of the style sheet still issue there ?
  4. Try the forced override .card-header-warning{background: cyan!important}
1
  • Thanks a lot, the problem was, that I didn't use the property "background", but instead I used "background-color"!
    – user12304080
    Sep 10, 2020 at 10:16
0

You can try to only override the color by using the !important rule.

you code will become:

#card-header-color {
   background-color: cyan !important;
}

and

<div class="card-header card-header-warning" id="card-header-color">
1
  • Thanks a lot, the problem was, that I didn't use the property "background", but instead I used "background-color" And I needed to add the "!important", so it was part of the problem :)
    – user12304080
    Sep 10, 2020 at 10:17
0

You can use the !important property to your CSS (normally it should work).

#card-header-color {
   background-color: cyan !important;
}
1
  • Thanks a lot, the problem was, that I didn't use the property "background", but instead I used "background-color". And thanks, I actually needed the "!important"
    – user12304080
    Sep 10, 2020 at 10:18
0

First of all, you shouldn't use IDs to style components. It's not a good practice.

Also, you can just color the text inside it to match your needs with text-white or whatever. So, your html would look like this:

<div class="card">
      <div class="card-header card-header-color">
           <h4 class="card-title text-white">Blah blah</h4>
      </div>

      <div class="card-body">
      </div>
</div>

And your css:

.card-header-color {
  background-color: cyan;
}

Looking at the bootstrap documentation, you can also see how to implement the cards the way they are intended to, here is a example of a blue info card.

<div class="card text-white bg-info">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
1
  • Thanks a lot, the problem was, that I didn't use the property "background", but instead I used "background-color"
    – user12304080
    Sep 10, 2020 at 10:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy