Introducción
Comienza con Bootstrap, el framework más popular del mundo para crear sitios adaptables para dispositivos móviles, con jsDelivr y con una plantilla como página de inicio.

Inicio rápido
¿Estás buscando agregar rápidamente Bootstrap a tu proyecto? Usa jsDelivr, un CDN gratuito de código abierto. ¿Utilizas un administrador de paquetes o necesitas descargar los archivos fuente? Dirígete a la página de descargas.
CSS
Para cargar nuestro CSS, copia y pega el <link>
a la hoja de estilo en tu <head>
, justo antes que todas las demás hojas de estilo.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
JS
Muchos de nuestros componentes requieren el uso de JavaScript para funcionar. Específicamente, requieren nuestros propios complementos de JavaScript y Popper. Coloca uno de los siguientes <script>
s cerca del final de tus páginas, justo antes de la etiqueta de cierre </body>
, para habilitarlos.
Tal vez te interese
Bundle
Puedes añadir cada complemento y dependencia de JavaScript de Bootstrap con uno de nuestros dos paquetes. Tanto bootstrap.bundle.js
como bootstrap.bundle.min.js
incluyen Popper para nuestros tooltips (información emergente) y popovers (ventanas emergentes). Para obtener más información sobre lo que se incluye en Bootstrap, consulta nuestra sección contenidos.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
Separado
Si decides optar por la solución de scripts separados, Popper debe ser lo primero (si estás utilizando tooltips o popovers) y luego nuestros complementos de JavaScript.
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-q9CRHqZndzlxGLOj+xrdLDJa9ittGte1NksRmgJKeCV9DrM7Kz868XYqsKWPpAmn" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
Módulos
Si usas <script type="module">
, consulta nuestra sección usando Bootstrap como módulo.
Componentes
¿Tienes curiosidad por saber qué componentes requieren explícitamente nuestro JavaScript y Popper? Haz clic en el enlace Mostrar componentes a continuación. Si no estás seguro acerca de la estructura general de la página, sigue leyendo para ver una plantilla de página de ejemplo.
Mostrar componentes que requieren JavaScript
- Alerts, para ocultarlas
- Buttons, para alternar sus estados y funcionalidad de checkbox/radio
- Carousel, para todos los comportamientos de diapositivas, controles e indicadores
- Collapse, para alternar la visibilidad del contenido
- Dropdowns, para mostrar y posicionar (también requiere Popper)
- Modals, para mostrar, posicionar y comportamiento de desplazamiento
- Navbar, para extender nuestro complemento Collapse para implementar un comportamiento responsive
- Offcanvases, para visualización, posicionamiento y comportamiento de desplazamiento
- Toasts, para mostrar y ocultar
- Tooltips y popovers, para mostrar y posicionar (también requiere Popper)
- Scrollspy, para el comportamiento de desplazamiento y actualizaciones de navegación
Plantilla de inicio
Asegúrate de configurar tus páginas con los últimos estándares de diseño y desarrollo. Eso significa usar un HTML5 doctype e incluir una metaetiqueta viewport para comportamientos responsive adecuados. Pon todo junto y tus páginas deberían verse así:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-q9CRHqZndzlxGLOj+xrdLDJa9ittGte1NksRmgJKeCV9DrM7Kz868XYqsKWPpAmn" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
Para conocer los próximos pasos, visita Layout docs o nuestros ejemplos oficiales para comenzar a crear el contenido y componentes de tu sitio web.
Globales importantes
Bootstrap emplea un puñado de estilos y configuraciones globales importantes que deberás tener en cuenta al usarlo, todos los cuales están orientados casi exclusivamente a la normalización de estilos entre navegadores. Veámoslo.
Tal vez te interese
HTML5 doctype
Bootstrap requiere el uso del HTML5 doctype. Sin él, verás un estilo incompleto, pero incluirlo no debería causar contratiempos considerables.
<!doctype html>
<html lang="en">
...
</html>
Responsive meta tag
Bootstrap se desarrolla mobile first, una estrategia en la que primero optimizamos el código para dispositivos móviles y luego escalamos los componentes según sea necesario utilizando media queries CSS. Para garantizar una representación adecuada y el zoom táctil para todos los dispositivos, agrega la metaetiqueta responsive viewport a tu <head>
.
<meta name="viewport" content="width=device-width, initial-scale=1">
Puedes ver un ejemplo de esto en acción en la plantilla de inicio.
Box-sizing
Para un dimensionamiento más sencillo en CSS, cambiamos el valor global box-sizing
de content-box
a border-box
. Esto garantiza que el padding
no afecte el ancho calculado final de un elemento, pero puede causar problemas con algunos software de terceros como Google Maps y Google Custom Search Engine.
En las raras ocasiones en que necesites anularlo, utiliza algo como lo siguiente:
.selector-for-some-widget {
box-sizing: content-box;
}
Con el fragmento anterior, los elementos anidados, incluido el contenido generado a través de ::before
y ::after
, heredarán el box-sizing
especificado para ese .selector-for-some-widget
.
Obtén más información sobre el modelo de caja y tamaño en CSS Tricks.
Reboot
Para mejorar la compatibilidad entre navegadores, usamos Reboot para corregir las incoherencias entre navegadores.
Tal vez te interese
Comunidad
Mantente actualizado sobre el desarrollo de Bootstrap y comunícate con la comunidad con estos útiles recursos.
- Lee y suscríbete al Blog oficial de Bootstrap.
- Únete a la sala oficial de Slack.
- Chatea con compañeros Bootstrappers en IRC. En el servidor
irc.libera.chat
, en el canal#bootstrap
. - Puedes encontrar ayuda para la implementación en Stack Overflow (etiquetado
bootstrap-5
). - Los desarrolladores deben usar la palabra clave
bootstrap
en los paquetes que modifican o agregan funcionalidad a Bootstrap cuando se distribuyen a través de npm o mecanismos de entrega similares para máxima capacidad de descubrimiento.
También puedes seguir a @getbootstrap en Twitter para conocer los últimos chismes y videos musicales increíbles.