Tarjeta Bootstrap 5

Tarjeta

Las tarjetas de Bootstrap 5 son cuadros con bordes, y alrededor de su contenido hay algunos márgenes internos. Incluye opciones como encabezado, pie de página, contenido, colores, etc.

Tarjeta básica

Una tarjeta básica se utiliza con .card La clase creada, el contenido dentro de la tarjeta tiene un .card-body Clase:

Ejemplo

<div class="card">
  <div class="card-body">Tarjeta básica</div>
</div>

Prueba personalmente

Encabezado y pie de página

.card-header Añadir título a la tarjeta con la clase:.card-footer Añadir pie de página a la tarjeta con la clase:

Ejemplo

<div class="card">
  <div class="card-header">Encabezado de página</div>
  <div class="card-body">Contenido</div>
  <div class="card-footer">Pie de página</div>
</div>

Prueba personalmente

Tarjeta de contexto

Para agregar un color de fondo a la tarjeta, utilice las clases de contexto:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

Ejemplo

Prueba personalmente

título, texto y enlace

Por favor, use .card-title Añadir el título de la tarjeta a cualquier elemento de título. Si <p> El elemento es .card-body El último elemento secundario (o el único elemento secundario), entonces .card-text Clase para quitar <p> Márgenes inferiores del elemento..card-link Añadir efecto azul y hover a enlaces aleatorios.

Ejemplo

<div class="card">
  <div class="card-body">
    <h4 class="card-title">Título de tarjeta</h4>
    <p class="card-text">Algunos textos de ejemplo. Algunos textos de ejemplo.</p>
    <a href="#" class="card-link">Enlace de tarjeta</a>
    <a href="#" class="card-link">Otro enlace</a>
  </div>
</div>

Prueba personalmente

imagen de tarjeta

Convertir .card-img-top o .card-img-bottom Agregar a <img>se puede colocar la imagen en la parte superior o inferior de la tarjeta.

Nota: Hemos añadido una imagen fuera de .card-body para cubrir toda la anchura:

Ejemplo

<div class="card" style="width:400px">
  <img class="card-img-top" src="avatar.png" alt="Imagen de tarjeta">
  <div class="card-body">
    <h4 class="card-title">Bill Gates</h4>
    <p class="card-text">Bill Gates es un programador e ingeniero. Algunos textos de ejemplo. Algunos textos de ejemplo.</p>
    <a href="#" class="btn btn-primary">Ver perfil personal</a>
  </div>
</div>

Prueba personalmente

Superposición de imagen de tarjeta

Convertir la imagen en fondo de tarjeta y usar .card-img-overlay Añadir texto en la parte superior de la imagen:

Ejemplo

<div class="card" style="width:500px">
  <img class="card-img-top" src="avatar.png" alt="Imagen de tarjeta">
  <div class="card-img-overlay">
    <h4 class="card-title">Bill Gates</h4>
    <p class="card-text">Algunos textos de ejemplo. Algunos textos de ejemplo.</p>
    <a href="#" class="btn btn-primary">Ver perfil personal</a>
  </div>
</div>

Prueba personalmente