How to set a bootstrap modal to the center of the screen using css ?
552
1
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
.modal {
text-align: center;
padding: 0!important;
}
.modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px;
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
By 10 years ago
The power of the user (%)
The most helpful CSS solutions
How to set bootstrap popover borders in css ?CSS
Click to see more ...
1.7K
91
animate using cssCSS
Click to see more ...
1.6K
83
How to create a cylinder using css ?CSS
Click to see more ...
2.4K
79
How set border bottom using css ?CSS
Click to see more ...
1.6K
69
How to set the starting position of a background image using css ?CSS
Click to see more ...
1.1K
48
center a fixed element on the pageCSS
Click to see more ...
1.2K
48
css style browser scrollbarCSS
Click to see more ...
1K
39
How to overline text using css ?CSS
Click to see more ...
838
32
How to underline text using css ?CSS
Click to see more ...
801
26
How to set the cursor pointer of an element using css ?CSS
Click to see more ...
847
26
- Related solutions:
- How to set width of bootstrap container using css ?
508 2 - How to set bootstrap popover borders in css ?
1.7K 91 -
Vote
4
- Latest solutions:
- Popup with pure CSS
1.1K 3 - How to create a table using css ?
704 4 - How to make the rotating element in css ?
741 4 - How set border top using css ?
656 3 - How to create a cylinder using css ?
2.4K 79 - How to specify the painting area of the background using css ...
934 21 - How to set the background image of html element using css ?
703 8 - style the elements using css
886 18 - How use clear in css ?
669 3 - create blinking/flashing text with CSS
709 4 - Helpful solutions:
- How to set bootstrap popover borders in css ?
1.7K 91 - animate using css
1.6K 83 - How to create a cylinder using css ?
2.4K 79 - How set border bottom using css ?
1.6K 69 - How to set the starting position of a background image using ...
1.1K 48 - center a fixed element on the page
1.2K 48 - css style browser scrollbar
1K 39 - How to overline text using css ?
838 32 - How to underline text using css ?
801 26 - How to set the cursor pointer of an element using css ?
847 26
CSS
Would you like to receive an e-mail notification when new CSS solution is created?