Bootstrap 4 card with outline headers and footers

If you use Bootstrap 4 cards and apply one of the outline classes to add some colour you will find the header and footer are still grey, which doesn't look right.

This is how they look:



Personally I think the header and footer should receive the same colour as the outline class.

The Bootstrap team have already said no to this when it was suggested on GitHub.

Fortunately it is simple to apply some other Bootstrap classes to achieve the desired result. Add the corresponding bg-* class and "text-white".

Example:

<div class="card card-outline-danger">
  <div class="card-header bg-danger text-white">
    Header
  </div>
  <div class="card-block">
    The quick brown fox jumps over the lazy dog
  </div>
  <div class="card-footer bg-danger text-white">
    Footer
  </div>
</div>

And this is how cards can look now:



Much better, right?