Bootstrap Modals

Default Variation

Modals are completely customizable and here we present the default one the block based one

Size: Small

If you don’t have much content, you can use the small size variation

Size: Large

If you need more space you can use the large size variation

Size: Extra Large

If you need even more space you can use the extra large size variation

Position: Top

You can position your modals at the top of the screen

Position: Vertically Centered

You can center your modals in the middle of the screen

Bootstrap Modals Animations

Fade In

The default modal animation

Pop In

Poping in animation

Pop Out

Poping out animation

Slide Up

Sliding from up animation

Slide Right

Sliding from right animation

Slide Left

Sliding from left animation

From Right

Coming from right with rotation animation

From Left

Coming from left with rotation animation

Bootstrap Modals JavaScript


There are various methods you can use to handle the modals

Show Modal


Hide Modal


Toggle Modal



There are various events you can use to handle custom JS code. For example, initialize a plugin when a modal is shown

When the modal is shown

jQuery('#modal-id').on('', function (e) { // do something... })

When the modal is hidden

jQuery('#modal-id').on('', function (e) { // do something... })