Bootstrap 5.3 - Demostraciones

Explorando las Características de Bootstrap 5.3

Esta página demuestra los componentes principales y funcionalidades de Bootstrap 5.3, incluyendo nuevas características y mejoras sobre la versión anterior.

Colores y Temas

Colores del Tema
Primary Secondary Success Danger Warning Info Light Dark

Colores predeterminados de Bootstrap 5.3 con clases de fondo y texto optimizadas.

Colores Gradientes
Primary Success Danger Info

Nuevas opciones de gradientes disponibles en Bootstrap 5.3.

Botones

Botones Básicos
Botones Outline
Tamaños
Botones Deshabilitados

Cards

Card image
Card Básico

Este es un card básico con imagen, título, texto y botón.

Ver más
Card con Header y Footer
Card Centrado

Este card está centrado con clases de texto.

Acción
Hace 2 minutos
Card con Lista

Este card incluye una lista de elementos.

  • Primer elemento de la lista
  • Segundo elemento de la lista
  • Tercer elemento de la lista
Enlace 1 Enlace 2

Formularios

Formulario Básico
Nunca compartiremos tu email con nadie más.
Labels Flotantes

Modals

Alertas

Barras de Progreso

25%
50%
75%
100%

Badges y Pills

Badges Básicos
Primary Secondary Success Danger Warning Info Light Dark
Badges Pills (Redondeados)
Primary Secondary Success Danger Warning Info Light Dark
Badges en Títulos

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Spinners (Carga)

Toasts (Notificaciones)

Accordion

Este es el contenido del primer elemento del accordion. Puedes agregar cualquier contenido aquí, incluyendo texto, imágenes, formularios y otros componentes.

Este es el contenido del segundo elemento. Los accordions son geniales para organizar contenido en secciones expandibles.

Este es el tercer y último elemento del accordion. Bootstrap 5.3 mejoró la accesibilidad y la navegación por teclado en estos componentes.

Carousel

Offcanvas

Offcanvas

Este es un componente offcanvas de Bootstrap 5.3. Es perfecto para menús de navegación, filtros y contenido contextual que debería aparecer lateralmente.

Placeholders (Carga)

Ratio (Proporción)

16:9 ratio
16:9
4:3 ratio
4:3
1:1 ratio
1:1

Utilidades

Espaciado
p-3
pt-3 pb-1 px-2
m-3
mt-2 mb-4 ms-3 me-1
Dimensionamiento
w-25
w-50
w-75
w-100
Display
d-block
d-inline-block
d-inline
d-none (invisível)
Flexbox
Flex item 1
Flex item 2
Flex item 3
Texto

Texto alinhado à esquerda (text-start)

Texto centralizado (text-center)

Texto alinhado à direita (text-end)

TEXTO EM MINÚSCULAS (text-lowercase)

texto em maiúsculas (text-uppercase)

texto com capitalização (text-capitalize)

Texto em negrito (fw-bold)

Texto em itálico (fst-italic)

Conclusión de la Migración

¡La migración a Bootstrap 5.3 se completó con éxito! Abaixo están los principales beneficios y mejoras:

  • ✅ Mejor rendimiento y optimización de CSS
  • ✅ Eliminada la dependencia de jQuery para componentes Bootstrap
  • ✅ Nuevas clases de utilidad y componentes mejorados
  • ✅ Mejor accesibilidad y soporte para navegadores modernos
  • ✅ Sistema de colores y temas más flexible
Volver a la Página Principal