Descargar e instalar Bootstrap 5

Bootstrap 5 se puede descargar e instalar de formas diferentes. En esta sección veremos los dos métodos más utilizados: utilizando su CDN y descargando el código en local. En la página web oficial de Bootstrap (getbootstrap.com) se pueden ver todas las formas de distribución.

Contenidos del artículo

5. Descargar e instalar Bootstrap 5

En los dos métodos que vamos a ver de instalación de Bootstrap vamos a usar los archivos minificados (contienen la palabra «min» en su nombre, por ejemplo bootstrap.min.css). Si quisiéramos explorar el código de los archivos es interesante pegarle un vistazo a los que están sin minificar (no contienen la palabra min en su nombre, por ejemplo bootstrap.css).

Archivos sin minificar: Estos archivos contienen el código fuente completo y legible de Bootstrap, con comentarios y espacios en blanco. Son útiles para el desarrollo y la personalización, ya que facilitan la lectura y el entendimiento del código. Sin embargo, estos archivos pueden tener un tamaño más grande, lo que puede afectar el rendimiento del sitio web al cargarlos en el navegador.

Archivos minificados: Estos archivos han sido comprimidos y optimizados para reducir su tamaño. Se eliminan todos los comentarios y espacios en blanco innecesarios, lo que resulta en un archivo más pequeño y ligero. Esto mejora la velocidad de carga del sitio web, ya que se transfiere menos cantidad de datos al navegador del usuario. Los archivos minificados son ideales para el despliegue en un sitio web en producción, ya que ayudan a reducir el tiempo de carga y mejorar la experiencia del usuario.

En los dos tipos de instalación de Bootstrap que vamos a ver necesitaremos añadir en nuestro código HTML un archivo CSS con todos los estilos de Bootstrap (bootstrap.min.css), el script de JavaScript de la librería Popper para tooltips y popovers (popper.min.js) y el script de los plugins de Bootstrap (bootstrap.min.css). Estos dos últimos scripts también se pueden encontrar juntos en un mismo archivo (bootstrap.bundle.min.js).

Si aún no estás familiarizado con los nombres de los elementos presentes en una interfaz web, no te pierdas el artículo de componentes de una interfaz web en el que se estudian detenidamente.

5.1. Utilizando CDN

La forma más sencilla de utilizar Bootstrap es utilizando una red de distribución de contenidos o CDN (Content Delivery Network). El único inconveniente es que se necesita internet para que funcione correctamente.

Para descargar e instalar Bootstrap 5 utilizando un CDN, agrega el siguiente enlace en la sección <head> de tu archivo HTML:

<!-- Enlace al archivo CSS de Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

Añade también los siguientes enlaces antes de la etiqueta de cierre </body>:

<!-- Enlace a los archivos JavaScript de Bootstrap 5 por separado, popper debe ir primero (popper.js y bootstrap.min.js) -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>

También puedes elegir añadir un solo archivo JavaScript que incluya los dos scripts anteriores:

<!-- Enlace a los archivos JavaScript de Bootstrap 5 y Popper en un solo archivo (bootstrap.bundle.min.js) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

Al utilizar el CDN, los archivos CSS y JavaScript de Bootstrap 5 se cargarán desde el servidor del CDN, lo que ofrece ventajas como una descarga más rápida.

Ejemplo de código utilizando CDN listo para usar (necesita internet):

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5. Necesita Internet</title>
   <!-- Enlace al archivo CSS de Bootstrap 5 -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
    <button class="btn btn-primary">dolor atmet</button>
    <!-- Enlace a los archivos JavaScript de Bootstrap 5 y Popper en un solo archivo (bootstrap.bundle.min.js) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Ejemplo en CodePen

5.2. Descargando el código

Este segundo método es uno de los más utilizados y consiste en la descarga completa del código. De esta forma podemos implementar nuestras páginas de forma local sin necesidad de utilizar internet.

Pasos para descargar e instalar Bootstrap 5:

Ve al sitio web oficial: getbootstrap.com/docs/5.0/getting-started/download/
Busca el botón de descarga o el enlace para obtener Bootstrap 5. Debes encontrar una opción que te permita descargar el archivo ZIP con los recursos de Bootstrap. A día de hoy se puede descargar desde el botón «download» de la sección «Compiled CSS and JS«.
Haz clic en el botón de descarga y se descargará un archivo ZIP en tu computadora.
Descomprime el archivo ZIP descargado. Dentro encontrarás varias carpetas y archivos, incluye las carpetas «css» y «js» en tu proyecto.
Ahora, para utilizar Bootstrap en tu proyecto web, simplemente debes enlazar los archivos CSS y JavaScript de Bootstrap en tus páginas HTML.

Por ejemplo, puedes añadir el siguiente código en la sección <head> de tu página HTML para enlazar los estilos CSS de Bootstrap:

<link href="css/bootstrap.min.css" rel="stylesheet">

Y para enlazar los archivos JavaScript, puedes añadir lo siguiente justo antes de cerrar la etiqueta </body>:

<script src="js/bootstrap.bundle.min.js"></script>

También puede añadir los scripts de Popper y los plugins de JavaScript de Bootstrap por separado. Poniendo siempre en primer lugar la librería Popper que se puede descargar de su página oficial.

Recuerda ajustar las rutas según el lugar donde hayas guardado los archivos de Bootstrap en tu proyecto.

Ejemplo de código descargando los ficheros Bootstrap:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 en local</title>
     <!-- Enlace al archivo CSS de Bootstrap 5 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
    <button class="btn btn-primary">dolor atmet</button>
    <!-- Enlace a los archivos JavaScript de Bootstrap 5 y Popper en un solo archivo (bootstrap.bundle.min.js) -->
    <script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>

En la siguiente sección del tutorial estudiaremos los contenedores, filas y columnas en Bootstrap 5.