52 - Componente : card (grupo de tarjetas)

Bootstrap 4 permite agrupar un conjunto de tarjetas las cuales se verán con anchos y alturas iguales.

Para resolver esto anidamos todas las tarjetas en un div que defina la clase "card-group".

Veamos una página que tiene tres tarjetas agrupadas:

<!doctype html>
<html>
<head>
  <title>Prueba de Bootstrap 5</title> 
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
</head>
<body>

  <div class="container">   
    <div class="card-group mt-3">

      <div class="card text-center border-info">
        <div class="card-body">
          <h4 class="card-title">Titulo de la tarjeta 1</h4>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lectus sem, 
                                tempor vitae mattis malesuada, ornare sed erat. Pellentesque nulla dui, congue
                                nec tortor sit amet, maximus mattis dui. </p>
          <a href="#" class="btn btn-primary">Entrar</a>
        </div>
      </div>          

      <div class="card text-center border-info">
        <div class="card-body">
          <h4 class="card-title">Titulo de la tarjeta 2</h4>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lectus sem, 
                                tempor vitae mattis malesuada, ornare sed erat. Pellentesque nulla dui, congue
                                nec tortor sit amet, maximus mattis dui. </p>
          <a href="#" class="btn btn-primary">Entrar</a>
        </div>
      </div>          
  
      <div class="card text-center border-info">
        <div class="card-body">
          <h4 class="card-title">Titulo de la tarjeta 3</h4>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lectus sem, 
                                tempor vitae mattis malesuada, ornare sed erat. Pellentesque nulla dui, congue
                                nec tortor sit amet, maximus mattis dui. </p>
          <a href="#" class="btn btn-primary">Entrar</a>
        </div>
      </div>          

    </div>
  </div> 
      
</body>
</html>

En el navegador tenemos como resultado:

bootstrap 5 card card-group

En la línea siguiente definimos la clase card-group:

    <div class="card-group mt-3">

Recordar que la clase "mt-3" define un margen en la parte superior de 3rem ([m]argen [t]op)

Ejecutar Ejemplo

Retornar