¿Cómo cambiar el color de fondo de header card Bootstrap?

Si estas intentando cambiar el color de fondo de un header en card de BootStrap estas en el lugar correcto. En este articulo aprenderemos a como personalizar los colores de fondo en los encabezados.

Cambiar el color de fondo de header card Bootstrap

En primer lugar, hay que configurar el color de fuente en blanco, para ello simplemente use la clase text-white.

Primera forma: Declarar estilos CSS en línea

Es una modalidad directa y se aplica a la etiqueta que se desea personalizar, veamos un ejemplo.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">

<div class="container">
  <div class="card">
    <div class="card-header text-white" style="background-color: #00AA9E;">
      Destacado
    </div>
    <div class="card-body">
      <h4 class="card-title">Especial Titulo</h4>
      <p class="card-text">Texto adicional.</p>
      <a href="#" class="btn btn-primary">Aceptar</a>
    </div>
  </div>
</div>

Segunda forma: Cambiar propiedades de las clases

Hay una forma más sencilla de hacerlo y es cambiar los valores de las propiedades. Además, aplicar !important a las configuraciones en su clase CSS. Esto hará que anulen todas las configuraciones establecidas por el framework Bootstrap en el mismo elemento. Aquí les dejo el código.

.card-header {
   color: white !important;
   background-color: #00AA9E !important;
}

Esta integración pueden agregarlo en un archivo de CSS o declararlo en el mismo archivo que estén trabajando en HTML.

Tercera forma: Usando las clases de Bootstrap

En vez de usar colores hexadecimales podemos aprovechar las clases de BootStrap para personalizar los colores de fondo de los encabezados de nuestras tarjetas (CARD)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">


<div class="container">
  <div class="card">
    <div class="card-header text-white bg-primary">
      Destacado
    </div>
    <div class="card-body">
      <p class="card-text">Texto adicional.</p>
    </div>
  </div>


  <div class="card">
    <div class="card-header text-white bg-secondary">
      Destacado
    </div>
    <div class="card-body">
            <p class="card-text">Texto adicional.</p>
    </div>
  </div>


  <div class="card">
    <div class="card-header text-white bg-success">
      Destacado
    </div>
    <div class="card-body">
            <p class="card-text">Texto adicional.</p>
    </div>
  </div>  


  <div class="card">
    <div class="card-header text-white bg-danger">
      Destacado
    </div>
    <div class="card-body">
            <p class="card-text">Texto adicional.</p>
    </div>
  </div>    


</div>

De 3 maneras podemos personalizar las tarjetas en BootStrap y podemos elegir cualquiera de los 3 modelos según sus necesidades.