Saltar al contenido principal Saltar a la navegación de la documentación
Ver en GitHub

Comienza con Bootstrap

Bootstrap es un conjunto de herramientas de interfaz potente y repleto de funciones. Construye cualquier cosa, desde el prototipo hasta la producción, en minutos.

¿Sabías qué?

Además de seguir estos pasos para comenzar con Bootstrap, necesitarás el mejor hosting para alojar tus páginas.

En esta página

Inicio rápido

Comienza incluyendo CSS y JavaScript listos para producción de Bootstrap a través de CDN sin necesidad de realizar ningún paso de compilación. Velo en la práctica con esta demo de Bootstrap CodePen.


  1. Crea un nuevo archivo index.html en la raíz de tu proyecto. Incluye el <meta name="viewport"> también para un comportamiento de respuesta 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>

  2. Incluye CSS y JS de Bootstrap. Coloca la etiqueta <link> en el <head> para nuestro CSS y la etiqueta <script> para nuestro paquete JavaScript (incluido Popper para colocar menús desplegables, poppers y tooltips) antes del </body>. Obtén más información 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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
  </body>
</html>

    También puedes incluir Popper y nuestro JS por separado. Si no planeas usar menús desplegables, ventanas emergentes 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-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>

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

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 Contenidos.

Próximos pasos

Componentes JS

¿Tienes curiosidad por saber qué componentes requieren explícitamente nuestro JavaScript y Popper? 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.

  • Alertas descartables
  • Botones para alternar estados y funcionalidad de casilla de verificación/radio
  • Carrusel para todos los comportamientos, controles e indicadores de las diapositivas.
  • Contraer para alternar la visibilidad del contenido
  • Menú desplegables para visualización y posicionamiento (también requiere Popper)
  • Modales para mostrar, posicionar y comportamiento de desplazamiento
  • Barra de navegación para extender nuestros complementos Collapse y Offcanvas para implementar comportamientos responsive
  • Navs con el complemento Tab para alternar paneles de contenido
  • Offcanvases para visualización, posicionamiento y comportamiento de desplazamiento
  • Scrollspy para 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 casi exclusivamente orientados a la normalización de estilos entre navegadores. Vamos a sumergirnos.

HTML5 doctype

Bootstrap requiere el uso de HTML5 doctype. Sin él, verás un estilo original e incompleto.

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

Viewport meta

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 usando media queries CSS. Para garantizar una representación adecuada y un zoom táctil para todos los dispositivos, agrega la metaetiqueta responsive de viewport 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 box-sizing de content-box a border-box. Esto garantiza que el padding no afecte el ancho final calculado de un elemento, pero puede causar problemas con algunos programas de terceros como Google Maps y Google Custom Search Engine.

En las raras ocasiones en que necesites sobrescribirlo, usa algo como lo siguiente:

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

Con el fragmento anterior, los elementos anidados (incluido el contenido generado mediante ::before y ::after) heredarán el box-sizing especificado para ese .selector-for-some-widget.

Obtén más información sobre model box y tamaños en CSS Tricks.

Reboot

Para mejorar el renderizado entre navegadores, utilizamos Reboot para corregir inconsistencias entre navegadores y dispositivos mientras proporcionando restablecimientos un poco más obstinados de elementos HTML comunes.

Community

Mantente actualizado sobre el desarrollo de Bootstrap y comunícate con la comunidad con estos útiles recursos.

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

También puedes seguir a @getbootstrap en Twitter para conocer los últimos chismes y fantásticos vídeos musicales.