Bootstrap 3 Modal Vertically Center

Bootstrap 3 Modal Vertically Center - Blog - ASTechnolabs
Bootstrap 3 Modal Vertically Center – Blog – ASTechnolabs

Most common Question around internet about bootstrap 3 is How to align Bootstrap modal vertically center.

By default, Bootstrap 3 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 CSS tricks.

Here is a simple CSS Code for making Bootstrap 3 popup vertically center.

.modal {
  text-align: center;
}

@media screen and (min-width: 768px) { 
  .modal:before {
    display: inline-block;
    vertical-align: middle;
    content: " ";
    height: 100%;
  }
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

Here is a HTML code for same. You can put your HTML code, this code is not necessary

<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>    

Final Code with CSS and HTML for Bootstrap 3 Modal popup Vertically Center

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vertical Center Alignment of Bootstrap Modal Popup</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.modal {
  text-align: center;
}
@media screen and (min-width: 768px) { 
  .modal:before {
    display: inline-block;
    vertical-align: middle;
    content: " ";
    height: 100%;
  }
}
.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

</style>
</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>

Related Searches to How to align Bootstrap modal vertically center

Add a Comment

Your email address will not be published. Required fields are marked *