¿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.

Bootstrap es tan guay, que esta misma página lo utiliza. Este site está hecho con WordPress, pero he modificado la plantilla para que utilice Bootstrap y ha resultado ser una gran decisión; me ha simplificado mucho la tarea de hacer mi página responsive.

Principales diferencias entre Bootstrap 4 y Bootstrap 5

Para mi gusto, estas son las principales diferencias entre Bootstrap 4 y 5.

	Bootstrap 4	Bootstrap 5
jQuery	Necesita jQuery	Ya no necesita jQuery. Ahora utiliza Vanila JS.
Columnas	Tiene 5 niveles (xs, sm, md, lg, xl)	Tiene 6 niveles (xs, sm, md, lg, xl, xxl)
Internet Explorer	Es compatible	Se eliminan los códigos de compatibilidad y por tanto la librería es más ligera.
Iconos	Los cargamos mediante una librería externa (font-awesome)	Vienen incluídos de serie en el framework y se puede usar de manera similar a como lo hacíamos con font-awesome https://icons.getbootstrap.com/.

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>

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 fluido
</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.

Usando col sin interfijo

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.

Ejercicio rejilla Bootstrap

Realizar una página web con la siguiente estructura utilizando Bootstrap.

Ejercicio pasar a Bootstrap

Partiendo del siguiente código HTML de una página web, hacer las modificaciones necesarias para tener una página Bootstrap de cuatro columnas:

<img src="https://pablomonteserin.com/lorem/250x250" alt="imagen aleatoria">
<h3>Lorem ipsum dolor sit.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit suscipit cupiditate soluta dolores temporibus odio
    incidunt fuga maiores alias ab, tempora quasi id ratione consequuntur aspernatur numquam minima ex ut.</p>
<img src="https://pablomonteserin.com/lorem/250x250" alt="imagen aleatoria">
<h3>Lorem ipsum dolor sit.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit suscipit cupiditate soluta dolores temporibus odio incidunt fuga maiores alias ab, tempora quasi id ratione consequuntur aspernatur numquam minima ex ut.</p>
<img src="https://pablomonteserin.com/lorem/250x250" alt="imagen aleatoria">
<h3>Lorem ipsum dolor sit.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit suscipit cupiditate soluta dolores temporibus odio incidunt fuga maiores alias ab, tempora quasi id ratione consequuntur aspernatur numquam minima ex ut.</p>
<img src="https://pablomonteserin.com/lorem/250x250" alt="imagen aleatoria">
<h3>Lorem ipsum dolor sit.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit suscipit cupiditate soluta dolores temporibus odio incidunt fuga maiores alias ab, tempora quasi id ratione consequuntur aspernatur numquam minima ex ut.</p>

Ejercicio propuesto

Ejercicio resuelto

Usando col con interfijo

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>

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>

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

Ejercicio: rejilla bootstrap en función del tamaño 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 estas forma las columnas se repartirán equitativamente su tamaño.

Offset en Bootstrap

Ejemplo:

<div class="col-md-8 offset-md-2">1</div>

Ejercicio: offset

Tamaño extra small

Tamaño grande

Reordenación de columnas

<div class="row">
   
    <div class="col order-md-3">
      Columna 1
    </div>
    
    <div class="col order-md-2">
      Columna 2
    </div>
    
    <div class="col order-md-1">
      Columna 3
    </div>
    
  </div>

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:


  <style>
	.container{
		text-align: ;
		overflow: ;
		background:pink;
	}
	.col{
		width:300px;
		display: ;
		float: ;
		vertical-align: ;

	}
</style>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum recusandae autem sapiente veritatis, perferendis ea fugiat, provident repellendus, vitae a iusto animi tenetur, rem tempore neque. Atque suscipit dolorem, ea!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates iure, a ad, voluptas beatae obcaecati dolorem asperiores libero nesciunt dignissimos.

Alinear componentes verticalmente

Para ello usaremos los siguientes class aplicados en la row:


  <div class="row ">
  <div class="col red">1111111111</div>
  <div class="col blue">222222222<br />222222222</div>
  <div class="col green">333333333<br />333333333<br />333333333</div>
  </div>

1111111111

222222222
222222222

333333333
333333333
333333333

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)

El número indica la magnitud del margen o el padding.

<p class="       ">hola</p>
<p class="       ">hola</p>

hola

adios

Text

text-align


  <p class="">hola</p>

hola

<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

border

