Instalación de Bootstrap CSS

Básico
Bootstrap
Bootstrap
Actualizado: 27/05/2025

¡Desbloquea el curso completo!

IA
Ejercicios
Certificado
Entrar

Estructura de archivos en Bootstrap

Bootstrap está compuesto por una serie de archivos y directorios que contienen el código fuente necesario para su funcionamiento. Entender la estructura de archivos de Bootstrap es crucial para su correcta implementación y personalización en proyectos.

Directorio raíz

  • bootstrap/: Contiene todos los archivos de Bootstrap.

CSS

  • bootstrap.min.css: Este es el archivo CSS compilado y minificado. Incluye todos los estilos CSS necesarios para utilizar Bootstrap sin modificaciones adicionales.
  • bootstrap.css: La versión no minificada del archivo CSS. Útil para desarrollo y depuración.
  • bootstrap-grid.min.css: Archivo CSS que contiene únicamente el sistema de grillas de Bootstrap.
  • bootstrap-utilities.min.css: Archivo CSS que contiene únicamente las utilidades de Bootstrap.
  • bootstrap.rtl.min.css: Versión optimizada para idiomas de derecha a izquierda (RTL).

JS

  • bootstrap.bundle.min.js: Este es el archivo JavaScript que incluye todos los plugins de Bootstrap, así como una versión integrada de Popper.js. Es la opción más conveniente para la mayoría de proyectos.
  • bootstrap.bundle.js: La versión no minificada del archivo bundle de JavaScript.
  • bootstrap.min.js: Archivo JavaScript minificado, que requiere la inclusión externa de Popper.js para el funcionamiento completo de los tooltips, popovers y dropdowns.
  • bootstrap.js: La versión no minificada del archivo JavaScript.

Source files (Archivos fuente)

  • scss/: Contiene los archivos fuente Sass que se utilizan para generar el CSS de Bootstrap. Estos archivos permiten una personalización más granular de los componentes de Bootstrap, incluyendo variables, mixins y funciones.
  • js/src/: Contiene los archivos fuente JavaScript divididos por funcionalidad. Cada archivo corresponde a un componente específico de Bootstrap (modal.js, dropdown.js, etc.).

Map files

  • bootstrap.min.css.map: Archivo source map para el archivo CSS minificado. Ayuda en la depuración al mapear el código minificado a su forma original.
  • bootstrap.bundle.min.js.map: Archivo source map para el archivo JavaScript bundle minificado.
  • bootstrap.rtl.min.css.map: Source map para la versión RTL del CSS.

Entender la estructura de estos archivos permite a los desarrolladores integrar Bootstrap de forma más eficiente y personalizar sus componentes según las necesidades específicas del proyecto.

¿Te está gustando esta lección?

Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.

Progreso guardado
Asistente IA
Ejercicios
Iniciar sesión gratis

Más de 25.000 desarrolladores ya confían en CertiDevs

Instalación mediante CDN

Para instalar Bootstrap usando un CDN (Content Delivery Network), puedes aprovechar los archivos hospedados en servicios como jsDelivr. Esto te permite incluir las versiones compiladas de CSS y JS de Bootstrap en tu proyecto directamente desde la red sin necesidad de descargar los archivos localmente.

Puedes integrar Bootstrap añadiendo las siguientes líneas en el <head> y antes del cierre del </body> de tu archivo HTML:

<!-- Enlazar el CSS de Bootstrap desde jsDelivr CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT" crossorigin="anonymous">

<!-- Enlazar el JS de Bootstrap desde jsDelivr CDN -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-j1CDi7MgGQ12Z7Qab0qlWQ/Qqz24Gc6BM0thvEMVjHnfYGF0rmFCozFSxQBxwHKO" crossorigin="anonymous"></script>

Si prefieres incluir Popper.js por separado y el JavaScript sin el bundle, puedes hacer lo siguiente:

<!-- Incluir Popper.js primero -->
<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>

<!-- Incluir el JavaScript de Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>

También puedes optar por otras CDNs alternativas como cdnjs y unpkg. Puedes acceder a los archivos de Bootstrap en estas CDNs y obtener las URLs necesarias:

Es recomendable verificar que las "Subresource Integrity (SRI)" hashes sean las mismas que las esperadas para asegurar que los archivos no han sido modificados por terceros. Esto se puede hacer usando herramientas como SRI Hash Generator o utilizando OpenSSL desde la línea de comandos:

openssl dgst -sha384 -binary bootstrap.min.js | openssl base64 -A

Este procedimiento garantiza que estás incluyendo versiones seguras de Bootstrap en tu proyecto.

Instalación mediante NPM

Para instalar Bootstrap en aplicaciones de Node.js, puedes usar el gestor de paquetes NPM. Esto ofrece la ventaja de integrar los archivos fuente de Bootstrap directamente en tu proyecto, permitiendo una mayor personalización y control sobre la compilación de estilos y scripts.

