Bootstrap 5

Bootstrap 5 Modal Dialog

The Bootstrap 5 modal dialog is a reusable UI component that provides consistent styling and behaviour. Bootstrap provides built-in classes that handle the modal dialog implementation, making it easy to add to any project without custom CSS.

Primary Class

.modal-dialog

Common Use Cases

→Adding modal dialog to a page layout
→Customising modal dialog with Bootstrap utility classes
→Responsive modal dialog variants
→Modal Dialog accessibility and best practices

Variants & Classes

Variant	Description	Classes
Modal Dialog Default	Standard modal dialog with Bootstrap's default styling.	`modal-dialog`
Modal Dialog Responsive	Responsive variant that adapts to different screen sizes.	`modal-dialog modal-dialog-responsive`

Code Example

<div class="modal-dialog">
  <!-- Modal Dialog content -->
</div>

Live Examples

Basic Modal Dialog

Example 1

Canvas Framework Variants

The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:

✓Canvas Builder generated modal dialog with custom colours
✓Modal Dialog with interactive states
✓Responsive modal dialog for all screen sizes

Best Practices

Use Bootstrap's built-in modal dialog classes

Bootstrap provides well-tested classes for modal dialog that work across all browsers. Start with Bootstrap's defaults and customise as needed.

Test responsiveness

Always test modal dialog across different screen sizes to ensure it behaves correctly on mobile, tablet, and desktop.

FAQ

How do I customise a Bootstrap 5 modal dialog?

Use Bootstrap's utility classes or add custom CSS. Canvas Builder can generate modal dialog with your brand colours automatically.

Is Modal Dialog accessible?

Bootstrap 5 modal dialog components are built with accessibility in mind. Add aria-* attributes where needed and test with screen readers.