Diseño de Interfaz Web — 2026

Temas
Descargar versión en PDF

Bootstrap - Introducción

¿Qué es Bootstrap?

Uno de los frameworks responsivos más populares creado por Twitter. Es una librería de estilos CSS y JS que utilizan las técnicas más modernas para crear excelentes tipografías, forms, botones, tablas, grids, menú de navegación y todo lo que necesita en un peso ligero.

La finalidad de este framework es la de adaptar la interfaz del sitio web al tamaño del dispositivo en que se visualice, priorizando la versión móvil.

Lo descargamos en getbootstrap.com y allí encontramos toda la documentación.

Estructura de Archivos

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-grid.css
│   ├── bootstrap-grid.css.map
│   ├── bootstrap-grid.min.css
│   ├── bootstrap-grid.min.css.map
│   ├── bootstrap-reboot.css
│   ├── bootstrap-reboot.css.map
│   ├── bootstrap-reboot.min.css
│   └── bootstrap-reboot.min.css.map
└── js/
    ├── bootstrap.bundle.js
    ├── bootstrap.bundle.min.js
    ├── bootstrap.js
    └── bootstrap.min.js

Compilado vs Comprimido

Estos archivos sirven para utilizar Bootstrap en cualquier proyecto web.

Para cada archivo se ofrecen dos variantes:

  • Compilados (cuyo nombre es bootstrap.*)
  • Compilados + comprimidos (cuyo nombre es bootstrap.min.*)

Siempre es mejor utilizar la versión comprimida (bootstrap.min.*) en vez de la versión simplemente compilada (bootstrap.*).

Los contenidos de los dos archivos son exactamente los mismos, pero la versión comprimida ocupa muchísimo menos.

Preparando el Archivo HTML

<!doctype html>
<html lang="es">
<head>
  <!-- Requerido por Bootstrap -->
  <meta charset="UTF-8">
  <!-- Requerido para que las páginas se muestren correctamente 
       y el zoom funcione bien en los dispositivos móviles -->
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  
  <!-- CSS de Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
  
  <!-- CSS personalizado (opcional) -->
  <link href="estilos.css" rel="stylesheet" type="text/css">
  
  <title>Mi sitio con Bootstrap</title>
</head>
<body>
  <h1>Hola mundo!</h1>
  
  <!-- JavaScript de Bootstrap -->
  <script src="js/bootstrap.bundle.min.js" type="text/javascript"></script>
  
  <!-- O bien -->
  <script src="js/bootstrap.min.js" type="text/javascript"></script>
</body>
</html>

Distribución Remota (CDN)

Se puede acceder a los archivos de bootstrap de forma remota con los siguientes links (copiables desde el sitio de bootstrap):

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

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

Accesibilidad

<body>
  <!-- Enlace para saltar al contenido principal -->
  <a href="#content" class="visually-hidden-focusable"> 
    Skip to main content 
  </a>
  <div class="container" id="content"> 
    <!-- El contenido principal de la página -->
  </div>
</body>

Se recomienda implementar un mecanismo que permita saltar bloques de contenido que se repite proporcionando un ancla al contenido principal.