Bootstrap 5.3: Guía completa desde cero del Framework de diseño web más usado

Si estás montando una web y necesitas algo que sea rápido, flexible y con buena pinta desde el minuto uno, Bootstrap sigue siendo el rey.

No necesitas reinventar la rueda: con un par de líneas ya tienes botones, grids, componentes y hasta plugins JS funcionando.

Vamos a ver cómo empezar a usar Bootstrap 5.3.6 sin rodeos y de forma práctica, según lo que necesites en tu proyecto.

1. Instala Bootstrap como te venga mejor

¿Prefieres usar un gestor de paquetes?

Pues entonces, npm es tu amigo. Abre la terminal y escribe:

npm install bootstrap@5.3.6

¿Trabajas con RubyGems? También puedes instalar Bootstrap fácilmente:

gem install bootstrap -v 5.3.6

¿Usas Composer, Meteor u otra cosa? También existe soporte para esos formatos. Pero eso sí, estas instalaciones no incluyen la documentación completa ni los scripts de build que trae el zip de descarga.

¿Prefieres ir directo al grano con una instalación remota?

Puedes tirar del CDN de jsDelivr y olvidarte de instalar nada extra en tu sitio web. Solamente copia y pega esto en tu HTML y listo:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-..." crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-..." crossorigin="anonymous"></script>

Esto ya te permitirá crear los estilos y scripts necesarios que harán que Bootstrap funcione desde el primer momento sobre tu sitio.

2. Personaliza el estilo con Sass

Aquí es donde Bootstrap saca músculo de verdad.

Gracias a Sass puedes personalizarlo todo: colores, tamaños, sombras, tipografías, etc. Hay dos formas de hacerlo:

Opción 1: Cargar todo Bootstrap de golpe

Primero sobreescribes las variables que quieras cambiar, luego importas Bootstrap entero:

$primary: #900;
$enable-shadows: true;
$prefix: "mo-";

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

Opción 2: Solamente importas lo que necesitas

Ideal si quieres reducir el peso final del CSS:

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

$primary: #900;
$enable-shadows: true;
$prefix: "mo-";

@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 que quieras incluir
@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";

Así tienes un control total sobre lo que se incluye y lo que no.

3. CSS variables: Personalizando a tu gusto sin pelearte con el código

Bootstrap 5 ya apuesta por las variables CSS como estándar. Esto significa que puedes modificar el diseño global (o partes concretas) directamente desde CSS.

Por ejemplo:

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;
}

También puedes usarlas para definir nuevos estilos desde cero:

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

4. Utilidades personalizadas con Utility API

Una de las joyas nuevas de Bootstrap 5 es su Utility API. Básicamente, puedes generar tus propias clases utilitarias con Sass de forma muy sencilla.

¿Quieres añadir variantes de HOVER, versiones responsivas o nuevos nombres? Hecho.

Quieres quitar clases que no usas? También, vas a poder hacerlo de manera muy sencilla.

Estos aspectos, son ideales para mantener tu CSS limpio y bien organizado.

5. Por fin JavaScript sin jQuery

Bootstrap ya no depende de jQuery, lo cual es una maravilla si quieres mantener tu bundle más ligero.

¿Quieres usar un modal, un menú offcanvas o un tooltip? Solo tienes que poner atributos «data-» en tu HTML y ya tendrás la funcionalidad:

<button data-bs-toggle="modal" data-bs-target="#miModal">Abrir modal</button>

¿Prefieres controlar todo desde JavaScript? También puedes hacerlo importando solo los plugins que necesites.

6. Dale un toque final con los iconos de Bootstrap

Bootstrap también tiene su propia colección de iconos: más de 1.800 SVG listos para usar y que funcionan tanto con Bootstrap, como por separado.

Puedes incluirlos como fuentes o como SVG, lo que más prefieras. Y lo mejor de todo, es que puedes modificarlos fácilmente con CSS, como si se tratase de cualquier otro elemento.

Conclusión

¿Por dónde debería de comenzar con Bootstrap?

Depende de lo que necesites:

• ¿Solo quieres montar una web rápida? Usa el CDN.
• ¿Vas en serio con un proyecto más grande? Instálalo por npm y personalízalo con Sass.
• ¿Quieres una estética propia sin renunciar a la base sólida de Bootstrap? Profundiza y ve a por las variables CSS y su Utility API.

Bootstrap 5.3.6 es como una navaja suiza completa para la generación del frontend, y tú decides hasta qué punto decides afilarla.

Preguntas Frecuentes de Bootstrap 5.3