TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo crear tarjetas Bootstrap 5?

1

Bootstrap 4 introdujo un nuevo componente llamado tarjetas. Los componentes como paneles, miniaturas y pozos en Bootstrap 3 se eliminaron y se crearon como un solo componente llamado tarjetas en Bootstrap 4. Las tarjetas son elementos compatibles con dispositivos móviles y se volvieron más populares con el uso en Google Material Design. En este tutorial, analicemos cómo crear varias tarjetas en tiempo real utilizando la última versión de Bootstrap 5.

Puede descargar los ejemplos utilizados en este tutorial aquí.

Tutorial de Bootstrap 5 Cards

Este tutorial cubre los siguientes capítulos:

  1. ¿Qué es el componente de la tarjeta?
  2. Tarjeta básica Bootstrap 5
  3. Dimensionamiento de tarjetas
  4. Tarjeta con subtítulos y enlaces
  5. Alineando texto
  6. Agregar encabezado y pie de página
  7. Usar pestañas de navegación
  8. Imagen en la parte inferior de la tarjeta
  9. Tarjeta con superposición de imágenes
  10. Tarjeta invertida o negra
  11. Tarjetas con colores de fondo
  12. Tarjetas de esquema
  13. Diseños de tarjetas

1 ¿Qué son las tarjetas en Bootstrap?

Las tarjetas son un contenedor fluido que contiene encabezado, pie de página y contenido. La parte de contenido puede tener diferentes tipos de elementos como título, descripción, imagen, botones, etc. Con la combinación y combinación de diferentes elementos, hay muchas posibilidades para crear diferentes tipos de tarjetas. Cubrimos tarjetas con aspecto básico y más atractivo.

2 cartas básicas

El componente básico de la tarjeta tendrá una imagen, título, descripción y un botón. Esta es la forma más genérica de usar tarjetas en blogs y diseños de diseño de página.

¿Cómo crear tarjetas Bootstrap 5?

El fragmento de código para crear la tarjeta básica se proporciona a continuación con la plantilla de inicio completa :

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 5 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 5 CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <!-- Basic Card with Image, Title and Description --> <div class="card" style="width:20rem;"> <img class="card-img-top img-fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="card image"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is basic card with image on top, title, description and button.</p> <a href="#" class="btn btn-primary">Button</a> </div> </div> <!-- Bootstrap 5 Scripts --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> </body> </html>

Idealmente, no hay necesidad de scripts para tarjetas siempre que solo se utilicen elementos simples dentro del bloque de tarjetas. Como habrás notado, hay muchas clases de CSS que se utilizan para crear una tarjeta.

  • La tarjeta debe identificarse con la clase ".card" envuelta con un

    etiqueta.

  • La imagen es un elemento opcional en la tarjeta. Para incluir la imagen en la parte superior, debe agregar una clase ".card-img-top". Se agrega la clase adicional “.img-fluid" para garantizar que la imagen responda y se ajuste al ancho del contenedor.

  • La tarjeta puede tener varios bloques de tarjetas envueltos dentro de un

    etiqueta con una clase CSS ".card-body". Cada bloque de tarjeta contiene el contenido de ese bloque como título, descripción, etc.

  • En nuestro ejemplo usamos

    encabezado para el título con la clase ".card-title". Después del título tenemos una breve descripción usando

    etiqueta con la clase ".card- text". Finalmente tenemos un botón identificado con la clase de botón Bootstrap normal .

Recuerda que la “.card” y el “.card-body” son suficientes para tener una tarjeta con cualquier tipo de contenido dentro del bloque.

3 Dimensionamiento del componente de la tarjeta

El componente de la tarjeta por defecto es fluido y se extiende a todo el ancho del contenedor. En el ejemplo de tarjeta básica anterior, hemos utilizado “style =” width: 20rem; “” para limitar el ancho a 20rem. Puede utilizar diferentes formas de restringir el ancho.

  • Usando estilo en línea como en el ejemplo anterior.
  • Usando diseño de cuadrícula.
  • Uso de clases de servicios públicos para ajustar el ancho y el alto.

En todos nuestros ejemplos, usaremos el estilo en línea para hacer que la tarjeta tenga un ancho específico.

4 tarjetas con subtítulos y enlaces

Comencemos modificando la tarjeta básica para que tenga un subtítulo y enlaces en lugar de un botón. El subtítulo se puede agregar usando la clase ".card-subtitle" y se debe agregar el margen inferior para crear el espacio requerido entre el título y el subtítulo. Los enlaces se crean utilizando etiquetas de anclaje HTML estándar .

