Saltar al contenido principal
Nuevo en v5.3 Compatibilidad con el modo de color, paleta de colores ampliada y más. Bootstrap

Crea sitios rápidos y responsive con Bootstrap

Un toolkit de interfaz potente, extensible y repleto de funciones. Crea y personaliza con Sass, utiliza componentes y sistemas de cuadrícula prediseñados y da vida a los proyectos con potentes complementos de JavaScript. 

npm i [email protected]
Lee las docs

Actualmente v5.3.2 · Descargar · Todas las versiones ⬀

¿Sabías qué?

Para aprovechar Bootstrap al máximo necesitarás un web hosting rápido, seguro y económico, necesitarás el mejor hosting.

Comienza como quieras

Comienza a compilar con Bootstrap, usa el CDN, instálalo a través del administrador de paquetes o descarga el código fuente.

Leer las docs de instalación

Instalar a través del administrador de paquetes

Instala los archivos fuente Sass y JavaScript de Bootstrap a través de npm, RubyGems, Composer o Meteor. Las instalaciones administradas por paquetes no incluyen documentación ni nuestros scripts de compilación completos. También puedes usar cualquier demostración de nuestro repositorio de ejemplos para iniciar rápidamente proyectos Bootstrap.

npm install [email protected]
gem install bootstrap -v 5.3.2

Lee nuestras docs de instalación para obtener más información y administradores de paquetes adicionales.

Incluir vía CDN

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

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

Lee nuestras guías de introducción

Comienza a incluir 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 necesitas, habilita opciones globales como degradados y sombras, y escribe tu propio CSS con nuestras variables, mapas, funciones y mixins.

Aprende más sobre personalización

Incluye todo el Sass de Bootstrap

Importa una hoja de estilo y estarás listo para competir con todas las características de nuestro CSS.

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

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

Obtén más información sobre nuestras opciones globales de Sass.

Incluye lo que necesitas

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 usar Bootstrap con Sass.

Crea y amplía en tiempo real con variables CSS

Bootstrap 5 evoluciona con cada versión para utilizar mejor las variables CSS para estilos de temas globales, componentes individuales e incluso utilidades. Proporcionamos docenas de variables para colores, estilos de fuente y más en un nivel :root para usar en cualquier lugar. En componentes y utilidades, las variables CSS tienen como ámbito la clase relevante y se pueden modificar fácilmente.

Aprende más sobre variables CSS

Usar variables CSS

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

.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 las variables globales, de componentes o de clase de utilidad para personalizar Bootstrap como quieras. No es necesario volver a declarar 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 API de utilidades

Como novedad en Bootstrap 5, nuestras utilidades ahora se generan mediante nuestra API de utilidades. Lo creamos como un mapa Sass repleto de funciones que se puede personalizar rápida y fácilmente. Nunca ha sido tan fácil agregar, eliminar o modificar clases de utilidad. Haz utilidades responsive, agrega variantes de pseudoclases y asígnales nombres personalizados.

Personaliza componentes rápidamente

Aplica cualquiera de nuestras clases de utilidades incluidas a nuestros componentes para personalizar su apariencia, como en el ejemplo de navegación a continuación. Hay cientos de clases disponibles, desde posicionamiento y dimensionamiento a colores y efectos. Mézclalos 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

Crear y ampliar utilidades

Usa la API de utilidades de Bootstrap para modificar cualquiera de nuestras utilidades incluidas o crea tus propias utilidades personalizadas para cualquier proyecto. Primero importe Bootstrap, luego usa las funciones de mapa de Sass para modificar, agregar o eliminar utilidades.

@import "bootstrap/scss/bootstrap";

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

Explora la API de la utilidad

Potentes complementos de JavaScript sin jQuery

Agrega elementos ocultos alternables, menús modales y offcanvas, popovers y tooltips, y mucho más, todo sin jQuery. El JavaScript de Bootstrap es HTML primero, lo que significa que la mayoría de los complementos se agregan con atributos data en tu HTML. ¿Necesitas más control? Incluye plugins individuales mediante programación.

Aprende más sobre Bootstrap JavaScript

API de atributos de datos

¿Por qué escribir más JavaScript cuando puedes escribir HTML? Casi todos los complementos de JavaScript de Bootstrap cuentan con una API de datos de primera clase, lo que te permite usar JavaScript simplemente agregando 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>

Obtén más información sobre nuestro JavaScript como módulos y usando la API programática.

Conjunto completo de complementos

Bootstrap presenta una docena de complementos que puedes insertar en cualquier proyecto. Colócalos todos a la vez o elige solo los que necesites.

Alerta

Muestra y oculta mensajes de alerta a tus usuarios.

Botón

Controlar mediante programación el estado activo de los botones.

Carrusel

Agrega presentaciones de diapositivas a cualquier página, incluida la compatibilidad con fundido cruzado.

Collapse

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

Desplegable

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

Modal

Agrega cuadros de diálogo flexibles y responsive a tu proyecto.

Offcanvas

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

Popover

Crea superposiciones personalizadas. Construido sobre Popper.

Scrollspy

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

Tab

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

Toast

Muestra y oculta notificaciones a tus visitantes.

Tooltip

Reemplaza los tooltips del navegador por otros personalizados. Construido sobre Popper.

Personalízalo con íconos Bootstrap

Bootstrap Icons es una biblioteca de íconos SVG de código abierto que presenta más de 1800 glifos, y se agregan más en cada lanzamiento. Están diseñados para funcionar en cualquier proyecto, ya sea que uses Bootstrap o no. Úsalos como SVG o fuentes de íconos; ambas opciones le brindan escalado de vectores y una fácil personalización a través de CSS.

Obtener Bootstrap Icons

Bootstrap Icons

Hazlo lo tuyo con los Temas Bootstrap oficiales

Lleva Bootstrap al siguiente nivel con temas premium del mercado oficial de temas de Bootstrap. Los temas se crean en Bootstrap como sus propios marcos extendidos, ricos en nuevos componentes y complementos, documentación y potentes herramientas de compilación.

Explorar temas Bootstrap

Bootstrap Themes