<p class="">hola</p>

hola

border-radius

<img src="https://pablomonteserin.com/lorem/200x200" class="rounded-circle" />

width

<div class="bg-primary ">hola</p>

hola

Colores

<div class=" ">hola</p>

hola

Formularios

<div class="">hola</p>

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://pablomonteserin.com/lorem/900x150" 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://pablomonteserin.com/lorem/900x150" 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>
        </div>
        <div class="carousel-item">
            <img src="https://pablomonteserin.com/lorem/900x150" 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>

First slide label

Some representative placeholder content for the first slide.

Second slide label

Some representative placeholder content for the second slide.

Third slide label

Some representative placeholder content for the third slide.

Ejercicio carousel

Hacer un carousel con las siguientes características:

Dos diapositivas
Un caption en la segunda diapositiva
Sin indicadores de progreso

Menú responsive

<div class="code-container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>
</div>

Acordeón

<div class="accordion accordion-flush" id="accordionFlushExample">
    <div class="accordion-item">
        <h2 class="accordion-header" id="flush-headingOne">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                Accordion Item #1
            </button>
        </h2>
        <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne"
            data-bs-parent="#accordionFlushExample">
            <div class="accordion-body"><strong>Contenido 1</strong>
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header" id="flush-headingTwo">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
                Accordion Item #2
            </button>
        </h2>
        <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo"
            data-bs-parent="#accordionFlushExample">
            <div class="accordion-body"><strong>Contenido 2</strong>
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header" id="flush-headingThree">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
                Accordion Item #3
            </button>
        </h2>
        <div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree"
            data-bs-parent="#accordionFlushExample">
            <div class="accordion-body"><strong>Contenido 3</strong>
            </div>
        </div>
    </div>
</div>

Contenido 1

Contenido 2

Contenido 3

Tabs

<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item" role="presentation">
        <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home"
            aria-selected="true">Home</a>
    </li>
    <li class="nav-item" role="presentation">
        <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile"
            aria-selected="false">Profile</a>
    </li>
    <li class="nav-item" role="presentation">
        <a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab" aria-controls="contact"
            aria-selected="false">Contact</a>
    </li>
</ul>
<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Tab 1 content</div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Tab 2 Content</div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Tab 3 content</div>
</div>

Tab 1 content

Tab 2 Content

Tab 3 content

Modal

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Iconos

Bootstrap 5 no viene con un pack de iconos instalados por defecto. Sin embargo, sí que existe una colección de iconos, específicos de Bootstrap 5 que pueden ser añadidos de manera independiente. Para ello, tenemos varias opciones.

Añadir la siguiente CDN a la ya existente de Bootstrap:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">

Instalar las fuentes usando node:

npm i bootstrap-icons

<link rel="stylesheet" href="./node_modules//bootstrap-icons/font/bootstrap-icons.css">

Ejercicio landing

En este ejercicio utilizaremos:

Usaremos la plantilla Quartz. Para hacer más oscura la navigation bar usaremos el class bg-primary (en lugar de bg-light) y para que el texto aparezca con letras blancas, el class navbar-dark (en lugar de navbar-light). Para que en el menú de navagación el logo y los enlaces se vayan cada uno a un extremo, usaremos ms-auto en lugar de me-auto en la lista.
Un carousel
Un formulario
Navigation bar
List Group
Cards
Botones
Cuadro modal

Descargar Recursos

Accede a tu cuenta

¿Qué es Bootstrap?

Principales diferencias entre Bootstrap 4 y Bootstrap 5

Instalación de Bootstrap

Grid de Bootstrap

Usando col sin interfijo

Ejercicio rejilla Bootstrap

Ejercicio pasar a Bootstrap

Usando col con interfijo

Cambiar el tamaño de las columnas en función del tamaño de la pantalla

Ejercicio: rejilla bootstrap en función del tamaño de la pantalla

Offset en Bootstrap

Ejercicio: offset

Reordenación de columnas

Utils

Display

Alinear componentes horizontalmente

Alinear componentes verticalmente

Margins y Padings

Text

text-align

Estilo de texto

border

border-radius

width

Colores

Formularios

Componentes en Bootstrap

Carousel de imágenes

First slide label

Second slide label

Third slide label

Ejercicio carousel

Menú responsive

Acordeón

Accordion Item #1

Accordion Item #2

Accordion Item #3

Tabs Copy

Modal

Iconos

Ejercicio landing

Footer

Tabs