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
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.
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.8Lee nuestra documentación de instalación para obtener más información y gestores de paquetes adicionales.
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>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.
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.
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.
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.
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);
}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;
}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.
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>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,
)
)
);
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.
¿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.
Bootstrap cuenta con una docena de plugins que puedes incorporar a cualquier proyecto. Incorpóralos todos a la vez o elige solo los que necesites.
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.
