#herramientasbootstrap5

[fernando-arciniega]

Las 100 clases más usadas para personalizar el diseño en Bootstrap

Bootstrap es una herramienta esencial para el diseño web moderno. Su amplia variedad de clases permite a los desarrolladores personalizar rápidamente el diseño y la funcionalidad de sus proyectos. En esta entrada, exploraremos las 100 clases más usadas en Bootstrap, organizadas por categorías para facilitar su comprensión y aplicación. 1. Clases de Espaciado (Margin y Padding) - .m-0 - Margen en todos los lados igual a 0. - .mt-3 - Margen superior de tamaño 3. - .mb-4 - Margen inferior de tamaño 4. - .ms-auto - Margen izquierdo automático. - .me-2 - Margen derecho de tamaño 2. - .p-0 - Sin padding en todos los lados. - .pt-5 - Padding superior de tamaño 5. - .pb-3 - Padding inferior de tamaño 3. - .ps-1 - Padding izquierdo de tamaño 1. - .pe-auto - Padding derecho automático. 2. Clases de Tipografía - .text-center - Texto centrado. - .text-start - Texto alineado a la izquierda. - .text-end - Texto alineado a la derecha. - .text-muted - Texto con estilo deshabilitado. - .fw-bold - Texto en negrita. - .fw-light - Texto con fuente más ligera. - .fst-italic - Texto en cursiva. - .text-uppercase - Texto en mayúsculas. - .text-decoration-underline - Subrayado en texto. - .text-truncate - Recorte de texto largo con puntos suspensivos. 3. Clases de Color - .bg-primary - Fondo azul (color principal). - .bg-secondary - Fondo gris oscuro (color secundario). - .bg-success - Fondo verde. - .bg-danger - Fondo rojo. - .bg-warning - Fondo amarillo. - .bg-info - Fondo azul claro. - .bg-light - Fondo blanco con sombra. - .bg-dark - Fondo negro. - .text-primary - Texto azul. - .text-danger - Texto rojo. 4. Clases de Tamaño de Componentes - .w-50 - Ancho del 50%. - .w-auto - Ancho automático. - .h-100 - Altura del 100%. - .h-auto - Altura automática. - .img-fluid - Imágenes responsivas. - .col-6 - Ocupa la mitad de la fila en un grid. - .col-md-4 - Ocupa un tercio de la fila en pantallas medianas. - .display-1 - Tamaño de fuente más grande. - .display-4 - Tamaño de fuente más pequeño. - .fs-6 - Tamaño de fuente pequeño. 5. Clases de Flexbox y Alineación - .d-flex - Elemento como flexbox. - .justify-content-center - Centrar elementos horizontalmente. - .justify-content-between - Espaciado entre elementos. - .align-items-center - Alinear elementos verticalmente al centro. - .flex-column - Alinear elementos en columna. - .flex-row-reverse - Ordenar elementos de derecha a izquierda. - .order-1 - Orden de elementos (1). - .order-last - Último en el orden. - .gap-3 - Espaciado entre elementos flexibles. - .d-grid - Convertir en contenedor grid. 6. Clases de Botones - .btn-primary - Botón con color principal. - .btn-secondary - Botón con color secundario. - .btn-outline-primary - Botón con borde azul y sin relleno. - .btn-sm - Botón pequeño. - .btn-lg - Botón grande. - .btn-block - Botón de ancho completo (deprecated, pero aún usado). 7. Clases de Tablas - .table - Estilo básico para tablas. - .table-striped - Filas alternadas con colores. - .table-hover - Filas resaltadas al pasar el cursor. - .table-bordered - Bordes alrededor de la tabla y celdas. - .table-responsive - Tabla que se adapta a pantallas pequeñas. 8. Clases de Posicionamiento - .position-relative - Posicionamiento relativo. - .position-absolute - Posicionamiento absoluto. - .position-fixed - Elemento fijo en la pantalla. - .top-0 - Posiciona el elemento en la parte superior. - .start-50 - Centra horizontalmente desde el lado izquierdo. - .translate-middle - Centra completamente un elemento. 9. Clases de Iconos y Contenedores - .rounded - Bordes redondeados. - .rounded-circle - Forma circular. - .shadow-sm - Sombra ligera. - .shadow-lg - Sombra más pronunciada. - .container-fluid - Contenedor que ocupa el ancho completo. 10. Clases de Interacción - .disabled - Deshabilita elementos. - .active - Marca un elemento como activo. - .collapse - Clase para elementos que se colapsan (acordeón). - .show - Mostrar contenido colapsado. 11. Clases de Listas - .list-group - Lista con estilos de Bootstrap. - .list-group-item - Elemento de la lista. - .list-group-item-action - Elemento interactivo en listas. - .list-unstyled - Lista sin viñetas. 12. Clases de Utilidades para Pantallas - .d-none - Ocultar un elemento. - .d-md-block - Mostrar un elemento en pantallas medianas o mayores. - .d-lg-none - Ocultar un elemento en pantallas grandes. - .d-xl-inline - Mostrar como elemento en línea en pantallas grandes. 13. Clases de Navegación - .navbar - Barra de navegación. - .navbar-expand-lg - Expandir barra en pantallas grandes. - .navbar-light - Barra con colores claros. - .navbar-dark - Barra con colores oscuros. - .nav-link - Enlace de navegación. 14. Clases para Formularios - .form-control - Entrada de texto estilizada. - .form-select - Selector estilizado. - .form-check - Agrupación de casillas de verificación. - .input-group - Grupo de entradas con adornos. - .input-group-text - Texto dentro del grupo de entrada. 15. Clases de Animaciones - .fade - Efecto de desvanecimiento. - .modal - Para modales o ventanas emergentes. - .offcanvas - Panel lateral deslizante. - .carousel - Crear carruseles de imágenes. - .spinner-border - Animación de carga circular. - .spinner-grow - Animación de carga en expansión. Con esta lista, tendrás un panorama completo de las clases más usadas en Bootstrap para personalizar tus proyectos. Explora, experimenta y crea diseños únicos con estas herramientas, puedes ver más en el sitio oficial: https://getbootstrap.com/ Read the full article