Skip to content

Primeros pasos con Bootstrap

Bootstrap es un popular framework de diseño web, que pone a nuestra disposición una serie de herramientas que facilitan la creación y diseño de sitios web de forma responsive. En esencia, lo que nos va a proporcionar es un conjunto de estilos CSS que podremos incorporar en nuestras páginas a través de distintos selectores de clase predefinidos, y una serie de componentes listos para utilizarse, tales como barras de navegación, menús desplegables, alertas... Además, se incorporan ciertos plugins JavaScript para añadir funcionalidades adicionales, como por ejemplo las ventanas modales o los carruseles de imágenes. Esta es su web oficial.

1. Descarga y/o instalación

Bootstrap puede utilizarse tanto descargando el framework desde su web como enlazándolo directamente desde algún repositorio online. Veremos a continuación estas modalidades de uso.

1.1. Descargar Bootstrap

Si queremos descargar Bootstrap, podemos hacerlo desde su web oficial, a través de la documentación (Docs), en el apartado de Download. Por ejemplo, aquí tenemos las descargas para la versión 5.3.

Se ofrecen dos opciones de descarga:

  • La versión ya compilada y optimizada para usar (recomendable si no tenemos pensado editar los estilos de Bootstrap)
  • El código fuente sin optimizar, en el caso de que queramos editar algún elemento

Una vez descargado el archivo comprimido, veremos dentro varios archivos y carpetas, divididos en dos grandes bloques:

  • css: con los diferentes archivos CSS de estilos que podemos utilizar
  • js: con los distintos archivos JavaScript necesarios para algunas funcionalidades

En nuestro caso, basta con que copiemos estas dos carpetas en nuestra web (o bien en la carpeta inicial, o bien en alguna subcarpeta como bootstrap, por ejemplo). Después, simplemente tenemos que enlazar con el archivo bootstrap.min.css de la subcarpeta css. Por ejemplo:

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Ejemplo Bootstrap</title>
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    </head>
    ...

Opcionalmente (aunque suele ser habitual) podemos enlazar también con el archivo JavaScript, para cargar las funcionalidades añadidas. Esto puede hacerse de varias formas:

  • Utilizar el fichero boostrap.bundle.min.js que contiene toda la funcionalidad de Bootstrap junto con la de otra librería JavaScript llamada Popper, que se utiliza para ciertas funcionalidades como menús desplegables, textos popover, barras de navegación con desplegables y alguna que otra cosa más.
  • Utilizar el fichero boostrap.min.js, que sólo contiene la funcionalidad de Bootstrap (ocupa menos espacio). Adicionalmente se podría incluir el fichero de Popper si se requiere, o no usarlo y ahorrar memoria.

Ambos ficheros pueden incluirse al final del cuerpo de la página, o también al inicio usando el parámetro defer en la carga del script. Aquí vemos algunos ejemplos:

  • Carga del paquete completo al inicio del HTML:
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Ejemplo Bootstrap</title>
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
        <script defer src="bootstrap/js/bootstrap.bundle.js"></script>
    </head>
    ...
  • Carga de Bootstrap al final del cuerpo:
        ...
        <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>

1.2. Enlazar con Bootstrap desde una fuente externa

Alternativamente, podemos no descargar Bootstrap y enlazar con alguna versión oficial en Internet. En este caso, los enlaces al CSS y al JavaScript pueden quedar como sigue (modificando la URL en función de la versión de Bootstrap que queramos usar), tal y como puede verse en la documentación oficial.

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Ejemplo Bootstrap</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" 
         integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" 
         rel="stylesheet" crossorigin="anonymous">
    </head>
    <body>
        ...
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js" 
        integrity="sha384-7qAoOXltbVP82dhxHAUje59V5r2YsVfBafyUDxEdApLPmcdhBPg1DKg1ERo0BZlK" 
        crossorigin="anonymous"></script>
    </body>
</html>

Nota

La librería Popper puede incorporarse también de forma remota, si se necesita, con una URL como esta (dependiendo de la versión que queramos utilizar):

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>

1.3. Instalación de Bootstrap en proyectos

En el caso de que estemos utilizando alguna herramienta de gestión de proyectos web, como por ejemplo Vite o Node.js, debemos instalar Bootstrap con el gestor de paquetes NPM dentro del proyecto. Adicionalmente también se puede incorporar Popper si se va a necesitar:

npm i bootstrap @popperjs/core

Esto creará las carpetas necesarias en node_modules y luego podemos enlazarlo desde nuestro main.js:

import '/node_modules/bootstrap/dist/css/bootstrap.min.css';
import './style.css';
import '/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js';

2. Uso de Bootstrap junto con estilos propios

Tras el paso anterior, ya podríamos ver que el contenido de nuestra página tiene un aspecto diferente al que tiene por defecto en un navegador, gracias a los estilos de Bootstrap. Por ejemplo, se habrá cambiado el tipo de fuente por defecto. Sin embargo, en ocasiones puede que nos interese modificar ese estilo predefinido, y aportar algo propio: colores de fondo, bordes a algunos componentes, etc. En este caso, podemos incluir nuestra propia hoja de estilos CSS, que deberá ubicarse siempre después de haber incorporado los estilos de Bootstrap, para evitar problemas si hubiera algún conflicto con algún estilo:

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Ejemplo Bootstrap</title>
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="css/estilos.css">
    </head>
    ...

Nota

En el ejemplo anterior, se asume que todo el contenido de Bootstrap está en una subcarpeta bootstrap de nuestro proyecto, y los estilos propios están en una carpeta css, externa a Bootstrap.

Nota

En el caso de usar algún gestor como Vite, recuerda que nuestro CSS se incluye aparte desde el fichero JavaScript, con lo que no tendríamos que añadir esta nueva línea, sino editar directamente los estilos.

3. Herramientas adicionales

Podemos utilizar alguna herramienta adicional para facilitarnos el trabajo con Bootstrap, como por ejemplo la extensión Bootstrap IntelliSense de Visual Studio Code, que podéis consultar aquí.

Esta extensión ofrece algunas funcionalidades interesantes, como por ejemplo:

  • Auto-completado de clases CSS de Bootstrap
  • Vista previa del CSS que se aplica al pasar el ratón sobre el selector de clase
  • Selección de múltiples versiones de Bootstrap
  • ...

Ejercicio 1

Crea una página llamada bootstrap_prueba.html, y enlaza con Bootstrap desde su repositorio remoto. Define un encabezado h1 que diga "Prueba de Bootstrap". Configura los estilos propios para que el texto de ese encabezado se muestre en color violeta. Comprueba que todo se muestra correctamente.

Ejercicio 2

Adapta el ejercicio anterior a un proyecto Vite llamado bootstrap_prueba_vite. Instala Bootstrap y define la página de inicio como la del ejercicio anterior. Configura igualmente los estilos propios para dar el mismo color al encabezado. Empaqueta y comprueba que funciona correctamente.