Skip to main content
Obtén actualizaciones de seguridad para Bootstrap 3 y 4 Bootstrap

Crea sitios rápidos y adaptables con Bootstrap

Un kit de herramientas de frontend potente, extensible y lleno de funciones. Construye y personaliza con Sass, utiliza un sistema de rejilla y componentes preconstruidos, y da vida a tus proyectos con potentes complementos de JavaScript.

Versión actual: v5.3.8 · Descargar · Todas las versiones

😎

¿Te gustó esta traducción?

Accede a todas nuestras documentaciones técnicas en español. Traducimos guías y referencias oficiales con la máxima precisión para la comunidad de desarrolladores hispanohablantes.

Documentaciones en Español
📚

¿Te gusta aprender cosas nuevas?

Descubre una biblioteca de libros educativos y cursos gratuitos en múltiples categorías. Lee en línea, guarda tu progreso y aprende a tu ritmo. Visita Wordsus.com.

Libros y Cursos Gratis

Empieza como tú quieras

Comienza directamente a construir con Bootstrap: usa la CDN, instálalo a través de un gestor de paquetes o descarga el código fuente.

Lee la documentación de instalación

Instalar mediante gestor 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 la documentación o nuestros scripts de compilación completos. También puedes usar cualquier demo de nuestro repositorio de ejemplos para iniciar rápidamente proyectos de Bootstrap.

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

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

Incluir mediante CDN

Cuando solo necesites incluir el CSS o JS compilado de Bootstrap, puedes usar jsDelivr. Míralo en acción con nuestro sencillo inicio rápido, o explora los ejemplos para comenzar rápidamente 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-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>

Lee nuestras guías de inicio

Comienza rápidamente a incluir los archivos fuente de Bootstrap en un nuevo proyecto con nuestras guías oficiales.

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, mapas, funciones y mixins.

Más información sobre la personalización

Incluye todo el Sass de Bootstrap

Importa una sola hoja de estilos y estarás listo para usar todas las características de nuestro CSS.

// Sobrescribe las variables primero
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";

// Luego importa 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 sencilla de personalizar Bootstrap: incluye solo el CSS que necesitas.

// Primero las funciones
@import "../node_modules/bootstrap/scss/functions";

// Después sobrescribe las variables
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";

// Importaciones obligatorias de Bootstrap
@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";

// Componentes opcionales
@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 versión para aprovechar mejor las variables CSS para los estilos de temas globales, los componentes individuales e incluso las utilidades. Proporcionamos docenas de variables para colores, estilos de fuente y más a nivel de :root para usar en cualquier lugar. En componentes y utilidades, las variables CSS tienen un alcance limitado a la clase correspondiente y se pueden modificar fácilmente.

Más información sobre las variables CSS

Uso de variables CSS

Usa cualquiera de nuestras variables globales :root para escribir nuevos estilos. Las variables CSS utilizan 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 las variables globales, de componentes o de clases de utilidad para personalizar Bootstrap tal como te guste. No es necesario volver a declarar cada regla, solo asignar un nuevo valor a la 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, conozcan la Utility API

Como novedad en Bootstrap 5, nuestras utilidades ahora son generadas por nuestra Utility API. La diseñamos como un mapa Sass repleto de funciones que se puede personalizar de forma rápida y sencilla. Nunca ha sido tan fácil agregar, eliminar o modificar clases de utilidad. Haz que las utilidades sean responsivas, añade variantes de pseudoclases y asígnales nombres personalizados.

Personaliza componentes rápidamente

Aplica cualquiera de nuestras clases de utilidad incluidas a nuestros componentes para personalizar su apariencia, como el ejemplo de navegación a continuación. Hay cientos de clases disponibles, desde posicionamiento y dimensionamiento hasta colores y efectos. Combínalas con la sobrescritura 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">Inicio</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">Perfil</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">Contacto</button>
  </li>
</ul>

Explora componentes personalizados

Crea y extiende utilidades

Usa la API de utilidades 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 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 utilidades

Potentes plugins de JavaScript sin jQuery

Añade elementos ocultos desplegables, 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 los plugins se añaden con atributos data en tu HTML. ¿Necesitas más control? Incluye plugins individuales de forma programática.

Más información 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 cuentan con una API de datos de primera clase, lo que te permite usar JavaScript con solo agregar atributos data.

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

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

Personalízalo con Bootstrap Icons

Bootstrap Icons es una biblioteca de iconos SVG de código abierto que cuenta 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, ya sea que utilices Bootstrap o no. Utilízalos como SVG o fuentes de iconos: ambas opciones te ofrecen escalado vectorial y una fácil personalización a través de CSS.

Consigue Bootstrap Icons

Bootstrap Icons