To center a modal using Bootstrap, you can refer to the example on the Bootstrap documentation that demonstrates how to style the modal to appear in the middle of the screen: http://getbootstrap.com/docs/4.1/components/modal/#vertically-centered.
If you wish to customize the appearance of the modal to display it at the bottom right corner of the screen instead, you can apply custom styles.
HTML Structure
<header>
<nav></nav>
</header>
<main></main>
<footer></footer>
<button id="support-modal-launcher" data-toggle="modal" data-target="#support-modal">
Support
</button>
<!-- Modal -->
<div class="modal fade" id="support-modal"></div>
CSS Styles
body {
position: relative;
}
footer {
padding: 2rem 0;
margin-top: 3rem;
}
#support-modal-launcher {
position: fixed;
bottom: 2rem;
right: 2.5rem;
}
#support-modal .modal-dialog {
margin-right: 1rem;
display: flex;
align-items: flex-end;
height: calc(100vh - (1.75rem * 2));
}
Check out the demo on jsfiddle: http://jsfiddle.net/aq9Laaew/125639/
If you aim to recreate a design similar to websites like , , , and , you will need to invest time in creating your own unique style.