ejemplos de tarjetas bootstrap 4

La guía paso a paso o código que verás en este post es la resolución más fácil y válida que hallamos a esta inquietud o dilema.

Ejemplo 1: arranque de tarjeta 4

<div class="card" style="width:400px"><img class="card-img-top" src="img_avatar1.png" alt="Card image" style="width:100%"><div class="card-body"><h4 class="card-title">John Doe</h4><p class="card-text">Some example text some example text. John Doe is an architect and engineer</p><a href="#"class="btn btn-primary">See Profile</a></div></div>

Ejemplo 2: tarjeta boostrap

<div class="card" style="width: 18rem;"><div class="card-body"><h5 class="card-title">Card title</h5><h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6><p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p><a href="#"class="card-link">Card link</a><a href="#"class="card-link">Another link</a></div></div>

Ejemplo 3: imagen de cambio de tarjeta de arranque

.card-img-top 
    width:100%;
    height:15vw;
    object-fit: cover;

Ejemplo 4: clase .card

<style>.card 
      border:1px solid #ccc;
      background-color: #f4f4f4;
      padding:20px;
      margin-bottom:10px;</style>

Ejemplo 5: arranque de tarjeta

<div class="card" style="width: 18rem;"><img class="card-img-top" src="..." alt="Card image cap"><div class="card-body"><h5 class="card-title">Card title</h5><p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p><a href="#"class="btn btn-primary">Go somewhere</a></div></div>

Ejemplo 6: encabezado de tarjeta adaptable

<div class="card" style="width: 18rem;"><div class="card-header">
    Featured
  </div><ul class="list-group list-group-flush"><li class="list-group-item">Cras justo odio</li><li class="list-group-item">Dapibus ac facilisis in</li><li class="list-group-item">Vestibulum at eros</li></ul></div>

Reseñas y puntuaciones

---

---

Utiliza Nuestro Buscador