<div class="card" style="width:20rem;"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6> <p class="card-text">This card has no image but has subtitle and two links instead of button.</p> <a href="#" class="card-link">Link 1</a> <a href="#" class="card-link">Link 2</a> </div> </div>

Esto debería producir el siguiente resultado en el navegador:

¿Cómo crear tarjetas Bootstrap 5?

5 Tarjeta con alineación de texto

Por defecto, los elementos de la tarjeta están alineados a la izquierda, lo que se puede cambiar a la derecha y al centro usando las clases “.text-right” y “.text-center” respectivamente a la clase “.card-block”.

<!-- Card with Center Text Alignment --> <div class="card" style="width:20rem;"> <div class="card-body text-center"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card with center text alignment.</p> <a href="#" class="btn btn-primary">Button</a> </div> </div> <!-- Card with Right Text Alignment --> <div class="card" style="width:20rem;"> <div class="card-body text-right"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card with right text alignment.</p> <a href="#" class="btn btn-primary">Button</a> </div> </div>

El resultado final se verá a continuación:

¿Cómo crear tarjetas Bootstrap 5?

El elemento de imagen se elimina en el ejemplo de tarjeta anterior para mostrar la alineación del texto.

6 Agregar encabezado y pie de página

¿Qué hay de agregar encabezado y pie de página a la tarjeta de manera similar al componente del panel en Bootstrap 3? Sí, puede agregar encabezado y pie de página usando las clases ".card-header" y ".card-footer" como se muestra a continuación:

<div class="card" style="width:20rem;"> <div class="card-header"> This is a Header </div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card component with header and footer.</p> <a href="#" class="btn btn-primary">Button</a> </div> <div class="card-footer"> This is a Footer </div> </div>

Recuerde agregar clases de encabezado o pie de página para separar

etiquetas antes y después de la sección ".card-block". La salida de la tarjeta con encabezado y pie de página se muestra a continuación:

¿Cómo crear tarjetas Bootstrap 5?

7 Uso de las pestañas de navegación en la tarjeta

La parte del encabezado de la tarjeta puede usar el componente de navegación predeterminado para convertir la tarjeta como una pestaña horizontal como la que se muestra a continuación.

¿Cómo crear tarjetas Bootstrap 5?

El código de la tarjeta con navegación se proporciona a continuación:

<div class="card text-center"> <div class="card-header"> <ul class="nav nav-tabs card-header-tabs"> <li class="nav-item" style="list-style-type: none;"> <a class="nav-link active" href="#">Tab1</a> </li> <li class="nav-item" style="list-style-type: none;"> <a class="nav-link" href="#">Tab2</a> </li> <li class="nav-item" style="list-style-type: none;"> <a class="nav-link disabled" href="#">Tab3</a> </li> </ul> </div> <div class="card-body"> <h4 class="card-title">This is a title for tab 1</h4> <p class="card-text">This card uses navigation with default navigation components.</p> <a href="#" class="btn btn-primary">Button</a> </div> </div>

8 Imagen en la parte inferior

La tarjeta predeterminada tendrá la imagen en la parte superior de la tarjeta como se muestra en el ejemplo de tarjeta básica. Puede mover la imagen hacia abajo a la tarjeta usando ".card-img-bottom" y mover el

<div class="card" style="width:20rem;"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is Bootstrap 5 card with image aligned bottom of the card component.</p> <p class="card-text"><small class="text-muted">Enter some text here...</small></p> </div> <img class="card-img-bottom" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card Image Down"> </div>

La tarjeta con la imagen hacia abajo se verá a continuación:

¿Cómo crear tarjetas Bootstrap 5?

9 Tarjeta con superposición de imágenes

En lugar de tener la imagen hacia arriba o hacia abajo, puede agregar todos los elementos de texto en la parte superior de la imagen como una superposición como a continuación:

¿Cómo crear tarjetas Bootstrap 5?

<div class="card bg-dark text-white" style="width:20rem;"> <img class="card-img" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image"> <div class="card-img-overlay"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a short description to explain what this card is about.</p> <p class="card-text"><small class="text-muted">Enter some text here...</small></p> </div> </div>

La clase ".card-img-overlay" se utiliza en

etiqueta que cubre todos los elementos de texto para superponerlos en la imagen. Aquí hemos utilizado ".card-inverse" para convertir el texto a color claro como hemos utilizado la imagen de fondo oscuro. Puede leer más sobre la tarjeta invertida en el siguiente ejemplo.

10 Tarjeta invertida o negra

Por defecto, los elementos de texto de una tarjeta utilizan colores oscuros asumiendo que el color de fondo es de color claro (generalmente blanco). El color del texto se puede invertir fácilmente en un color claro usando la clase ".text-white". Recuerde que esto solo invertirá los colores del texto y debe declarar el fondo manualmente a un color oscuro usando la clase ".bg-dark" para asegurar la legibilidad.

