Setting Boostsrap Modal Position on Center Display - Bootstrap component that is often used to interact with the user is Modal. Modals are streamlined, but flexible dialog prompts powered by JavaScript. They support a number of use cases from user notification to completely custom content and feature a handful of helpful subcomponents, sizes, and more.
The default view of Modal is the top center as shown below:
But sometimes this position is not as I wanted. So, If you want to change the position is just insert this css code to your <head> html.
<style type='text/css'> body.modal-open .modal { display: flex !important; height: 80%; } body.modal-open .modal .modal-dialog { margin: auto; } </style>
and then the result is like this:
Ok, thats all for the tutorial to Setting Boostsrap Modal Position on Center Display. Happy Coding...
Share this post
Setting Boostsrap Modal Position on Center Display
4/
5
Oleh
Nina Dee
Short Code, use <i rel="code"> ... the code ... </i>
long code, use <i rel="pre"> ... the code ... </i>
insert image, use <i rel="image"> ... image source(URL) ... </i>