Idioma: ES
LuisLlamas Logo
Buscar
⏲️ ~ 8 minutos Iniciación
cheatsheet-bootstrap

Cheatsheet de Bootstrap

Bootstrap es un framework de desarrollo front-end que permite crear sitios web responsives y modernos de manera utilizando HTML, CSS y JavaScript.

Instalación de Bootstrap

Puedes instalar Bootstrap a través de CDN o integrarlo en tu proyecto descargando los archivos.

Instalación a través de npm

Si estás utilizando NPM, puedes instalar Bootstrap con el siguiente comando:

npm install bootstrap

Luego, importa Bootstrap en tu archivo JavaScript o CSS:

import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

Instalación desde CDN

<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>

Descarga directa

Descargar desde https://getbootstrap.com.

Estructura básica

HTML básico con Bootstrap

Estructura básica de un archivo HTML que incluye Bootstrap.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Proyecto Bootstrap</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-center">¡Hola, Bootstrap!</h1>
</body>
</html>

Contenedores

Los contenedores son elementos que encapsulan el contenido y son esenciales para el sistema de cuadrículas. Puedes utilizar dos tipos de contenedores:

Contenedor fijo

Tiene un ancho máximo que se adapta a diferentes tamaños de pantalla.

<div class="container">
<!-- Contenido -->
</div>

Contenedor fluido

Ocupa el 100% del ancho.

<div class="container-fluid">
  <!-- Contenido -->
</div>

Filas

Las filas (.row) son necesarias para agrupar columnas (.col). El sistema de cuadrículas se basa en 12 columnas.

<div class="container">
  <div class="row">
    <div class="col-md-6">Columna 1</div>
    <div class="col-md-6">Columna 2</div>
  </div>
</div>

Sistema de Grid

Estructura de Grid

El sistema de grids usa 12 columnas por fila y es responsive.

<div class="container">
  <div class="row">
    <div class="col-md-6">Columna 1 (6 columnas)</div>
    <div class="col-md-6">Columna 2 (6 columnas)</div>
  </div>
</div>

Clases de columna

Bootstrap permite ajustar el comportamiento de las columnas en diferentes tamaños de pantalla:

  • col-: Extra pequeño (móviles)
  • col-sm-: Pequeño (pantallas ≥ 576px)
  • col-md-: Mediano (pantallas ≥ 768px)
  • col-lg-: Grande (pantallas ≥ 992px)
  • col-xl-: Extra grande (pantallas ≥ 1200px)

Alineación de columnas

  • Alineación vertical:
<div class="row align-items-center">...</div>
  • Alineación horizontal:
<div class="row justify-content-center">...</div>

Clases de utilidad

Espaciado

Las clases de espaciado permiten controlar los márgenes y el padding de los elementos. Puedes utilizar clases que afectan a todos los lados o solo a uno o dos específicos.

Márgenes

Clases de margen: m-{t|b|l|r|x|y}-{breakpoint}-{size}

  • t: Top (superior)
  • b: Bottom (inferior)
  • l: Left (izquierda)
  • r: Right (derecha)
  • x: Horizontal (izquierda y derecha)
  • y: Vertical (superior e inferior)

Breakpoints: sm, md, lg, xl, xxl para aplicar márgenes en diferentes tamaños de pantalla.

Tamaños: Valores de 0 a 5, donde 0 elimina el margen y 5 aplica el máximo.

<div class="m-3">Margen en todos los lados</div>
<div class="mt-3 mb-3">Margen superior e inferior de 3</div>
<div class="mx-auto">Centro horizontal</div>

Padding

Clases de padding: p-{t|b|l|r|x|y}-{breakpoint}-{size} con las mismas reglas que los márgenes.

<div class="p-3">Padding en todos los lados</div>
<div class="py-2">Padding superior e inferior de 2</div>
<div class="px-4">Padding izquierdo y derecho de 4</div>

Alineación

Las clases de alineación permiten alinear texto y elementos de manera sencilla.

  • text-left: Alineación a la izquierda
  • text-center: Alineación al centro
  • text-right: Alineación a la derecha
  • text-justify: Justificación del texto
<p class="text-center">Texto centrado</p>
<p class="text-right">Texto alineado a la derecha</p>

Alineación de elementos flexibles (utilizando Flexbox):

  • align-items-start: Alinear al inicio
  • align-items-center: Alinear al centro
  • align-items-end: Alinear al final
  • justify-content-between: Espacio entre elementos
<div class="d-flex justify-content-between">
  <div>Elemento 1</div>
  <div>Elemento 2</div>
</div>

Colores de fondo

Puedes aplicar colores de fondo a los elementos utilizando las clases predefinidas de Bootstrap.

Clases de fondo: bg-{color}

  • Colores disponibles: primary, secondary, success, danger, warning, info, light, dark, white, y transparent.
<div class="bg-primary text-white">Fondo azul</div>
<div class="bg-danger text-white">Fondo rojo</div>
<div class="bg-light text-dark">Fondo claro</div>

Tipografía y textos

Bootstrap ofrece varias clases para ajustar la tipografía y el estilo del texto.

Títulos

  • Utiliza las clases de título para estilos predefinidos.
