<!DOCTYPE html>
<html lang="es">
<head>
<title>Bootstrap 2</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Soy un jumbotron</h1>
<p>Soy una caja enorme que está preparada para llamar la atención de la gente que visita nuestra página web.</p>
</div>
<div class="row">
<div class="col-4">
<a href="#">
<figure>
<img src="fotos/perros1.jpg" class="img-thumbnail" alt="Perros">
<figcaption>
<h2 class="h5 font-weight-bold font-italic">Peluquería</h2>
<p class="text-small text-muted font-italic">Vaya pelos, necesito ir a la peluquería, ¿me llevas?</p>
</figcaption>
</figure>
</a>
</div>
<div class="col-4">
<a href="#">
<figure>
<img src="fotos/perros2.jpg" class="rounded-circle img-thumbnail" alt="Perros">
<figcaption class="card-img-bottom">
<h2 class="h5 font-weight-bold font-italic">Tengo sed</h2>
<p class="text-small text-muted font-italic">¿Podrías darme un poco de agua?</p>
</figcaption>
</figure>
</a>
</div>
<div class="col-4">
<a href="#">
<figure>
<img src="fotos/perros3.jpg" class="img-thumbnail" alt="Perros">
<figcaption>
<h2 class="h5 font-weight-bold font-italic">Ewok</h2>
<p class="text-small text-muted font-italic">Soy un ewok y debería estar en una película de ficción.</p>
</figcaption>
</figure>
</a>
</div>
</div>
<div class="row">
<div class="col-3 text-center">
<a class="btn btn-primary">btn-primary en un enlace</a>
</div>
<div class="col-3 text-center">
<a class="btn btn-success">btn-success en un enlace</a>
</div>
<div class="col-3 text-center">
<a class="btn btn-warning">btn-warning en un enlace</a>
</div>
<div class="col-3 text-center">
<a class="btn btn-danger">btn-danger en un enlace</a>
</div>
</div>
</div>
</body>
</html>
<html lang="es">
<head>
<title>Bootstrap 2</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Soy un jumbotron</h1>
<p>Soy una caja enorme que está preparada para llamar la atención de la gente que visita nuestra página web.</p>
</div>
<div class="row">
<div class="col-4">
<a href="#">
<figure>
<img src="fotos/perros1.jpg" class="img-thumbnail" alt="Perros">
<figcaption>
<h2 class="h5 font-weight-bold font-italic">Peluquería</h2>
<p class="text-small text-muted font-italic">Vaya pelos, necesito ir a la peluquería, ¿me llevas?</p>
</figcaption>
</figure>
</a>
</div>
<div class="col-4">
<a href="#">
<figure>
<img src="fotos/perros2.jpg" class="rounded-circle img-thumbnail" alt="Perros">
<figcaption class="card-img-bottom">
<h2 class="h5 font-weight-bold font-italic">Tengo sed</h2>
<p class="text-small text-muted font-italic">¿Podrías darme un poco de agua?</p>
</figcaption>
</figure>
</a>
</div>
<div class="col-4">
<a href="#">
<figure>
<img src="fotos/perros3.jpg" class="img-thumbnail" alt="Perros">
<figcaption>
<h2 class="h5 font-weight-bold font-italic">Ewok</h2>
<p class="text-small text-muted font-italic">Soy un ewok y debería estar en una película de ficción.</p>
</figcaption>
</figure>
</a>
</div>
</div>
<div class="row">
<div class="col-3 text-center">
<a class="btn btn-primary">btn-primary en un enlace</a>
</div>
<div class="col-3 text-center">
<a class="btn btn-success">btn-success en un enlace</a>
</div>
<div class="col-3 text-center">
<a class="btn btn-warning">btn-warning en un enlace</a>
</div>
<div class="col-3 text-center">
<a class="btn btn-danger">btn-danger en un enlace</a>
</div>
</div>
</div>
</body>
</html>