Comienza con Bootstrap

Bootstrap es un toolkit frontend potente y lleno de funciones. Construye cualquier cosa—desde prototipo hasta producción—en minutos.

On this page

Inicio rápido

Comienza incluyendo el CSS y JavaScript listos para producción de Bootstrap vía CDN sin necesidad de ningún paso de compilación. Véelo en práctica con esta demo de Bootstrap en CodePen.

Crea un nuevo archivo index.html en la raíz de tu proyecto. Incluye también la etiqueta <meta name="viewport"> para un comportamiento responsivo adecuado en dispositivos móviles.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Incluye el CSS y JS de Bootstrap. Coloca la etiqueta <link> en el <head> para nuestro CSS, y la etiqueta <script> para nuestro bundle de JavaScript (incluyendo Popper para el posicionamiento de menús desplegables, popovers y tooltips) antes del cierre de </body>. Aprende más sobre nuestros enlaces CDN.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
  </body>
</html>

También puedes incluir Popper y nuestro JS por separado. Si no planeas usar menús desplegables, popovers ni tooltips, ahorra algunos kilobytes no incluyendo Popper.

<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>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js" integrity="sha384-G/EV+4j2dNv+tEPo3++6LCgdCROaejBqfUeNjuKAiuXbjrxilcCdDz6ZAVfHWe1Y" crossorigin="anonymous"></script>

¡Hola, mundo! Abre la página en tu navegador de elección para ver tu página con Bootstrap. Ahora puedes empezar a construir con Bootstrap creando tu propio diseño, añadiendo decenas de componentes, y utilizando nuestros ejemplos oficiales.

Enlaces CDN

As reference, here are our primary Enlaces CDN.

Descripción	URL
CSS	`https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js`

También puedes usar el CDN para obtener cualquiera de nuestras compilaciones adicionales listadas en la página de Contenidos.

Al usar enlaces CDN, asegúrate de usar el atributo integrity para verificar los archivos y versiones correctos. Estos hashes son únicos para cada archivo y versión de Bootstrap, por lo que cuando actualices a una nueva versión, asegúrate de que el atributo integrity también se actualice.

También incluimos un atributo crossorigin="anonymous" para prevenir errores de CORS.

Próximos pasos

Lee un poco más sobre algunos ajustes importantes del entorno global que Bootstrap utiliza.
Lee sobre qué incluye Bootstrap en nuestra sección de contenidos y la lista de componentes that require JavaScript a continuación.
¿Necesitas un poco más de potencia? Considera construir con Bootstrap incluyendo los archivos fuente vía gestor de paquetes.
¿Buscas usar Bootstrap como módulo con <script type="module">? Por favor consulta nuestra sección uso de Bootstrap como módulo .

Componentes JS

¿Curioso sobre qué componentes requieren explícitamente nuestro JavaScript y Popper? Si tienes alguna duda sobre la estructura general de la página, sigue leyendo para ver un ejemplo de plantilla de página.

Acordeones para extender nuestro plugin Collapse
Alertas para descartar
Botones para alternar estados y funcionalidad de checkbox/radio
Carrusel para todos los comportamientos de slide, controles e indicadores
Collapse para alternar la visibilidad del contenido
Desplegables para mostrar y posicionar (también requiere Popper)
Modales para mostrar, posicionar y comportamiento de scroll
Navbar para extender nuestros plugins Collapse y Offcanvas para implementar comportamientos responsivos
Navs con el plugin Tab para alternar paneles de contenido
Offcanvases para visualización, posicionamiento, y comportamiento de desplazamiento
Scrollspy para comportamiento de scroll y actualizaciones de navegación
Toasts para mostrar y descartar
Tooltips y popovers para mostrar y posicionar (también requiere Popper)

Variables globales importantes

Bootstrap emplea un puñado de estilos y ajustes globales importantes, todos ellos casi exclusivamente orientados a la normalización de estilos entre navegadores. Vamos a profundizar.

Doctype HTML5

Bootstrap requiere el uso del doctype HTML5. Sin él, verás un estilo extraño e incompleto.

<!doctype html>
<html lang="en">
  ...
</html>

Meta viewport

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 de CSS. Para asegurar un renderizado adecuado y el zoom táctil en todos los dispositivos, añade la etiqueta meta del viewport responsive a tu <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Puedes ver un ejemplo de esto en acción en el inicio rápido.

Box-sizing

Para un dimensionado más sencillo en CSS, cambiamos el valor global de box-sizing de content-box a border-box. Esto asegura que el padding no afecte al ancho final calculado de un elemento, pero puede causar problemas con algunos software de terceros como Google Maps y Google Custom Search Engine.

En la rara ocasión en que necesites sobrescribirlo, usa algo como lo siguiente:

.selector-for-some-widget {
  box-sizing: content-box;
}

Con el fragmento anterior, los elementos anidados—incluyendo el contenido generado vía ::before y ::after—heredarán todos el box-sizing especificado para ese .selector-for-some-widget.

Más información sobre box model y sizing en CSS Tricks.

Reboot

Para mejorar el renderizado entre navegadores, usamos Reboot para corregir inconsistencias entre navegadores y dispositivos, al tiempo que proporcionamos resets algo más opinados para elementos HTML comunes.

Comunidad

Mantente al día con el desarrollo de Bootstrap y comunícate con la comunidad usando estos recursos útiles.

Lee y suscríbete a The Official Bootstrap Blog.
Haz preguntas y explora nuestros GitHub Discussions.
Discute, haz preguntas y más en el Discord de la comunidad o el subreddit de Bootstrap.
Chatea con otros Bootstrappers en IRC. En el servidor irc.libera.chat, en el canal #bootstrap.
Puedes encontrar ayuda de implementación en Stack Overflow (etiquetado bootstrap-5).
Los desarrolladores deberían usar la palabra clave bootstrap en paquetes que modifiquen o añadan funcionalidad a Bootstrap cuando lo distribuyan a través de npm o mecanismos de distribución similares para maximizar su descubribilidad.

También puedes seguir @getbootstrap en X para los últimos chismes y geniales videos musicales.