Saltar al contenido principal
Obtén actualizaciones de seguridad para Bootstrap 3 y 4 Bootstrap

Construye sitios rápidos y responsive con Bootstrap

Un toolkit frontend potente, extensible y lleno de funciones. Construye y personaliza con Sass, utiliza el sistema de grid preconstruido y los componentes, y da vida a tus proyectos con potentes plugins de JavaScript.

npm i bootstrap@5.3.8
Lee la documentación

Actualmente v5.3.8 · Descargar · Todos los lanzamientos

Empieza como quieras

Salta directamente a construir con Bootstrap—usa el CDN, instálalo vía gestor de paquetes, o descarga el código fuente.

Lee la documentación de instalación

¿Estás comenzando un proyecto con Bootstrap?

Para aprovechar al máximo las maravillas de Bootstrap necesitarás el mejor web hosting.

¿Planeas construir tu sitio con Bootstrap?

Bootstrap te permite diseñar todo tipo de proyectos, pero ¿sabes cuánto cuesta hacer una página web? Conoce los costos y presupuestos detallados.

Instalar vía gestor de paquetes

Instala los archivos fuente Sass y JavaScript de Bootstrap vía npm, RubyGems, Composer o Meteor. Las instalaciones mediante gestores de paquetes no incluyen documentación ni nuestros scripts de build completos. También puedes usar cualquier demo de nuestro repositorio de Examples para arrancar rápidamente proyectos con Bootstrap.

npm install bootstrap@5.3.8
gem install bootstrap -v 5.3.8

Lee nuestra documentación de instalación para más información y gestores de paquetes adicionales.

Incluir vía CDN

Cuando solo necesitas incluir el CSS o JS compilado de Bootstrap, puedes usar jsDelivr. Velo en acción con nuestro inicio rápido, o explora los ejemplos para arrancar tu próximo proyecto. También puedes elegir incluir Popper y nuestro JS por separado.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<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>

Lee nuestras guías de inicio

Adelántate incluyendo los archivos fuente de Bootstrap en un nuevo proyecto con nuestras guías oficiales.

Webpack Parcel Vite

Personaliza todo con Sass

Bootstrap utiliza Sass para una arquitectura modular y personalizable. Importa solo los componentes que necesites, habilita opciones globales como degradados y sombras, y escribe tu propio CSS con nuestras variables, maps, funciones y mixins.

Aprende más sobre la personalización

Incluye todo el Sass de Bootstrap

Importa una hoja de estilos y estarás listo para usar todas las funciones de nuestro CSS. 

// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";

// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";

Aprende más sobre nuestras opciones globales de Sass.

Incluye lo que necesites

La forma más fácil de personalizar Bootstrap—incluye solo el CSS que necesitas.

// Functions first
@import "../node_modules/bootstrap/scss/functions";

// Variable overrides second
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";

// Required Bootstrap imports
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// Optional components
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";
@import "../node_modules/bootstrap/scss/utilities/api";

Aprende más sobre cómo usar Bootstrap con Sass.

Construye y extiende en tiempo real con variables CSS

Bootstrap 5 evoluciona con cada lanzamiento para utilizar mejor las variables CSS en los estilos de tema globales, componentes individuales e incluso utilidades. Proporcionamos decenas de variables para colores, estilos de fuente y más a nivel :root para usarlas en cualquier lugar. En componentes y utilidades, las variables CSS están limitadas a la clase relevante y pueden modificarse fácilmente.

Aprende más sobre las variables CSS

Uso de variables CSS

Usa cualquiera de nuestras variables globales de :root para escribir nuevos estilos. Las variables CSS usan la sintaxis var(--bs-variableName) y pueden ser heredadas por los elementos hijos.

.component {
  color: var(--bs-gray-800);
  background-color: var(--bs-gray-100);
  border: 1px solid var(--bs-gray-200);
  border-radius: .25rem;
}

.component-header {
  color: var(--bs-purple);
}

Personalización mediante variables CSS

Sobrescribe variables globales, de componentes o de clases utilitarias para personalizar Bootstrap a tu gusto. No necesitas redeclarar cada regla, solo un nuevo valor de variable.

body {
  --bs-body-font-family: var(--bs-font-monospace);
  --bs-body-line-height: 1.4;
  --bs-body-bg: var(--bs-gray-100);
}

