Saltar al contenido principal Saltar a la navegación de la documentación
¡Hay una versión más nueva de Bootstrap!
Ver en GitHub

Introducción

Empieza con Bootstrap, el framework más popular del mundo para construir sitios responsive y mobile-first, con jsDelivr y una plantilla de inicio.

On this page

Inicio rápido

¿Buscas añadir Bootstrap rápidamente a tu proyecto? Usa jsDelivr, un CDN gratuito de código abierto. ¿Usas un gestor de paquetes o necesitas descargar los archivos fuente? Ve a la página de descargas.

CSS

Copia y pega el <link> de la hoja de estilos en tu <head> antes que todas las demás hojas de estilos para cargar nuestro CSS.

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

JS

Muchos de nuestros componentes requieren el uso de JavaScript para funcionar. Específicamente, requieren nuestros propios plugins 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 activarlos.

Bundle

Incluye todos los plugins y dependencias de JavaScript de Bootstrap con uno de nuestros dos bundles. Tanto bootstrap.bundle.js como bootstrap.bundle.min.js incluyen Popper para nuestros tooltips y popovers. Para más información sobre lo que incluye Bootstrap, consulta nuestra sección de contenidos.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Separado

Si decides ir con la solución de scripts separados, Popper debe ir primero (si estás usando tooltips o popovers), y luego nuestros plugins de JavaScript.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

Módulos

Si usas <script type="module">, consulta nuestra sección sobre usar Bootstrap como módulo.

Componentes

¿Curioso sobre qué componentes requieren explícitamente nuestro JavaScript y Popper? Haz clic en el enlace de mostrar componentes de abajo. Si tienes dudas sobre la estructura general de la página, sigue leyendo para ver una plantilla de ejemplo.

Mostrar componentes que requieren JavaScript
  • 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 nuestro plugin Collapse e implementar comportamiento responsive
  • Toasts para mostrar y descartar
  • Tooltips y popovers para mostrar y posicionar (también requiere Popper)
  • Scrollspy para comportamiento de scroll 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 doctype HTML5 e incluir un meta tag de viewport para un comportamiento responsive adecuado. Ponlo 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/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 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/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Para los próximos pasos, visita la documentación de Layout o nuestros ejemplos oficiales para empezar a maquetar el contenido y los componentes de tu sitio.

Variables globales importantes

Bootstrap emplea un puñado de estilos y configuraciones globales importantes que debes tener en cuenta al usarlo, casi todos orientados a la normalización de estilos entre navegadores. Vamos a verlos.

Doctype HTML5

Bootstrap requiere el uso del doctype HTML5. Sin él, verás algunos estilos incompletos y extraños, pero incluirlo no debería causar problemas considerables.

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

Meta tag responsive

Bootstrap está desarrollado mobile first, una estrategia en la que optimizamos el código primero para dispositivos móviles y luego escalamos los componentes según sea necesario usando CSS media queries. Para asegurar un renderizado correcto y el zoom táctil para todos los dispositivos, añade el meta tag responsive del 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 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 conecta con la comunidad usando estos recursos útiles.

  • Lee y suscríbete a The Official Bootstrap Blog.
  • 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 Twitter para las últimas novedades y vídeos musicales increíbles.

Traducción mantenida por Esdocu. Visita esdocu.com para ver más documentaciones traducidas.