Bootstrap 5.3: Cómo descargar e instalar el CSS y el Javascript

Una vez que comiences a usar Bootstrap, lo primero que debes hacer, es elegir cómo incluir Bootstrap en tu proyecto: O bien descargándolo, usándolo desde un CDN o integrándolo con gestores de paquetes como npm o yarn.

Estas son las opciones existentes para usar Bootstrap 5.3.6.

1. Descarga directa (CSS + JS ya listos para usar)

Ideal si quieres agregar Bootstrap a tu proyecto como archivos locales (sin depender de internet).

Descargalo aquí: bootstrap-5.3.6-dist.zip

¿Qué incluye esta versión de Bootstrap?

• bootstrap.min.css: los estilos comprimidos (listos para usar).
• bootstrap.bundle.min.js: JavaScript + Popper para cosas como tooltips, menús, modales.

Cómo usarlo en tu HTML:

<!-- Enlaza los archivos desde tu carpeta local -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.bundle.min.js"></script>

Esto sería así, asumiendo que tienes los archivos en carpetas locales css/ y js/.

2. Archivos fuente (source files)

Ideal si quieres personalizar Bootstrap usando Sass y compilar tu propia versión.

Descargalo aquí bootstrap-5.3.6-source.zip

¿Qué incluye este ZIP de Bootstrap?

• Archivos .scss para personalizar colores, tipografías, etc.
• Archivos JS sin compilar.
• Archivos de documentación.

¿Qué herramientas requiere este ZIP?

• Un compilador Sass
• Herramientas como Autoprefixer, Node.js, etc.

3. Usar nu CDN (sin descargar nada)

Ideal para pruebas rápidas o sitios pequeños, solamente necesitas conexión a internet.

<!-- CSS desde CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- JS (incluye Popper.js) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>

Ventajas del uso de un CDN:

• No necesitas descargar nada.
• Rápido de implementar.
• Usa versiones cacheadas (más rápido para usuarios).

4. Cómo usar Bootstrap con gestores de paquetes

npm co node.js

npm install bootstrap@5.3.6

Luego debes incluir en tu JS:

import 'bootstrap'; // o bien
require('bootstrap');

En tu SCSS:

@import "node_modules/bootstrap/scss/bootstrap";

yarn

yarn add bootstrap@5.3.6

Luego igual que con npm, usando import o @import.

Bun

bun add bootstrap@5.3.6

RubyGems (proyectos Ruby on Rails)

Agrega en tu Gemfile:

gem 'bootstrap', '~> 5.3.6'

Luego ejecuta:

bundle install

Composer (proyectos PHP)

composer require twbs/bootstrap:5.3.6

NuGet (proyectos .NET)

En PowerShell o consola de Visual Studio:

Install-Package bootstrap

Install-Package bootstrap.sass

5. Ejemplos oficiales

Desdde el siguiente enlace puedes descargar una colección de páginas de ejemplo que muestran Bootstrap en acción: bootstrap-5.3.6-examples.zip.

El archivo incluye los siguientes ejemplos con:

• Formularios
• Dashboards
• Landing pages
• Navbars
• Grids
• Cards

Sobre los hashes SRI y seguridad (opcional, para producción)

Los SRI hashes (Subresource Integrity) ayudan a verificar que el archivo cargado desde el CDN no fue alterado.

Ejemplo:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-XXXXX"
      crossorigin="anonymous">

Estos, no son obligatorios, pero se recomienda usarlos en producción.

Preguntas frecuentes de cómo descargar Bootstrap 5.3.6