Bootstrap 5 Migrate Tool

Components

Alerts

Holy guacamole! You should check in on some of those fields below.

Badges

Primary Secondary Success Danger Warning Info Light Dark

Primary Secondary Success Danger Warning Info Light Dark

Carousel

First Slide

Second Slide

Third Slide

Collapse

Link with href

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.

Forms

Default checkbox

Disabled checkbox

Default radio

Second default radio

Disabled radio

Custom forms

Check this custom checkbox

Toggle this custom radio

Or toggle this other custom radio

Toggle this switch element

Disabled switch element

Example Custom range

Choose file

Input Group

@example.com

Popovers

Spinners

Toasts

Hello, world! This is a toast message.

Tooltips

Utilities

Border

Additive

Subtractive

Border Radius

Clearfix

Close Button

Float

Float right

Float right on viewports sized SM (small) or wider

Float right on viewports sized MD (medium) or wider

Float right on viewports sized LG (large) or wider

Float right on viewports sized XL (extra-large) or wider

Screen readers

Spacing

ml-1

ml-2

ml-3

ml-4

ml-5

ml-n1

ml-sm-n2

ml-md-n3

ml-lg-n4

ml-xl-n5

Note: Negative margins are not included in the compiled Bootstrap 5.x CSS by default

pl-1

pl-2

pl-3

pl-4

pl-5

Text

Left aligned text on all viewport sizes.

Right aligned text on all viewport sizes.

Left aligned text on viewports sized SM (small) or wider.

Left aligned text on viewports sized MD (medium) or wider.

Left aligned text on viewports sized LG (large) or wider.

Left aligned text on viewports sized XL (extra-large) or wider.

Right aligned text on viewports sized SM (small) or wider.

Right aligned text on viewports sized MD (medium) or wider.

Right aligned text on viewports sized LG (large) or wider.

Right aligned text on viewports sized XL (extra-large) or wider.

Bold text.

Bolder weight text (relative to the parent element).

Normal weight text.

Light weight text.

Lighter weight text (relative to the parent element).

Italic text.

This is in monospace

Visibility

visible

invisible

Embed

Deprecated components / Utilities

Jumbotron

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

It uses utility classes for typography and spacing to space content out within the larger container.

Learn more

Fluid jumbotron

This is a modified jumbotron that occupies the entire horizontal space of its parent.

Media

Media heading

Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.