.table {
  --bs-table-color: var(--bs-gray-600);
  --bs-table-bg: var(--bs-gray-100);
  --bs-table-border-color: transparent;
}

Componentes, conoce la Utility API

Nuevo en Bootstrap 5, nuestras utilidades ahora se generan con nuestra Utility API. La construimos como un Sass map lleno de funciones que puede personalizarse rápida y fácilmente. Nunca ha sido tan fácil añadir, eliminar o modificar clases utilitarias. Haz que las utilidades sean responsive, añade variantes de pseudo-clases y dales nombres personalizados.

Personaliza componentes rápidamente

Aplica cualquiera de nuestras clases utilitarias incluidas a nuestros componentes para personalizar su apariencia, como en el ejemplo de navegación de abajo. Hay cientos de clases disponibles—desde posicionamiento y tamaños hasta colores y efectos. Mézclalas con sobrescrituras de variables CSS para tener aún más control.

<ul class="nav nav-pills nav-fill gap-2 p-1 small bg-primary rounded-5 shadow-sm" id="pillNav2" role="tablist" style="--bs-nav-link-color: var(--bs-white); --bs-nav-pills-link-active-color: var(--bs-primary); --bs-nav-pills-link-active-bg: var(--bs-white);">
  <li class="nav-item" role="presentation">
    <button class="nav-link active rounded-5" id="home-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link rounded-5" id="profile-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link rounded-5" id="contact-tab2" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">Contact</button>
  </li>
</ul>

Explora componentes personalizados

Crea y extiende utilidades

Usa la utility API de Bootstrap para modificar cualquiera de nuestras utilidades incluidas o crea tus propias utilidades personalizadas para cualquier proyecto. Importa Bootstrap primero, luego usa las funciones de Sass map para modificar, añadir o eliminar utilidades.

@import "bootstrap/scss/bootstrap";

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

Explora la utility API

Potentes plugins de JavaScript sin jQuery

Añade elementos ocultos alternables, modales y menús offcanvas, popovers y tooltips, y mucho más—todo sin jQuery. El JavaScript de Bootstrap es HTML-first, lo que significa que la mayoría de plugins se añaden con atributos data en tu HTML. ¿Necesitas más control? Incluye plugins individuales programáticamente.

Aprende más sobre el JavaScript de Bootstrap

API de atributos data

¿Por qué escribir más JavaScript cuando puedes escribir HTML? Casi todos los plugins de JavaScript de Bootstrap incluyen una API de data de primera clase, permitiéndote usar JavaScript simplemente añadiendo atributos data.

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu">
    <li><button class="dropdown-item" type="button">Dropdown item</button></li>
    <li><button class="dropdown-item" type="button">Dropdown item</button></li>
    <li><button class="dropdown-item" type="button">Dropdown item</button></li>
  </ul>
</div>

Aprende más sobre nuestro JavaScript como módulos y el uso de la API programática.

Conjunto completo de plugins

Bootstrap incluye una docena de plugins que puedes incorporar en cualquier proyecto. Añádelos todos a la vez, o elige solo los que necesites.

Alert

Muestra y oculta mensajes de alerta a tus usuarios.

Button

Controla programáticamente el estado activo de los botones.

Carousel

Añade presentaciones de diapositivas a cualquier página, incluyendo soporte para crossfade.

Collapse

Expande y contrae áreas de contenido, o crea acordeones.

Dropdown

Crea menús de enlaces, acciones, formularios y más.

Modal

Añade diálogos flexibles y responsive a tu proyecto.

Offcanvas

Construye y alterna barras laterales ocultas en cualquier página.

Popover

Crea overlays personalizados. Construido sobre Popper.

Scrollspy

Actualiza automáticamente los enlaces de navegación activos según el scroll de la página.

Tab

Permite que los componentes de navegación de Bootstrap alternen contenidos.

Toast

Muestra y oculta notificaciones a tus visitantes.

Tooltip

Reemplaza los tooltips del navegador con unos personalizados. Construido sobre Popper.

Personalízalo con Bootstrap Icons

Bootstrap Icons es una librería de iconos SVG de código abierto con más de 1,800 glifos, y se añaden más en cada lanzamiento. Están diseñados para funcionar en cualquier proyecto, uses Bootstrap o no. Úsalos como SVGs o como fuentes de iconos—ambas opciones te dan escalado vectorial y fácil personalización vía CSS.

Obtén Bootstrap Icons

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