Bootstrap y sus clases más utilizadas

1. ¿Qué es Bootstrap?

Bootstrap es un framework de CSS que proporciona clases predefinidas para diseñar interfaces sin tener que escribir todos los estilos desde cero.

Por ejemplo, en lugar de crear un botón y escribir su CSS, puedes utilizar:

<button class="btn btn-primary">
  Guardar
</button>

2. Contenedores y distribución

Bootstrap utiliza un sistema de filas y columnas para organizar el contenido de una página.

Clase	Función
container	Contenedor con ancho máximo adaptable según el dispositivo.
container-fluid	Contenedor que ocupa todo el ancho disponible.
row	Crea una fila para organizar columnas.
col	Crea una columna que comparte el espacio disponible.
col-6	Ocupa 6 de las 12 columnas, es decir, el 50 %.
col-12	Ocupa todo el ancho de la fila.
g-3	Agrega separación entre columnas y filas del sistema grid.

Ejemplo

<div class="container">
  <div class="row g-3">
    <div class="col-12 col-md-6">
      <div class="p-3 border">Columna 1</div>
    </div>

    <div class="col-12 col-md-6">
      <div class="p-3 border">Columna 2</div>
    </div>
  </div>
</div>

En este ejemplo:

• col-12: ocupa todo el ancho en pantallas pequeñas.
• col-md-6: desde el punto de quiebre md, cada columna ocupa la mitad.
• p-3: agrega espacio interior.
• border: agrega un borde.
• g-3: separa las columnas.

3. Diseño responsive

Bootstrap permite cambiar el diseño dependiendo del ancho de la pantalla.

Prefijo	Ancho mínimo
col-	Sin punto de quiebre
col-sm-	576 px
col-md-	768 px
col-lg-	992 px
col-xl-	1200 px
col-xxl-	1400 px

Ejemplo:

<div class="col-12 col-md-6 col-lg-4">
  Contenido
</div>

Esto significa:

• En pantallas pequeñas: 12 de 12 columnas.
• Desde md: 6 de 12 columnas.
• Desde lg: 4 de 12 columnas.

4. Márgenes y espaciado

Bootstrap ofrece clases para agregar márgenes y espacio interior sin escribir CSS manualmente.

La estructura general es:

{propiedad}{lados}-{tamaño}

Propiedades y lados

Clase	Significado
m	Margen exterior.
p	Espaciado interior (padding).
mt-	Margen superior.
mb-	Margen inferior.
ms-	Margen al inicio del elemento.
me-	Margen al final del elemento.
mx-	Margen horizontal.
my-	Margen vertical.
px-	Espaciado interior horizontal.
py-	Espaciado interior vertical.

Los tamaños habituales van de 0 a 5; también existen auto para ciertos márgenes.

<div class="mt-3 mb-4 px-2 py-3">
  Contenido con espaciado
</div>

• mt-3: margen superior.
• mb-4: margen inferior.
• px-2: espacio interior horizontal.
• py-3: espacio interior vertical.

5. Texto y colores

Clase	Función
text-primary	Texto con el color principal.
text-success	Texto asociado al éxito.
text-danger	Texto asociado a errores o peligro.
text-warning	Texto de advertencia.
text-muted	Texto secundario o atenuado.
text-center	Centra el texto.
text-start	Alinea el texto al inicio.
text-end	Alinea el texto al final.
fw-bold	Texto en negrita.
fw-normal	Peso de fuente normal.
fs-1 a fs-6	Tamaños de texto predefinidos.

Ejemplo:

<h2 class="text-primary fw-bold">
  Inventario
</h2>

<p class="text-muted text-center">
  Consulta los productos registrados.
</p>

6. Botones

La clase btn es la base de los botones de Bootstrap.

Clase	Apariencia o propósito
btn	Estilos base del botón.
btn-primary	Acción principal.
btn-secondary	Acción secundaria.
btn-success	Acción positiva.
btn-danger	Acción destructiva.
btn-warning	Advertencia.
btn-outline-primary	Botón con borde y estilo principal.
btn-sm	Botón pequeño.
btn-lg	Botón grande.
w-100	Ancho del 100 %.

Ejemplo:

<button class="btn btn-primary">
  Guardar
</button>

<button class="btn btn-outline-secondary btn-sm">
  Cancelar
