Componentes principales¶

En esta página vamos a dar un repaso a algunos de los componentes predefinidos de Bootstrap que podemos añadir en nuestras páginas.

1. Características comunes¶

Todos los componentes que podemos emplear en Bootstrap comparten una serie de características comunes que podemos aplicarles. Vamos a explicarlas a continuación para que entendamos mejor qué son cuando las utilicemos en los siguientes apartados.

1.1. Colores¶

Bootstrap ofrece un catálogo determinado de colores predefinidos para utilizar en los distintos componentes (barras de navegación, botones, alertas, etc). Aquí tenéis un listado oficial, donde podemos identificar distintas palabras clave para seleccionar el color en sí, como primary, warning, etc. En base a esa palabra clave, se aplicará al componente concreto en su selector de clase.

Por ejemplo, para definir una alerta de tipo warning haríamos algo así:

<div class="alert alert-warning">Faltan datos por completar</div>

Del mismo modo, podemos aplicar estos modificadores a colores de texto (text-primary) o de fondo (bg-warning). Además, existen ciertos selectores que ajustan un color en base a otro. Por ejemplo, text-bg-primary pone el color de fondo primario (azul) y ajusta el color de texto a blanco automáticamente.

1.2. Otras utilities¶

Las utilities de Bootstrap nos permiten definir estilos en los diferentes elementos de la página sin necesidad de crear CSS externos ni definir clases propias. Ya hemos visto en documentos anteriores algunos ejemplos de ello, con los selectores p y m para padding y margen, respectivamente. También tenemos otros disponibles, que se pueden combinar de distintas formas:

border permite definir distintos tipos de bordes, según cómo lo combinemos. Por ejemplo, border-primary define un borde de color primario (azul), o border-1 define un borde fino.
rounded define bordes redondeados, a distintos niveles. Por ejemplo, rounded-1 es un redondeado suave, y rounded-3 más grande.
shadow aplica sombras. Por ejemplo, shadow-sm define una sombra pequeña y shadow-lg una más grande.
d se utiliza para la visibilidad (display), y admite los típicos valores de CSS: d-none (oculto), d-block (elemento de bloque), d-flex (Flexbox)... También podemos combinarlo con otros modificadores, como por ejemplo d-lg-none para ocultar el elemento en pantallas de tamaño lg o superior.
overflow define las características de desbordamiento, de forma similar a la misma propiedad CSS. overflow-hidden, por ejemplo, oculta el contenido que rebase los límites del componente.
text define distintas propiedades del texto. Por ejemplo, text-start alinea el texto a la izquierda, text-end a la derecha, text-uppercase lo pasa a mayúsculas, etc.

Podéis consultar más información sobre estas utilities aquí

1.3. Clases base y modificadores¶

Cada componente que usaremos dispone de una clase base. Por ejemplo, las alertas se definen con la clase base alert, y las insignias con badge.

A partir de ahí, se pueden añadir modificadores para especificar ciertos aspectos, como colores, o tamaños. Por ejemplo, <div class="btn btn-lg"> define un botón de tamaño grande.

También podemos utilizar otras clases de utilidad (utilities). Así, <div class="alert p-2 rounded"> genera un div de tipo alerta, con padding de 2 y bordes redondeados.

1.4. Iconos Bootstrap¶

Existe una librería adicional de Bootstrap (que no se descarga con el paquete original) llamada Bootstrap icons, que pone a nuestra disposición una gran variedad de iconos con los que decorar y dar más vistosidad a nuestra web.

Esta librería se puede instalar en nuestro proyecto a través de NPM (npm i bootstrap-icons, en el caso de que utilicemos herramientas como Vite o NodeJS), o también se puede enlazar de forma externa vía CDN:

<!-- Enlace interno vía node_modules -->
<link rel="stylesheet" href="node_modules/bootstrap-icons/font/bootstrap-icons.min.css">

<!-- Enlace externo vía CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">