A continuación se muestra el código para la tarjeta invertida con color de fondo negro declarado con estilo en línea.

<div class="card bg-dark text-white mb-3" style="background-color: #333;"> <div class="card-body"> <h3 class="card-title">Special title treatment</h3> <p class="card-text">This is a card with inverse color and background is set as black.</p> <a href="#" class="btn btn-primary">Go somehwere</a> </div> </div>

La tarjeta invertida debería verse a continuación:

¿Cómo crear tarjetas Bootstrap 5?

11 tarjetas con diferentes colores de fondo

Mirar las cartas con fondo blanco será aburrido. Utilice cualquiera de las clases de utilidad de fondo para agregar un fondo colorido al componente de la tarjeta. Puede cambiar a uno de los colores de fondo como primario, secundario, correcto, claro, oscuro, advertencia, información o peligro. A continuación se muestra la tarjeta con encabezado y diferentes colores de fondo.

<div class="card text-white bg-primary mb-3"> <div class="card-header">Primary</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with primary color background.</p> </div> </div> <div class="card text-white bg-secondary mb-3"> <div class="card-header">Secondary</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with secondary color background.</p> </div> </div> <div class="card text-white bg-success mb-3"> <div class="card-header">Success</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with green color background.</p> </div> </div> <div class="card text-white bg-info mb-3"> <div class="card-header">Info</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with blue color background.</p> </div> </div> <div class="card text-white bg-warning mb-3 text-center"> <div class="card-header">Warning</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with yellow color background and aligned center.</p> </div> </div> <div class="card text-white bg-danger mb-3 text-center"> <div class="card-header">Danger</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with red color background and aligned center.</p> </div> </div> <div class="card bg-light mb-3 text-center"> <div class="card-header">Light</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with light color background and aligned center.</p> </div> </div> <div class="card text-white bg-dark mb-3 text-center"> <div class="card-header">Dark</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with dark color background and aligned center.</p> </div> </div>

Recuerde incluir la clase ".text-white" ya que todos estos fondos son de color más oscuro, lo que necesita que el texto sea de un color más claro.

Las tarjetas con diferentes colores de fondo se muestran a continuación:

¿Cómo crear tarjetas Bootstrap 5?

12 tarjetas de esquema

Las tarjetas de contorno tendrán un fondo blanco liso con diferentes colores de borde usando ".card-outline-primary", ". Card-outline-secundaria", ". Card-outline-success", ". Card-outline-info", " Clases .card-outline-warning “y” .card-outline-danger “.

<div class="card border-primary mb-3 text-center"> <div class="card-header">Primary Border</div> <div class="card-body text-primary"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with primary color background.</p> </div> </div> <div class="card border-secondary mb-3 text-center"> <div class="card-header">Secondary Border</div> <div class="card-body text-secondary"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with primary color background.</p> </div> </div> <div class="card border-light mb-3 text-center"> <div class="card-header">Light Border</div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with primary color background.</p> </div> </div> <div class="card border-dark mb-3 text-center"> <div class="card-header">Dark Border</div> <div class="card-body text-dark"> <p>This is a card text paragraph with secondary color background without title.</p> <footer>Quote by <cite title="Source Title">Someone said</cite></footer> </div> </div> <div class="card border-success mb-3 text-center"> <div class="card-header">Success Border</div> <div class="card-body text-success"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with green color background.</p> </div> </div> <div class="card border-info mb-3 text-center"> <div class="card-header">Info Border</div> <div class="card-body text-info"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with blue color background.</p> </div> </div> <div class="card border-warning mb-3 text-center"> <div class="card-header">Warning Border</div> <div class="card-body text-warning"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with yellow color background.</p> </div> </div> <div class="card border-danger text-center"> <div class="card-header">Danger Border</div> <div class="card-body text-danger"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card text paragraph with red color background.</p> </div> </div>

Las tarjetas de esquema se verán a continuación:

¿Cómo crear tarjetas Bootstrap 5?

13 diseños de tarjetas Bootstrap 5

Todos los ejemplos anteriores tratan sobre la creación de tarjetas como un solo componente. Bootstrap también ofrece tres clases para crear diseños de tarjetas que son más adecuados para diseños de blogs.

  • tarjeta-grupo
  • Baraja de carta
  • columnas de cartas

Discutiremos estas clases de diseño de tarjetas en nuestro próximo tutorial.


Aprenda Bootstrap 5 (índice )


Fuente de grabación: webnots.com

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More