Primeros pasos con Bootstrap

Bootstrap es un potente toolkit de frontend repleto de características. Construye cualquier cosa, desde un prototipo hasta producción, en minutos.

En esta página

Inicio rápido

Comienza incluyendo el CSS y JavaScript de Bootstrap listos para producción a través de CDN sin necesidad de ningún paso de compilación. Míralo en práctica con esta demostración 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="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demostración de Bootstrap</title>
  </head>
  <body>
    <h1>¡Hola, mundo!</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 paquete de JavaScript (incluyendo Popper para posicionar menús desplegables, popovers y tooltips) antes del cierre </body>. Obtén más información sobre nuestros enlaces CDN.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demostración de Bootstrap</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
  </head>
  <body>
    <h1>¡Hola, mundo!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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 o tooltips, ahorra algunos kilobytes al no incluir Popper.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-G/EV+4j2dNv+tEPo3++6LCgdCROaejBqfUeNjuKAiuXbjrxilcCdDz6ZAVfHWe1Y" crossorigin="anonymous"></script>

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

Enlaces CDN

Como referencia, aquí están nuestros enlaces CDN principales.

Descripción	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

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

Al utilizar 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 esté actualizado.

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

Siguientes pasos

Lee un poco más sobre algunas configuraciones de entorno global importantes que utiliza Bootstrap.
Lee sobre lo que se incluye en Bootstrap en nuestra sección de contenidos y la lista de componentes que requieren JavaScript a continuación.
¿Necesitas un poco más de potencia? Considera construir con Bootstrap incluyendo los archivos fuente a través de un gestor de paquetes.
¿Buscas usar Bootstrap como un módulo con <script type="module">? Consulta nuestra sección uso de Bootstrap como un módulo.

Componentes JS

¿Tienes curiosidad por saber qué componentes requieren explícitamente nuestro JavaScript y Popper? Si no estás seguro de la estructura general de la página, sigue leyendo para ver una plantilla de página de ejemplo.

Acordeones para extender nuestro plugin Collapse
Alertas para descarte
Botones para alternar estados y funcionalidad de casillas de verificación/botones de opción
Carrusel para todos los comportamientos de deslizamiento, controles e indicadores
Collapse para alternar la visibilidad del contenido
Menús desplegables para mostrar y posicionar (también requiere Popper)
Modales para mostrar, posicionar y el comportamiento de desplazamiento
Barra de navegación para extender nuestros plugins Collapse y Offcanvas para implementar comportamientos responsivos
Navegaciones con el plugin Tab para alternar paneles de contenido
Offcanvases para mostrar, posicionar y el comportamiento de desplazamiento
Scrollspy para el comportamiento de desplazamiento y actualizaciones de navegación
Toasts para mostrar y descartar
Tooltips y popovers para mostrar y posicionar (también requiere Popper)

Globales importantes

Bootstrap emplea un puñado de estilos y configuraciones globales importantes, todos los cuales están orientados casi exclusivamente a la normalización de estilos entre navegadores. Vamos a sumergirnos.

Doctype HTML5

Bootstrap requiere el uso del doctype HTML5. Sin él, verás algunos estilos extraños e incompletos.

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

Meta viewport

Bootstrap está desarrollado mobile first (primero para móviles), una estrategia en la cual optimizamos el código primero para dispositivos móviles y luego escalamos los componentes según sea necesario usando consultas de medios (media queries) de CSS. Para garantizar una representación adecuada y el zoom táctil para todos los dispositivos, agrega la etiqueta meta viewport responsiva 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 dimensionamiento 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 el ancho final calculado de un elemento, pero puede causar problemas con algunos softwares de terceros como Google Maps y Google Custom Search Engine.

En la rara ocasión en que necesites anularlo, usa 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 dimensionamiento en CSS-Tricks.

Reboot

Para una mejor representación entre navegadores, utilizamos Reboot para corregir inconsistencias entre navegadores y dispositivos, al tiempo que proporcionamos restablecimientos un poco más específicos para elementos HTML comunes.

Comunidad

Mantente al día sobre el desarrollo de Bootstrap y ponte en contacto con la comunidad con estos recursos útiles.

Lee y suscríbete a El Blog Oficial de Bootstrap.
Haz preguntas y explora nuestras discusiones en GitHub.
Discute, haz preguntas y más en el Discord de la comunidad o en el subreddit de Bootstrap.
Chatea con otros usuarios de Bootstrap en IRC. En el servidor irc.libera.chat, en el canal #bootstrap.
Se puede encontrar ayuda con la implementación en Stack Overflow (etiquetado como bootstrap-5).
Los desarrolladores deben usar la palabra clave bootstrap en los paquetes que modifican o agregan funcionalidad a Bootstrap cuando los distribuyen a través de npm o mecanismos de distribución similares para una máxima visibilidad.

También puedes seguir a @getbootstrap en X para conocer los últimos rumores y videos musicales increíbles.