Bootstrap 5.3 - Demonstrações

Explorando os recursos do Bootstrap 5.3

Esta página demonstra os principais componentes e funcionalidades do Bootstrap 5.3, incluindo as novas características e melhorias em relação à versão anterior.

Cores e Temas

Cores do Tema
Primary Secondary Success Danger Warning Info Light Dark

Cores padrão do Bootstrap 5.3 com classes de fundo e texto otimizadas.

Cores Gradientes
Primary Success Danger Info

Novas opções de gradientes disponíveis no Bootstrap 5.3.

Botões

Botões Básicos
Botões Outline
Tamanhos
Botões Desabilitados

Cards

Card image
Card Básico

Este é um card básico com imagem, título, texto e botão.

Ver mais
Card com Header e Footer
Card Centralizado

Este card está centralizado com classes de texto.

Ação
Há 2 minutos
Card com Lista

Este card inclui uma lista de itens.

  • Primeiro item da lista
  • Segundo item da lista
  • Terceiro item da lista
Link 1 Link 2

Formulários

Formulário Básico
Nunca compartilharemos seu email com terceiros.
Labels Flutuantes

Modals

Alerts

Barras de Progresso

25%
50%
75%
100%

Badges e Pills

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

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Spinners (Carregamento)

Toasts (Notificações)

Accordion

Este é o conteúdo do primeiro item do accordion. Você pode adicionar qualquer conteúdo aqui, incluindo texto, imagens, formulários e outros componentes.

Este é o conteúdo do segundo item. Os accordions são ótimos para organizar conteúdo em seções expansíveis.

Este é o terceiro e último item do accordion. Bootstrap 5.3 melhorou a acessibilidade e a navegação por teclado nestes componentes.

Carousel

Offcanvas

Offcanvas

Este é um componente offcanvas do Bootstrap 5.3. Ele é perfeito para menus de navegação, filtros e conteúdo contextual que deve aparecer lateralmente.

Placeholders (Carregamento)

Ratio (Proporção)

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

Utilitários

Espaçamento
p-3
pt-3 pb-1 px-2
m-3
mt-2 mb-4 ms-3 me-1
Dimensionamento
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)

Conclusão da Migração

A migração para Bootstrap 5.3 foi concluída com sucesso! Abaixo estão os principais benefícios e melhorias:

  • ✅ Melhor performance e otimização de CSS
  • ✅ Remoção da dependência do jQuery para componentes Bootstrap
  • ✅ Novas classes de utilitário e componentes melhorados
  • ✅ Melhor acessibilidade e suporte a navegadores modernos
  • ✅ Sistema de cores e temas mais flexível
Voltar para Página Inicial