Bootstrap 5 — Customize Modals

Image for post
Image for post
Photo by Louis Hansel @shotsoflouis on Unsplash

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to customize modals with JavaScript with Bootstrap 5.

Change Animation

We can change the animation with the $modal-fade-transform variable.

We just set it to the value we want.

To remove the animation, we remove the fade class from the modal markup:

Dynamic Heights

We can change the height dynamically with JavaScript by calling the myModal.handleUpdate() to change it.

Optional Sizes

We can change the size of the modal by applying a few classes.

.modal-sm makes it small.

.modal-lg makes it large.

.modal-xl makes it extra large.

So we can write:

to change the size of the modal by adding the modal-sm class in addition to the modal class.

Fullscreen Modal

We can make the modal full screen with a few classes.

.modal-fullscreen makes it always fullscreen.

.modal-fullscreen-sm-down makes it full screen if the screen is below 576px wide

.modal-fullscreen-md-down makes it full screen if the screen is below 768px wide.

.modal-fullscreem-lg-down makes it full screen if the screen is below 992px wide.

And .modal-fullscreen-xl-down makes it full screen if the screen is below 1200px wide.

We can make it always fullscreen by writing:

JavaScript

We can manipulate modals with JavaScript.

For instance, to show a modal with JavaScript, we can write:

given that we have the following modal:

We create the modal object with the bootstrap.Modal constructor.

Then we call the show method on the returned object to show the modal.

There’s also the hide method to hide modals.

handleUpdate readjusts the modal position automatically.

dispose destroys the modal.

getInstance gets the modal instance.

Events

show.bs.modal is emitted when the modal is showing.

shown.bs.modal is emitted when the modal is shown.

hide.bs.modal is emitted when the modal is hiding.

hidden.bs.modal is emitted when the modal is hidden.

hidePrevented.bs.modal is emitted when the modal is shown, its backdrop is static and ca click outside the modal or with the escape key is performed or data-keyboard is set to false .

Conclusion

We can use JavaScript to manipulate modals.

JavaScript In Plain English

Enjoyed this article? If so, get more similar content by subscribing to Decoded, our YouTube channel!

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store