¿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

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.

Scroll al inicio
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Privacidad