</button>

<button class="btn btn-danger w-100">
  Eliminar
</button>

7. Formularios

Bootstrap facilita el diseño de campos de entrada, selectores y otros controles.

Clase	Función
form-label	Estiliza la etiqueta de un campo.
form-control	Estiliza campos como input y textarea.
form-select	Estiliza un elemento select.
form-check	Contenedor para checkbox o radio.
form-check-input	Estiliza el checkbox o radio.
form-check-label	Estiliza la etiqueta correspondiente.

Ejemplo:

<div class="mb-3">
  <label for="nombre" class="form-label">
    Nombre del producto
  </label>

  <input
    type="text"
    id="nombre"
    class="form-control"
    placeholder="Ingrese el nombre"
  >
</div>

<div class="mb-3">
  <label for="categoria" class="form-label">
    Categoría
  </label>

  <select id="categoria" class="form-select">
    <option value="">Seleccione una categoría</option>
    <option value="1">Accesorios</option>
    <option value="2">Repuestos</option>
  </select>
</div>

8. Tablas

Bootstrap también ofrece clases para dar formato a las tablas HTML.

Clase	Función
table	Estilo base de la tabla.
table-striped	Alterna el fondo de las filas.
table-bordered	Agrega bordes a las celdas.
table-hover	Resalta una fila al pasar el cursor.
table-sm	Reduce el espaciado de las celdas.
table-responsive	Permite desplazamiento horizontal cuando la tabla no cabe.

Ejemplo:

<div class="table-responsive">
  <table class="table table-striped table-hover">
    <thead>
      <tr>
        <th>Producto</th>
        <th>Precio</th>
        <th>Existencia</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Teclado</td>
        <td>15000</td>
        <td>10</td>
      </tr>
    </tbody>
  </table>
</div>

Importante: table-responsive debe colocarse en un contenedor alrededor de la tabla para que el desplazamiento horizontal funcione correctamente.

9. Flexbox y alineación

Bootstrap incluye clases basadas en Flexbox para organizar elementos.

Clase	Función
d-flex	Activa Flexbox.
flex-column	Organiza elementos verticalmente.
flex-row	Organiza elementos horizontalmente.
justify-content-between	Distribuye elementos dejando espacio entre ellos.
justify-content-center	Centra elementos en el eje principal.
align-items-center	Alinea elementos en el eje transversal.
flex-wrap	Permite que los elementos pasen a otra línea.
gap-2	Agrega separación entre elementos flexibles o de grid.

Ejemplo:

<div class="d-flex justify-content-between align-items-center gap-2">
  <h2 class="mb-0">Productos</h2>
  <button class="btn btn-primary">Nuevo</button>
</div>

Esto permite colocar el título a la izquierda y el botón a la derecha, alineados verticalmente.

10. Tarjetas y visibilidad

Clase	Función
card	Define una tarjeta.
card-body	Contenido interno de la tarjeta.
card-title	Título de la tarjeta.
card-text	Texto de la tarjeta.
d-none	Oculta un elemento.
d-block	Muestra un elemento como bloque.
d-inline	Muestra un elemento en línea.
d-md-none	Oculta el elemento desde el punto de quiebre md en adelante.
d-none d-md-block	Oculta el elemento en pantallas pequeñas y lo muestra desde md.

Ejemplo:

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Teclado</h5>
    <p class="card-text">Precio: ₡15000</p>
    <button class="btn btn-primary">Ver detalles</button>
  </div>
</div>

11. Las clases que más conviene memorizar

Si estás comenzando, prioriza estas:

Necesidad	Clases
Organizar una página	container, row, col
Adaptar a pantallas	col-12, col-md-6, col-lg-4
Agregar espacio	mt-3, mb-3, p-3, gap-2
Alinear elementos	d-flex, justify-content-between, align-items-center
Crear botones	btn, btn-primary, btn-danger
Diseñar formularios	form-label, form-control, form-select
Diseñar tablas	table, table-striped, table-hover, table-responsive
Diseñar tarjetas	card, card-body, card-title
Estilizar texto	text-center, text-muted, fw-bold

Consejo: no necesitas memorizar todas las clases de Bootstrap. Aprende cómo se construyen sus nombres y consulta la documentación cuando necesites algo específico.