<h1 class="display-1">Título grande</h1>
<h2 class="display-2">Título mediano</h2>
<h3 class="display-3">Título pequeño</h3>

Alineación de texto

Además de la alineación de texto, puedes aplicar otras clases de formato.

<p class="text-center">Texto centrado</p>
<p class="text-right">Texto alineado a la derecha</p>

Colores de texto

Clases de texto: text-{color}

  • Colores disponibles: primary, secondary, success, danger, warning, info, light, dark, muted, white.
<p class="text-primary">Texto primario</p>
<p class="text-danger">Texto en rojo</p>
<p class="text-muted">Texto atenuado</p>

Cambio de fuente

Bootstrap ofrece clases para cambiar el estilo de fuente.

  • font-weight-bold: Negrita
  • font-weight-light: Ligera
  • font-italic: Cursiva
  • font-monospace: Fuente monospace
<p class="font-weight-bold">Texto en negrita</p>
<p class="font-italic">Texto en cursiva</p>
<p class="font-monospace">Texto con fuente monospace</p>

Visibilidad

Controla la visibilidad de elementos en diferentes tamaños de pantalla.

Clases de visibilidad: d-{breakpoint}-{value}

  • d-none: Oculta el elemento
  • d-block: Muestra el elemento como bloque
  • d-inline: Muestra el elemento en línea
<div class="d-none d-md-block">Visible solo en pantallas medianas y superiores</div>

Bordes

Aplica clases para controlar el estilo de los bordes.

border, border-{color}, rounded, rounded-{size}

<div class="border border-primary rounded">Div con borde azul y esquinas redondeadas</div>

Sombras

Agrega sombras a los elementos para mayor profundidad.

shadow, shadow-sm, shadow-lg

<div class="shadow">Div con sombra normal</div>
<div class="shadow-lg">Div con sombra grande</div>

Tablas y listas

Tablas

Tabla con estilo predeterminado

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Nombre</th>
      <th scope="col">Correo</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Juan</td>
      <td>juan@example.com</td>
    </tr>
  </tbody>
</table>

Tabla con colores y rayas

<table class="table table-striped table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>Producto</th>
      <th>Precio</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Producto A</td>
      <td>$50</td>
    </tr>
  </tbody>
</table>

Listas

Lista en línea

<ul class="list-inline">
  <li class="list-inline-item">Elemento 1</li>
  <li class="list-inline-item">Elemento 2</li>
  <li class="list-inline-item">Elemento 3</li>
</ul>

Lista con grupo

<ul class="list-group">
  <li class="list-group-item">Elemento 1</li>
  <li class="list-group-item">Elemento 2</li>
  <li class="list-group-item">Elemento 3</li>
</ul>

Componentes comunes

Botones

Botones con diferentes estilos

Los botones en Bootstrap tienen clases predeterminadas para colores y tamaños.

<button class="btn btn-primary">Primario</button>
<button class="btn btn-secondary">Secundario</button>
<button class="btn btn-success">Éxito</button>
<button class="btn btn-danger">Peligro</button>

Botones con tamaños

<button class="btn btn-primary btn-lg">Grande</button>
<button class="btn btn-primary btn-sm">Pequeño</button>

Botones con iconos (usando Font Awesome o similar)

<button class="btn btn-primary">
  <i class="fas fa-download"></i> Descargar
</button>

Formularios

Formulario básico

Los formularios en Bootstrap son fácilmente estilizados.

<form>
  <div class="mb-3">
    <label for="email" class="form-label">Correo electrónico</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="mb-3">
    <label for="password" class="form-label">Contraseña</label>
    <input type="password" class="form-control" id="password">
  </div>
  <button type="submit" class="btn btn-primary">Enviar</button>
</form>

Formulario inline

<form class="row row-cols-lg-auto g-3 align-items-center">
  <input class="form-control" type="email" placeholder="Email">
  <button class="btn btn-primary" type="submit">Suscribirse</button>
</form>

Tarjetas (Cards)

Tarjeta básica

<div class="card" style="width: 18rem;">
  <img src="imagen.jpg" class="card-img-top" alt="Imagen">
  <div class="card-body">
    <h5 class="card-title">Título de la tarjeta</h5>
    <p class="card-text">Descripción breve de la tarjeta.</p>
    <a href="#" class="btn btn-primary">Ir a algún lado</a>
  </div>
</div>

Tarjeta con lista de grupo

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Título de la tarjeta</h5>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Elemento 1</li>
    <li class="list-group-item">Elemento 2</li>
    <li class="list-group-item">Elemento 3</li>
  </ul>
</div>

Barra de navegación básica

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" href="#">Inicio</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Enlace</a>
      </li>
    </ul>
  </div>
</nav>

Barra de navegación con botón

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <form class="form-inline">
    <button class="btn btn-outline-success" type="button">Acción</button>
  </form>
</nav>

Modales

Modal básico

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#miModal">
  Abrir Modal
</button>

<div class="modal fade" id="miModal" tabindex="-1" aria-labelledby="miModalLabel" aria-hidden

="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="miModalLabel">Título del modal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Contenido del modal.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
        <button type="button" class="btn btn-primary">Guardar cambios</button>
      </div>
    </div>
  </div>
</div>

En esta página