Bootstrap 3 Modal

The Bootstrap modal component allows you to add a stylized dialog box to your website.

Add a stylized dialog box to your website with the Bootstrap modal component.

Modals are created with the .modal class along with various other .modal-* classes to define each section of the modal.

View Output Full Screen Preview

Size

By default, Modals are medium sized. You can also make them small or large.

Small Modal

For a small modal, add the .modal-sm class to the .modal-dialog:

Due to the port-size for these examples, you might need to open this example in preview mode to see the proper effect.

View Output Full Screen Preview

Large Modal

For a large modal, add the .modal-lg class to the .modal-dialog:

Due to the port-size for these examples, you might need to open this example in preview mode to see the proper effect.

View Output Full Screen Preview

Removing the Fade In/Fade Out Effect

Remove the .fade class to get rid of the fade effect.

View Output Full Screen Preview