Una vez enlazada podemos hacer uso de los iconos que ofrece (podemos consultarlos en su web oficial. Por ejemplo, así utilizaríamos el icono de la campana (bell):

<i class="bi bi-bell fs-3"></i>

El valor numérico que se pone en fs indica el tamaño, desde 1 (más grande) hasta 5 (más pequeño).

2. Barras de navegación¶

Las barras de navegación son un componente importante en el diseño de cualquier página. Contienen un conjunto de enlaces que nos permiten visitar las páginas más relevantes del sitio. Bootstrap ofrece una amplia gama de selectores de clase que podemos utilizar para definir un estilo personalizado en nuestras barras. Podemos consultar toda la información disponible aquí.

Por ejemplo, así podemos definir una barra de navegación con tres apartados: Inicio, Noticias y Contacto. Dentro de Noticias definimos un dropdown menu (menú desplegable) con las diferentes categorías de noticias que podemos consultar.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Mi Web</a>
        <button class="navbar-toggler" type="button" 
            data-bs-toggle="collapse" data-bs-target="#navbarScroll" 
            aria-controls="navbarScroll" aria-expanded="false" 
            aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarScroll">
            <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" 
            style="--bs-scroll-height: 100px;">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" 
                    href="inicio.html">Inicio</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" 
                    id="navbarScrollingDropdown" role="button" 
                    data-bs-toggle="dropdown" aria-expanded="false">
                        Noticias
                    </a>
                    <ul class="dropdown-menu" 
                    aria-labelledby="navbarScrollingDropdown">
                        <li><a class="dropdown-item" 
                            href="economia.html">Economía</a></li>
                        <li><a class="dropdown-item" 
                            href="deportes.html">Deportes</a></li>
                        <li><a class="dropdown-item" 
                            href="sociedad.html">Sociedad</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link" aria-current="page" 
                    href="contacto.html">Contacto</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

El aspecto visual sería éste, ya que hemos elegido el tema dark:

Algunas cuestiones a considerar:

El selector navbar-expand-lg indica a partir de qué resolución se muestra el menú expandido (pantallas lg o superiores). Por debajo de ese tamaño el menú se colapsa en un botón
En navbar-brand podemos poner nuestro logo o nombre de empresa (Mi Web, en el ejemplo anterior)
navbar-toggler se usa para definir el botón de colapso, que se mostraría en pantallas medianas o pequeñas en el caso anterior, sustituyendo al elemento referenciado por el id navbarScroll. A su vez, ese apartado tiene clase collapse navbar-collapse para indicar que es colapsable.

Nota

Es IMPORTANTE tener en cuenta que, para que algunas funcionalidades como el dropdown funcionen, será necesario cargar el componente JavaScript de Bootstrap en la página, como se ha visto en los ejemplos anteriores.

2. Alertas e insignias¶

Dos componentes muy sencillos de utilizar son las alertas (alert) y las insignias (badges). Los primeros permiten mostrar mensajes con un color de fondo particular en ciertas partes de la web. Pueden resultar útiles para mostrar mensajes de error o de advertencia en algunos puntos. Por ejemplo, un error en un formulario:

<div class="alert alert-danger" role="alert">Error: el nombre no puede estar vacío</div>

que se vería de este modo:

En cuanto a las insignias o badges, permiten mostrar un pequeño texto resaltado en ciertas partes de la web. Podemos utilizarlo, por ejemplo, para indicar contenido nuevo:

<p>
    Ya a la venta nuestro nuevo curso de diseño web para principiantes
    <span class="badge text-bg-warning">Nuevo!</span>
</p>

Estos badges pueden resultar útiles, por ejemplo, para los típicos avisos de notificaciones pendientes:

<button type="button" class="btn btn-primary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
    <span class="visually-hidden">unread messages</span>
  </span>
</button>

Ejercicio 1

Crea una página llamada menu.html que incorpore los estilos y JavaScript de Bootstrap (de forma remota) y defina una barra de navegación como esta:

En pantallas inferiores a tamaño lg se colapsará el menú derecho a un botón, sin incluir el icono de notificaciones.

3. Tarjetas (cards)¶

Las tarjetas son contenedores flexibles de contenido. Permiten añadir un encabezado y un pie, y cierta variedad de contenido, que incluye imágenes y textos entre otras cosas.

La clase base para definir tarjetas es card y, a partir de ahí, en los elementos interiores podemos definir distintos tipos de subcomponentes, como card-img-top para una imagen en la parte superior, card-body para el cuerpo de la tarjeta, card-title para el título, card-text para el texto.

Aquí vemos un ejemplo de tarjeta con estos elementos:

<div class="card">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Podemos combinar este elemento con la rejilla de Bootstrap para definir una malla de tarjetas:

<div class="row">
  <div class="col-sm-6 mb-3 mb-sm-0">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

Podéis consultar más información sobre la definición de tarjetas en la documentación oficial

Ejercicio 2

Define una página Bootstrap que muestre información sobre distintos videojuegos en venta, cada uno en su tarjeta. Se mostrarán en 4 columnas en pantallas lg o superior, y en 1 columna en tamaños inferiores.

4. Carruseles¶

Los carruseles permiten mostrar una secuencia de diapositivas o imágenes, empleando un poco de JavaScript. En su funcionamiento básico, el contenedor principal se define con la clase base carousel, y dentro tendremos un sub-contenedor con las diapositivas (identificado con la clase carousel-inner), y cada diapositiva marcada como carousel-item. Además, la diapositiva actualmente mostrada se marca como active.

Adicionalmente podemos añadir otros elementos, como botones de navegación anterior y siguiente, o indicadores de números de diapositivas. Aquí vemos un ejemplo sencillo con 3 diapositivas y botones de anterior y siguiente:

<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" 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="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Algunas aclaraciones:

El selector de clase slide permite pasar de una diapositiva a otra con un efecto de animación
El selector active indica la diapositiva inicialmente visible al cargar la página
El atributo data-bs-ride="carousel" hace que las diapositivas pasen solas cada cierto tiempo

Nota

Nuevamente, para que las opciones dinámicas del carrusel funcionen, será necesario contar con el JavaScript de Bootstrap incluido en nuestra página.

Podéis consultar más opciones en la documentación oficial

Ejercicio 3

Crea una página Bootstrap que muestre un carrusel con imágenes de videojuegos. Puedes usar las mismas imágenes del ejercicio anterior.

5. Acordeones¶

Los acordeones son componentes verticalmente colapsables, que permiten mostrar/ocultar información a voluntad del usuario. Se definen sobre la clase base accordion. Cada elemento colapsable dentro del acordeón es un accordion-item, que a su vez puede contener un accordion-header (que se ve en todo momento) y un accordion-body que es la parte colapsable de cada item.

Aquí vemos un ejemplo concreto:

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the first item’s accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the second item’s accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        Accordion Item #3
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the third item’s accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
</div>

Como vemos, cada header apunta a un div identificado con un id, que es el que contiene el accordion-body que se colapsa. El selector de clase show indica cuál es el que aparece inicialmente visible (si hay alguno).

Podéis consultar más información y opciones en la documentación oficial.

Ejercicio 4

Crea una página Bootstrap donde uses un accordion para mostrar información de distintos lenguajes de programación:

Al desplegar cualquier lenguaje, aparecerá un logo del mismo con algún breve párrafo introductorio:

6. Modales¶

Las ventanas modales son una herramienta muy útil para mostrar al usuario información en forma de popup integrado en el diseño de Bootstrap. Puede ser un simple mensaje de alerta, o un formulario a rellenar para completar un paso. A la hora de definirlos, además de incluir el comportamiento JavaScript, tenemos que gestionar dos elementos:

El contenido modal que se mostrará
El botón o componente que activará ese contenido modal

Aquí vemos un ejemplo de panel modal:

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </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>

Este contenido podría activarse (mostrarse) al hacer clic en este botón de la página:

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

Como vemos, el botón enlaza con el target #exampleModal, que es el id que hemos asignado al panel modal anterior. Por otra parte, el selector modal-dialog hace que no se pueda volver al contenido de la página hasta que se cierre el panel modal.

A la hora de definir el panel modal podemos utilizar otros selectores de clase y modificadores de utilidad. Aquí vemos algunos ejemplos:

modal-dialog centered muestra el panel centrado en la ventana
modal-dialog-scrollable hace que se pueda hacer scroll en el panel si el contenido rebasa su tamaño
modal-lg, por ejemplo, define un panel modal de tamaño grande, en el caso de que queramos mostrar información que no quepa adecuadamente en paneles de inferior tamaño.

Así definiríamos un panel modal centrado en la ventana y con scroll:

<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
    ...

Podéis consultar más opciones en la documentación oficial

Ejercicio 5

Crea una página con Bootstrap que tenga un botón con el texto "Política de privacidad" (entre otros contenidos de prueba). Al pulsarlo se mostrará un diálogo modal centrado con un texto de política de privacidad similar a este:

7. Más componentes¶

Existe una amplia variedad de componentes ofrecidos por Bootstrap. Puedes consultar información sobre todos ellos en la documentación oficial.