Paso 1: Instalación

Para instalar Bootstrap, ejecuta el siguiente comando en tu terminal:

npm install bootstrap@5.3.6

Paso 2: Importación en el proyecto

Una vez que Bootstrap está instalado, puedes importarlo en tu proyecto JavaScript. Tienes dos opciones dependiendo de si prefieres require para CommonJS o import para módulos ECMAScript:

Usando require:

const bootstrap = require('bootstrap');

Usando import:

import bootstrap from 'bootstrap';

Esto cargará todos los plugins de Bootstrap en el objeto bootstrap.

Carga de plugins individuales

Si prefieres cargar los plugins de Bootstrap manualmente, puedes hacerlo importando los archivos JS individuales desde el directorio /js/dist/ del paquete de Bootstrap:

import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/dropdown';

Uso con Sass

Bootstrap también puede integrarse con un compilador Sass para una personalización más completa. La entrada principal de Sass se encuentra en el archivo especificado en el campo sass del package.json de Bootstrap:

@import "~bootstrap/scss/bootstrap";

Metadatos en package.json

Bootstrap proporciona metadatos adicionales en su archivo package.json que pueden ser útiles:

  • sass: Ruta al archivo fuente principal de Sass.
  • style: Ruta al archivo CSS no minificado que se ha compilado usando la configuración predeterminada.

Ejemplo de proyecto

Para facilitar el comienzo, Bootstrap ofrece un proyecto de inicio en GitHub que incluye ejemplos de configuración con un compilador de Sass, Autoprefixer, Stylelint, PurgeCSS, y Bootstrap Icons. Esta plantilla puede ayudarte a configurar tu proyecto de manera rápida y eficiente.

Instalación mediante descarga directa

Para instalar Bootstrap mediante descarga directa, sigue estos pasos:

Descargar Bootstrap: Primero, descarga la versión compilada de Bootstrap desde el repositorio oficial. La versión compilada incluye los archivos CSS y JS minificados, listos para su uso inmediato en proyectos.

  • Dirígete a la página de lanzamientos de Bootstrap en GitHub: Lanzamientos Bootstrap
  • Descarga el archivo denominado bootstrap-5.3.6-dist.zip.

Extraer los archivos: Una vez descargado el archivo ZIP, debes extraerlo. En la carpeta resultante encontrarás varios archivos y directorios importantes para trabajar con Bootstrap:

  • css/: Contiene los archivos CSS compilados, incluyendo bootstrap.min.css.
  • js/: Contiene los archivos JavaScript compilados, incluyendo bootstrap.bundle.min.js y bootstrap.min.js.

Incluir Bootstrap en tu proyecto: Para utilizar Bootstrap, necesitas enlazar los archivos CSS y JS en tus documentos HTML. Coloca los archivos .css y .js en tu directorio de proyecto, y luego enlázalos en tu HTML de la siguiente manera:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Proyecto Bootstrap</title>
    <!-- Enlazar el CSS de Bootstrap -->
    <link rel="stylesheet" href="ruta-a-tu-directorio/css/bootstrap.min.css">
</head>
<body>
    <h1>¡Hola, Bootstrap!</h1>

    <!-- Enlazar el JS de Bootstrap (incluye Popper.js) -->
    <script src="ruta-a-tu-directorio/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Organización de archivos: Es recomendable mantener una estructura de archivos ordenada en tu proyecto. Por ejemplo:

mi-proyecto/
├── css/
│   ├── bootstrap.min.css
│   └── bootstrap.min.css.map
├── js/
│   ├── bootstrap.bundle.min.js
│   └── bootstrap.bundle.min.js.map
├── assets/
│   └── (tus archivos personalizados)
└── index.html

Verificación de la instalación: 

Abre index.html en un navegador web para verificar que los estilos y scripts de Bootstrap se aplican correctamente. Puedes probar añadiendo un componente simple como un botón:

<button type="button" class="btn btn-primary">Botón Bootstrap</button>

Aprendizajes de esta lección

  • Comprender la estructura de archivos de Bootstrap.
  • Instalar Bootstrap utilizando CDN.
  • Instalar Bootstrap a través de NPM.
  • Integrar Bootstrap en proyectos mediante descarga directa.
  • Importar y utilizar los componentes y plugins de JavaScript de Bootstrap.
  • Aplicar y personalizar los estilos de Bootstrap con Sass.

Completa Bootstrap y certifícate

Únete a nuestra plataforma y accede a miles de tutoriales, ejercicios prácticos, proyectos reales y nuestro asistente de IA personalizado para acelerar tu aprendizaje.

Asistente IA

Resuelve dudas al instante

Ejercicios

Practica con proyectos reales

Certificados

Valida tus conocimientos

Comenzar gratis

Más de 25.000 desarrolladores ya se han certificado con CertiDevs

⭐⭐⭐⭐⭐
4.9/5 valoración