Bootstrap 5.3 - Demonstrations

Exploring Bootstrap 5.3 Features

This page demonstrates the main components and features of Bootstrap 5.3, including new characteristics and improvements over the previous version.

Colors and Themes

Theme Colors
Primary Secondary Success Danger Warning Info Light Dark

Default Bootstrap 5.3 colors with optimized background and text classes.

Gradient Colors
Primary Success Danger Info

New gradient options available in Bootstrap 5.3.

Buttons

Basic Buttons
Outline Buttons
Sizes
Disabled Buttons

Cards

Card image
Basic Card

This is a basic card with image, title, text and button.

Learn more
Card with Header and Footer
Centered Card

This card is centered with text classes.

Action
2 minutes ago
Card with List

This card includes a list of items.

  • First list item
  • Second list item
  • Third list item
Link 1 Link 2

Forms

Basic Form
We'll never share your email with anyone else.
Floating Labels

Modals

Alerts

Progress Bars

25%
50%
75%
100%

Badges and Pills

Basic Badges
Primary Secondary Success Danger Warning Info Light Dark
Pill Badges (Rounded)
Primary Secondary Success Danger Warning Info Light Dark
Badges in Headings

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Spinners (Loading)

Toasts (Notifications)

Accordion

This is the content of the first accordion item. You can add any content here, including text, images, forms and other components.

This is the content of the second item. Accordions are great for organizing content in expandable sections.

This is the third and last accordion item. Bootstrap 5.3 improved accessibility and keyboard navigation in these components.

Carousel

Offcanvas

Offcanvas

This is a Bootstrap 5.3 offcanvas component. It's perfect for navigation menus, filters and contextual content that should appear from the side.

Placeholders (Loading)

Ratio (Aspect)

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

Utilities

Spacing
p-3
pt-3 pb-1 px-2
m-3
mt-2 mb-4 ms-3 me-1
Sizing
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
Text

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)

Migration Conclusion

The migration to Bootstrap 5.3 was completed successfully! Below are the main benefits and improvements:

  • ✅ Better performance and CSS optimization
  • ✅ Removed jQuery dependency for Bootstrap components
  • ✅ New utility classes and improved components
  • ✅ Better accessibility and modern browser support
  • ✅ More flexible color and theme system
Back to Home Page