Profesora: Ester Torres
Usabilidad-Responsive-Bootstrap
Curso de Bootstrap 5
¿Qué es Bootstrap?
Bootstrap es un framework el framework CSS más popular utilizado para desarrollar
aplicaciones web.
Nos permite realizar una página web responsive de manera muy rápida y eficiente. Para
ello, utilizaremos las normas, atajos y componentes que nos da Bootstrap.
Utilizar la metodología de trabajo que nos da Bootstra es habitualmente una solución
más rápida y eficar que desarrollar nuestra propia metodología.
Bootstrap tiene una aproximación mobile-first al desarrollo de páginas web. Por tanto,
primero desarrollaremos nuestra aplicación pensando en un dispositivo móvil y luego
haremos las versiones para dispositivos más grandes, como tabletas y ordenadores de
sobremesa.
En los cursos de maquetación web que he impartido presencialmente he llegado a la conclusión
de que a los alumnos les suele resultar más sencilla maquetar una web con Bootstrap que
utilizando únicamente código CSS sin utilizar un framework.
Principales diferencias entre Bootstrap 4 y Bootstrap 5
Para mi gusto, estas son las principales diferencias entre Bootstrap 4 y 5.
E-mail: ester@ciberesfera.es
www.ciberesfera.es
Profesora: Ester Torres
Usabilidad-Responsive-Bootstrap
Bootstrap
Bootstrap 5
4
jQuery Necesita jQuery Ya no necesita jQuery. Ahora utiliza Vanila JS.
Tiene 5 niveles (xs,
Columnas Tiene 6 niveles (xs, sm, md, lg, xl, xxl)
sm, md, lg, xl)
Internet Se eliminan los códigos de compatibilidad y por tanto la
Es compatible
Explorer librería es más ligera.
Los cargamos
Vienen incluídos de serie en el framework y se puede usar
mediante una
Iconos de manera similar a como lo hacíamos con font-
librería externa
awesome https://icons.getbootstrap.com/.
(font-awesome)
No hay grandes difrencias entre Bootstrap 4 y 5. Es posible que si tienes un sitio web
con Bootstrap 4 y sustituyes la hoja de estilos y el Javascript por el de Bootstrap 5, todo
siga funcionando correctamente.
Instalación de Bootstrap
1. Vamos a https://getbootstrap.com/ → Get Started
2. Cargamos la hoja de estilos en el <head>:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
3. Cargamos el Javascript justo antes del cierre del </body>:
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
E-mail: ester@ciberesfera.es
www.ciberesfera.es
Profesora: Ester Torres
Usabilidad-Responsive-Bootstrap
Copia este ejemplo de instalación de Bootstrap:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1, shrink-to-fit=no">
<meta name="robots" content="noindex, follow">
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstr
ap.min.css" rel="stylesheet">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap
.bundle.min.js"></script>
</body>
E-mail: ester@ciberesfera.es
www.ciberesfera.es
Profesora: Ester Torres
Usabilidad-Responsive-Bootstrap
Grid de Bootstrap
Sirven para estructurar, a nivel de diseño, la información.
Deben estar dentro de un container. Existen containers de dos tipos:
<div class="container bg-primary text-light">
Contenedor de ancho fijo
</div>
<div class="container-fluid bg-primary text-light">
Contenedor ancho fluído
</div>
Inmediatamente dentro del container debemos incluir filas, es decir, div’s con el
class row. Cada fila tiene como máximo (a no ser que lo modifiquemos), 12 posiciones.
En el siguiente ejemplo tenemos una fila con tres columnas, por tanto, cada columna
ocupará 4 posiciones
<div class="container bg-primary text-light">
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
</div>
Si no especificamos el tamaño de las columnas, por defecto su tamaño se repartirá equitativamente entre
las columnas.
E-mail: ester@ciberesfera.es
www.ciberesfera.es
Profesora: Ester Torres
Usabilidad-Responsive-Bootstrap
En el siguiente ejemplo asignamos un tamaño a las columnas:
<div class="row">
<div class="col-3">1</div>
<div class="col-9">2</div>
</div>
Sitio descarga Bootstrap https://getbootstrap.com/
E-mail: ester@ciberesfera.es
www.ciberesfera.es
Profesora: Ester Torres
Usabilidad-Responsive-Bootstrap
Si las columnas no caben, Bootstrap la pasará para abajo:
<div class="row">
<div class="col-3">1</div>
<div class="col-10">2</div>
</div>
Ejemplo:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1, shrink-to-fit=no">
<meta name="robots" content="noindex, follow">
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstr
ap.min.css" rel="stylesheet">
<title>Hello, world!</title>
<style>
.row * {
border: 4px solid black
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-3">1</div>
<div class="col-10">2</div>
</div>
</div>
</body>
</html>
E-mail: ester@ciberesfera.es
www.ciberesfera.es
Profesora: Ester Torres
Usabilidad-Responsive-Bootstrap
Cambiar el tamaño de las columnas en función del tamaño de la pantalla:
<div class="row">
<div class="col-12 col-md-3">1</div>
<div class="col-12 col-md-9">2</div>
</div>
Breakpoints de la rejilla de Bootstrap 5:
Nombre Prefix Size
Extra Small .col (sin interfijo) <576px
Small (teléfonos en formato landscape) .col-sm ≥576px
Medium (tablets) .col-md ≥768px
Large (ordenadores de sobremesa) .col-lg ≥992px
Extra Large (ordenadores de sobremesa con pantalla grande) .col-xl ≥1200px
Extra extra large (ordenadores de sobremesa con pantalla más grande) .col-xxl ≥1400px
E-mail: ester@ciberesfera.es
www.ciberesfera.es
Profesora: Ester Torres
Usabilidad-Responsive-Bootstrap
Ejercicio: rejilla bootstrap en función de la pantalla
Tamaño extra small
Tamaño mediano
Tamaño grande
La fila de abajo son diez posiciones. Para lograr que cada columna tenga el tamaño
correcto lo que haremos es no especificar el tamaño de las columnas inferiores
(utilizando el class col-lg) y de esta forma las columnas se repartirán equitativamente su
tamaño.
Offset en Bootstrap
Ejemplo:
E-mail: ester@ciberesfera.es
www.ciberesfera.es
Profesora: Ester Torres
Usabilidad-Responsive-Bootstrap
<div class="col-md-8 offset-md-2">1</div>
Ejercicio: offset
Tamaño extra small
Tamaño grande
Reordenación de columnes
Sin interfijo de tamaño:
<div class="row">
<div class="col order-3">
Columna 1
</div>
<div class="col order-2">
Columna 2
</div>
<div class="col order-1">
Columna 3
</div>
</div>
Con interfijo de tamaño:
<div class="row">
<div class="col order-md-3">
Columna 1
E-mail: ester@ciberesfera.es
www.ciberesfera.es
Profesora: Ester Torres
Usabilidad-Responsive-Bootstrap
</div>
<div class="col order-md-2">
Columna 2
</div>
<div class="col order-md-1">
Columna 3
</div>
</div>
E-mail: ester@ciberesfera.es
www.ciberesfera.es
Profesora: Ester Torres
Usabilidad-Responsive-Bootstrap
Utils
Display
<span class="d-none d-lg-block">Visible en grande</span>
<span class="d-block d-lg-none">Oculto en grande</span>
<span class="d-none d-sm-block">Oculto en pequeño</span>
<span class="d-block d-sm-none">Visible en pequeño</span>
Posibles valores:
none | inline | inline-block | block | table | table-cell | table-row | flex | inline-flex
Alinear componentes horizontalmente
Para ello aplicaremos los siguientes class aplicados en la row:
Justify-content-start:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1, shrink-to-fit=no">
<meta name="robots" content="noindex, follow">
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstr
ap.min.css" rel="stylesheet">
<title>Hello, world!</title>
<style>
.row * {
border: 4px solid black
}
</style>
</head>
<body>
<br>
<div class="container">
<div class="row justify-content-start">
<div class="col-2">1</div>
<div class="col-2">2</div>
</div>
</div>
</body>
</html>
E-mail: ester@ciberesfera.es
www.ciberesfera.es
Profesora: Ester Torres
Usabilidad-Responsive-Bootstrap
Justify-content-center
<doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1, shrink-to-fit=no">
<meta name="robots" content="noindex, follow">
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstr
ap.min.css" rel="stylesheet">
<title>Hello, world!</title>
<style>
.row * {
border: 4px solid black
}
</style>
</head>
<body>
<br>
<div class="container">
<div class="row justify-content-center">
<div class="col-2">1</div>
<div class="col-2">2</div>
</div>
</div>
</body>
</html>
E-mail: ester@ciberesfera.es
www.ciberesfera.es
Profesora: Ester Torres
Usabilidad-Responsive-Bootstrap
Justify- Content-end
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1, shrink-to-fit=no">
<meta name="robots" content="noindex, follow">
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstr
ap.min.css" rel="stylesheet">
<title>Hello, world!</title>
<style>
.row * {
border: 4px solid black
}
</style>
</head>
<body>
<br>
<div class="container">
<div class="row justify-content-end">
<div class="col-2">1</div>
<div class="col-2">2</div>
</div>
</div>
</body>
</html>
E-mail: ester@ciberesfera.es
www.ciberesfera.es
Profesora: Ester Torres
Usabilidad-Responsive-Bootstrap
Justify-content-between
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1, shrink-to-fit=no">
<meta name="robots" content="noindex, follow">
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstr
ap.min.css" rel="stylesheet">
<title>Hello, world!</title>
<style>
.row * {
border: 4px solid black
}
</style>
</head>
<body>
<br>
<div class="container">
<div class="row justify-content-between">
<div class="col-2">1</div>
<div class="col-2">2</div>
</div>
</div>
</body>
</html>
E-mail: ester@ciberesfera.es
www.ciberesfera.es
Profesora: Ester Torres
Usabilidad-Responsive-Bootstrap
Alinear componentes verticalmente
Para ello usaremos los siguientes class aplicados en la row:
Aling-items-start:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1, shrink-to-fit=no">
<meta name="robots" content="noindex, follow">
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstr
ap.min.css" rel="stylesheet">
<title>Hello, world!</title>
<style>
.row * {
border: 4px solid black
}
.row {
border: 4px solid blue
}
</style>
</head>
<body>
<br>
<div class="container">
<div class="row align-items-start">
<div class="col-2">1</div>
<div class="col-2">Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Iste, asperiores nihil dolorum a, nam
quos dolor necessitatibus temporibus sapiente aut alias,
dicta officia. Aut voluptatem cumque quisquam,
molestiae, ipsam laboriosam.</div>
</div>
</div>
</body>
</html>
E-mail: ester@ciberesfera.es
www.ciberesfera.es
Profesora: Ester Torres
Usabilidad-Responsive-Bootstrap
Align-items-center:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1, shrink-to-fit=no">
<meta name="robots" content="noindex, follow">
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstr
ap.min.css" rel="stylesheet">
<title>Hello, world!</title>
<style>
.row * {
border: 4px solid black
}
.row {
border: 4px solid blue
}
</style>
</head>
<body>
<br>
<div class="container">
<div class="row align-items-center">
<div class="col-2">1</div>
<div class="col-2">Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Iste, asperiores nihil dolorum a, nam
quos dolor necessitatibus temporibus sapiente aut alias,
dicta officia. Aut voluptatem cumque quisquam,
molestiae, ipsam laboriosam.</div>
</div>
</div>
</body>
</html>
E-mail: ester@ciberesfera.es
www.ciberesfera.es
Profesora: Ester Torres
Usabilidad-Responsive-Bootstrap
Align-items-end
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1, shrink-to-fit=no">
<meta name="robots" content="noindex, follow">
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstr
ap.min.css" rel="stylesheet">
<title>Hello, world!</title>
<style>
.row * {
border: 4px solid black
}
.row {
border: 4px solid blue
}
</style>
</head>
<body>
<br>
<div class="container">
<div class="row align-items-end">
<div class="col-2">1</div>
<div class="col-2">Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Iste, asperiores nihil dolorum a, nam
quos dolor necessitatibus temporibus sapiente aut alias,
dicta officia. Aut voluptatem cumque quisquam,
molestiae, ipsam laboriosam.</div>
</div>
</div>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstr
ap.min.css" rel="stylesheet">
</body>
</html>
E-mail: ester@ciberesfera.es
www.ciberesfera.es
Profesora: Ester Torres
Usabilidad-Responsive-Bootstrap
Margins y Padings
Podemos usar los siguientes class:
<div class="mt-0 me-1 mb-2 ms-3 pt-0 pe-1 pb-2 ps-3"></div>
mt: margin-top
me: margin-right (end)
mb: margin-bottom
ms: margin-left (start)
pt: padding-top
pe: padding-right (end)
pb: padding-bottom
ps: padding-left (start)
E-mail: ester@ciberesfera.es
www.ciberesfera.es
Profesora: Ester Torres
Usabilidad-Responsive-Bootstrap
El número indica la magnitud del margen o el padding.
CTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="robots" content="noindex, follow">
<title>Margin y Padding</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstr
ap.min.css" rel="stylesheet">
<style>
.col-4 {
border: 1px solid black
}
</style>
</head>
<body>
<p>La fila tiene padding</p>
<div class="container">
<div class="row pt-1 pe-2 pb-3 ps-4 bg-primary text-
white">
<div class="col-4">Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Dolor consequuntur hic neque,
facere temporibus vitae eos ex modi. Iste
optio nemo dolorum mollitia, distinctio aliquam odio dolores
laudantium culpa vel.</div>
<div class="col-4">
<div class="mt-1 me-2 mb-3 ms-4 bg-secondary
text-white">Este contenido tiene margin</div>
</div>
<div class="col-4">Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Vero mollitia tempore repellat
dolor dolores consequatur, officiis quisquam
odit nostrum, eligendi error ex recusandae. Consequuntur
provident numquam dolore explicabo quis
saepe.</div>
</div>
</div>
</body>
</html>
E-mail: ester@ciberesfera.es
www.ciberesfera.es
Profesora: Ester Torres
Usabilidad-Responsive-Bootstrap
Text
text-align
<p class="text-start">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">Right aligned text on all viewport sizes.</p>
<p class="text-sm-start">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-start">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-start">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-start">Left aligned text on viewports sized XL (extra-large) or wider.</p>
Estilo de texto
fw-bold → negrita
fw-light
fw-lighter
fst-italic → cursiva
border
<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
border border-0 border border-top-0
Con color
<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
E-mail: ester@ciberesfera.es
www.ciberesfera.es
Profesora: Ester Torres
Usabilidad-Responsive-Bootstrap
<span class="border border-dark"></span>
<span class="border border-white"></span>
border-radius
<span class="rounded-sm"></span>
<span class="rounded"></span>
<span class="rounded-lg"></span>
<span class="rounded-top"></span>
<span class="rounded-right"></span>
<span class="rounded-bottom"></span>
<span class="rounded-left"></span>
<span class="rounded-circle"></span>
<span class="rounded-0"></span>
width
w-25 | w-50 | w-75 | w-100
<div class="w-25 bg-warning">Width 25%</div> → width: 25%
<div class="mw-100 bg-warning">Max Width 100%</div> → max-width: 100%
<div class="min-vw-100">Min-width 100vw</div> → min-width: 100vw
Colores
bg-primary | bg-success | bg-info | bg-warning | bg-danger | bg-secondary | bg-dark | bg-light
E-mail: ester@ciberesfera.es
www.ciberesfera.es
Profesora: Ester Torres
Usabilidad-Responsive-Bootstrap
Formularios
form-control
Añadimos el class form-control a los inputs, selects y textareas, para mejorar su estilo.
ctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1, shrink-to-fit=no">
<meta name="robots" content="noindex, follow">
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstr
ap.min.css" rel="stylesheet">
<title>Hello, world!</title>
<style>
.col {
border: 4px solid black
}
</style>
</head>
<body>
<div class="container">
<h2>Con form-control</h2>
<div class="row">
<div class="col">
<input class="form-control" type="text" />
</div>
<div class="col">
<textarea class="form-control"></textarea>
</div>
<div class="col">
<select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<h2>Sin form-control</h2>
<div class="row">
<div class="col">
<input type="text" />
</div>
<div class="col">
<textarea></textarea>
</div>
E-mail: ester@ciberesfera.es
www.ciberesfera.es
Profesora: Ester Torres
Usabilidad-Responsive-Bootstrap
<div class="col">
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
</div>
</body>
</html>
form-row
Una form-row es como una row, pero más cortita y con menos padding.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1, shrink-to-fit=no">
<meta name="robots" content="noindex, follow">
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstr
ap.min.css" rel="stylesheet">
<title>Hello, world!</title>
<style>
.col {
border: 4px solid black
}
</style>
</head>
<body>
<div class="container">
<div class="form-row">
<div class="col"><input class="form-control" type="text"
placeholder="col dentro de una form-row" /></div>
<div class="col"><input class="form-control" type="text"
placeholder="col dentro de una form-row" /></div>
</div>
<div class="row">
<div class="col"><input class="form-control" type="text"
placeholder="col dentro de una row" /></div>
<div class="col"><input class="form-control" type="text"
placeholder="col dentro de una row" /></div>
</div>
</div>
</body>
</html>
E-mail: ester@ciberesfera.es
www.ciberesfera.es
Profesora: Ester Torres
Usabilidad-Responsive-Bootstrap
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1, shrink-to-fit=no">
<meta name="robots" content="noindex, follow">
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstr
ap.min.css" rel="stylesheet">
<title>Hello, world!</title>
<style>
.col {
border: 4px solid black
}
</style>
</head>
<body>
<div class="container">
<div class="form-row">
<div class="col"><input class="form-control" type="text"
placeholder="col dentro de una form-row" /></div>
<div class="col"><input class="form-control" type="text"
placeholder="col dentro de una form-row" /></div>
</div>
<div class="row">
<div class="col"><input class="form-control" type="text"
placeholder="col dentro de una row" /></div>
<div class="col"><input class="form-control" type="text"
placeholder="col dentro de una row" /></div>
</div>
</div>
</body>
</html>
E-mail: ester@ciberesfera.es
www.ciberesfera.es
Profesora: Ester Torres
Usabilidad-Responsive-Bootstrap
Componentes en Bootstrap
Aunque vamos a ver los componentes más habituales, puedes consultar en la documentación
oficial todos los componentes.
Carousel de imágenes
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0"
class="active"
aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"
aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://place-hold.it/600x300" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://place-hold.it/600x300" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
E-mail: ester@ciberesfera.es
www.ciberesfera.es
Profesora: Ester Torres
Usabilidad-Responsive-Bootstrap
</div>
<div class="carousel-item">
<img src="https://place-hold.it/600x300" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-
target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-
target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
E-mail: ester@ciberesfera.es
www.ciberesfera.es
Profesora: Ester Torres
Usabilidad-Responsive-Bootstrap
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1, shrink-to-fit=no">
<meta name="robots" content="noindex, follow">
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstr
ap.min.css" rel="stylesheet">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<div id="carouselExampleCaptions" class="carousel slide"
data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-
target="#carouselExampleCaptions" data-bs-slide-to="0"
class="active"
aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-
target="#carouselExampleCaptions" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-
target="#carouselExampleCaptions" data-bs-slide-to="2"
aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://place-hold.it/600x300" class="d-
block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the
first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://place-hold.it/600x300" class="d-
block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the
second slide.</p>
E-mail: ester@ciberesfera.es
www.ciberesfera.es
Profesora: Ester Torres
Usabilidad-Responsive-Bootstrap
</div>
</div>
<div class="carousel-item">
<img src="https://place-hold.it/600x300" class="d-
block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the
third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-
bs-target="#carouselExampleCaptions"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-
hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-
bs-target="#carouselExampleCaptions"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-
hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap
.bundle.min.js"></script>
</body>
</html>
Ejercicio carousel
Hacer un carousel con las siguientes características:
Dos diapositivas
Un caption en la segunda diapositiva
Sin indicadores de progreso
form-row
Una form-row es como una row, pero más cortita y con menos padding
E-mail: ester@ciberesfera.es
www.ciberesfera.es
