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.

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 4Bootstrap 5
jQueryNecesita jQueryYa no necesita jQuery. Ahora utiliza Vanila JS.
ColumnasTiene 5 niveles (xs, sm, md, lg, xl)Tiene 6 niveles (xs, sm, md, lg, xl, xxl)
Internet ExplorerEs compatibleSe eliminan los códigos de compatibilidad y por tanto la librería es más ligera.
IconosLos 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>
Ver código fuente

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 bootstrap 4
Ver código fuente

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://via.placeholder.com/250/250" 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://via.placeholder.com/250/250" 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://via.placeholder.com/250/250" 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://via.placeholder.com/250/250" 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>

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>
Curso de Bootstrap 5 1

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:

NombrePrefixSize
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 de la pantalla

Tamaño extra small

Bootstrap 4, grid para pantalla pequeña

Tamaño mediano

Bootstrap 4, grid para pantalla mediana

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.

Bootstrap 4, grid para pantalla grande
Ver código fuente

Offset en Bootstrap

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

Ejercicio: offset

Tamaño extra small

Bootstrap 4 offset extra small

Tamaño grande

Bootstrap 4 offset medium
Ver código fuente

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

Alinear componentes verticalmente

Para ello usaremos los siguientes class aplicados en la row:

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.

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

Formularios

form-control

Añadimos el class form-control a los inputs, selects y textareas, para mejorar su estilo.

form-row

Una form-row es como una row, pero más cortita y con menos padding

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

Ejercicio carousel

Hacer un carousel con las siguientes características:

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

Menú responsive

<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>
Ver código fuente

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>

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>

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 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
  • Badges
  • List Group
  • Cards
  • Botones
  • Cuadro modal