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

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

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

Removing the Fade In/Fade Out Effect

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

View Output