bootstrap tutorial - How to align Bootstrap modal vertically center - bootstrap examples - bootstrap templates - bootstrap 3

Answer: Use the CSS margin-top Property

By default, Bootstrap modal window is aligned to the top of page with some margin. But you can align it in the middle of the page vertically using a simple JavaScript trick as described in the example below. This solution will dynamically adjust the alignment of the modal and always keep it in the center of the page even if the user resizes the browser window.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Vertical Center Alignment of Bootstrap Modal Dialog - Wikitechy</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    function alignModal(){
        var modalDialog = $(this).find(".modal-dialog");
        /* Applying the top margin on modal dialog to align it vertically center */
        modalDialog.css("margin-top", Math.max(0, ($(window).height() - modalDialog.height()) / 2));
    }
    // Align modal when it is displayed
    $(".modal").on("shown.bs.modal", alignModal);
    
    // Align modal when user resize the window
    $(window).on("resize", function(){
        $(".modal:visible").each(alignModal);
    });   
});
</script>
</head>
<body>
    <!-- Button HTML (to Trigger Modal) -->
    <p><a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Launch Demo Modal</a></p>
    
    <!-- Modal HTML -->
    <div id="myModal" class="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">Confirmation</h4>
                </div>
                <div class="modal-body">
                    <p>Do you want to save changes you made to document before closing?</p>
                    <p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>    
</body>
</html>

click below button to copy the code. By - Bootstrap tutorial - team

The function alignModal() in the example above align the Bootstrap modal by simply applying the top margin on the .modal-dialog element when modal is shown to the user using the shown.bs.modal event. The value of the margin-top property is obtained by subtracting the height of modal dialog from the height of the browser window divided by 2.
Before applying the top margin we've passed the obtained value along with the 0 to JavaScript Math.max() function that returns the largest number from given numbers. This is necessary because if a user resize the browser window in such a way that the height of the browser window becomes lower than the modal height then the result of the margin calculation becomes negative in such situation Math.max() function return 0 and prevents from applying the negative margin. We're also calling the alignModal() function every time when browser window is resized so that it is always be in center of the page.

Bootstrap Button

Bootstrap Dropdown

Bootstrap Modal

Bootstrap Popover

Bootstrap Tooltip

Bootstrap Tabs