Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/marvinalban30/CSS3-avanzado-y-Bootstrap-5/llms.txt

Use this file to discover all available pages before exploring further.

Las clases utilitarias de Bootstrap 5 son clases de propósito único que aplican una sola propiedad CSS de forma directa en el HTML, sin necesidad de escribir reglas adicionales en una hoja de estilos. En Licorería Santo Pecado se usan extensamente para controlar el espaciado entre secciones, los colores de fondo y texto, la alineación de elementos y el comportamiento responsivo de las imágenes. Gracias a ellas, el layout se construye de manera declarativa y consistente a lo largo de todo el proyecto.
Las clases utilitarias de Bootstrap 5 siguen una convención sistemática: {propiedad}{lado}-{tamaño}. Por ejemplo, mt-3 = margin-top, tamaño 3 = 1rem. Esta lógica aplica a todas las propiedades de espaciado (m, p) con sus lados (t, b, s, e, x, y) y tamaños del 0 al 5 (más auto).

​
Espaciado (Spacing)

Las clases de espaciado son las más usadas en el proyecto. Controlan márgenes y paddings sin necesidad de CSS personalizado.
ClasePropiedad CSSValorUso en el proyecto
p-5padding3remHeader principal (<header class="... p-5">)
py-5padding-top / padding-bottom3remMain container (<main class="container py-5">)
p-3padding1remCards de productos (<div class="card p-3">) y footer
mt-3margin-top1remTítulo del producto, formulario y card collapse
mt-5margin-top3remSecciones de contacto, promociones y footer
mb-3margin-bottom1remGrupos de campos del formulario
ms-automargin-leftautoAlinea los nav links a la derecha en la navbar
Ejemplo de cómo se encadenan varias clases de espaciado en el header y el footer del proyecto:
index.html
<header class="text-center text-white p-5 bg-dark">
  <h1>Licorería Santo Pecado</h1>
  <p>Tu tentación favorita en cada copa</p>
</header>

<footer class="text-center bg-light text-dark p-3 mt-5">
  <p>&copy; 2025 Licorería Santo Pecado</p>
  <a href="#">Facebook</a> | <a href="#">Instagram</a>
</footer>

​
Color y Fondo

Bootstrap 5 incluye utilidades para aplicar colores de fondo y de texto de forma semántica, asegurando contraste y coherencia visual.
ClaseUso en el proyecto
bg-darkFondo oscuro del <header>, la <nav> y la card de promociones
bg-lightFondo claro del <footer>
text-whiteTexto blanco en el header y en la card de promociones
text-darkTexto oscuro en el footer
text-warningColor dorado (#ffc107) en .navbar-brand “Santo Pecado”
text-centerCentrado de texto en el header y el footer
index.html
<header class="text-center text-white p-5 bg-dark">
  <h1>Licorería Santo Pecado</h1>
  <p>Tu tentación favorita en cada copa</p>
</header>
index.html
<div class="card card-body bg-dark text-white">
  ¡Este mes, en compras mayores a $50, recibe un shot gratis!
</div>
Aunque Bootstrap define text-warning como amarillo dorado, styles.css sobreescribe .navbar-brand con color: #ff0000 !important, de modo que en tiempo de ejecución el brand aparece en rojo en lugar del dorado original de Bootstrap.
styles.css
.navbar-brand {
  color: #ff0000 !important;
}

​
Display y Flex

Bootstrap 5 expone las propiedades de alineación flexbox como clases utilitarias, lo que permite controlar la distribución de elementos hijos sin escribir CSS.
index.html
<ul class="navbar-nav ms-auto">
  <li class="nav-item"><a class="nav-link" href="#productos">Productos</a></li>
  <li class="nav-item"><a class="nav-link" href="#contacto">Contacto</a></li>
</ul>
La clase ms-auto aplicada al <ul> dentro del contenedor flex de la navbar asigna margin-left: auto, lo que consume todo el espacio disponible a la izquierda y empuja los links de navegación hacia el extremo derecho de la barra. Este patrón es idiomático en Bootstrap para alinear grupos de elementos en un contenedor flex sin usar justify-content.

​
Imagen Responsiva

Las imágenes de los productos utilizan dos clases utilitarias de Bootstrap para integrarse correctamente en el layout responsive:
index.html
<img src="assets/img/imagen1.jpg"
     class="img-fluid card-img-top"
     alt="Producto 1">
  • img-fluid — aplica max-width: 100%; height: auto; a la imagen. Esto garantiza que la imagen nunca desborde su contenedor y que su proporción se mantenga intacta al redimensionar la ventana.
  • card-img-top — redondea únicamente las esquinas superiores de la imagen (border-top-left-radius y border-top-right-radius) para que encaje visualmente con el borde del componente card que la contiene.
Estas dos clases trabajan juntas para que cada imagen del catálogo sea completamente responsiva y esté visualmente integrada con el card que la envuelve.

Build docs developers (and LLMs) love

Get started for freeTalk to us