Bootstrap 4: Introduccion a las Cards o Tarjetas

Las cards o tarjetas en Bootstrap 4 son un nuevo componente que ayuda a mostrar contenido de una mejor manera. Tambien complementa y sustituye otros componentes de la version 3.

Descargar Bootstrap 4

Antes que nada debemos descargar los archivos css y js de Bootstrap 4 para ello, vamos a la pagina http://getbootstrap.com y en la sección de descargas seleccionamos la opcion “compiled css y js”

Una vez descargado, descomprimimos y copiamos los archivos a una carpeta donde trabajaremos con esos archivos.

En este tutorial solo usaremos el archivo bootstrap.min.css, por lo que mas adelante explicaremos el tema del js.

Plantilla Inicial


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>.: Bootstrap 4 :.</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

<!--  Insertar codigo aqui -->

</body>
</html>

En esta plantilla se puede ver los elementos basicos de una pagina web e incluimos el archivo bootstrap.min.css

Contenedor, Filas y Columnas

Seria lo mismo que, container, rows y cols.

En el apartado “Insertar codigo aqui ” debemos agregar el contenido de nuestra pagina o ejemplo, vamos a empezar agregando una fila con 3 columnas, tal como vemos a continuacion:


<div class="container">

<div class="row">

<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>

</div>

</div>

Como se puede ver el manejo de contenedores, filas y columnas es igual en bootstrap 3 y 4.

El código de las tarjetas las vamos a insertar dentro de una columna.

Anatomía de las Tarjetas

Tal y como les comentaba las tarjetas son un componente nuevo y agregan nuevo funcionamiento y también sustituyen a los paneles.

Y a continuación el codigo de la tarjeta mas básica.


<div class="card">
<img class="card-img-top" src="imagen.jpg" alt="Mi Imagen">
<div class="card-body">
<h4 class="card-title">Titulo de la tarjeta</h4>
<p class="card-text">Texto de ejemplo</p>
<a href="#" class="btn btn-primary">Ir a ...</a>
</div>
</div>

Para este ejemplo sencillo, se incluye una imagen, un titulo, texto y un boton.

Tu puedes personalizar como quieras, puedes quitar por ejemplo, la imagen y el boton y obtener otro resultado.

Codigo completo

Este es el código completo:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>.: Bootstrap 4 :.</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
<br><br><br>
<div class="container">

<div class="row">

<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="02-reino-unido.jpg" alt="Mi Imagen">
<div class="card-body">
<h4 class="card-title">Titulo de la tarjeta</h4>
<p class="card-text">Texto de ejemplo</p>
<a href="#" class="btn btn-primary">Ir a ...</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="03-india.jpg" alt="Mi Imagen">
<div class="card-body">
<h4 class="card-title">Titulo de la tarjeta</h4>
<p class="card-text">Texto de ejemplo</p>
<a href="#" class="btn btn-primary">Ir a ...</a>
</div>
</div> </div>
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="04-china.jpg" alt="Mi Imagen">
<div class="card-body">
<h4 class="card-title">Titulo de la tarjeta</h4>
<p class="card-text">Texto de ejemplo</p>
<a href="#" class="btn btn-primary">Ir a ...</a>
</div>
</div> </div>

</div>

</div>

</body>
</html>

Resultado

Este es el resultado con mis imagenes, ustedes agreguen las suyas.

No olviden suscribirse a mi blog.

Leave a Comment

Your email address will not be published. Required fields are marked *