How to center a bootstrap modal with specific size requirements

Question

I need my modal to take up 80% of the height and width of the screen. And it needs to be centered regardless of screen real estate (e.g. desktop or mobile).

I've tried the following, but as you can see, while width seems to work, the height doesn't. What am I missing?

P.S. The output on SO is difficult to look at. I recreated the example on jsfiddle.

body {
  text-align: center;
}

.modal-dialog {
  display: inline-block;
  vertical-align: middle;
  width: 80% !important;
  height: 80% !important;
}

.modal .modal-content {
  height: 100%;
  padding: 0px 20px 20px 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<body>
  
    <h1>Heading 1</h1>
    <p>heading 2</p>
    <a href="#signupModal" data-toggle="modal">Sign-Up</a>
  
    <div class="modal" id="signupModal"
         role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
  
        <div class="modal-dialog">
            <div class="modal-content">
  
                <!-- Modal root -->
                <div class="m-header">
                    <button class="close" data-dismiss="modal">×</button>
                    <h2 class="myModalLabel">Sign Up</h2>
                </div>
  
                <!-- Modal body -->
                <div class="inputs">
                
                    <!-- username input -->
                    <div class="form-group input-group">
                        <label for="username" class="sr-only">
                          Username
                        </label>
                        <span class="input-group-addon">
                          <i class="fa fa-user"></i>
                        </span>
                        <input type="text" class="form-control" 
                               id="username" placeholder="Username">
                    </div>
  
                    <!-- Email input -->
                    <div class="form-group input-group">
                        <span class="input-group-addon">
                          <i class="fa fa-envelope"></i>
                        </span>
                        <label for="email" class="sr-only">
                          Email
                        </label>
                        <input type="email" class="form-control" 
                               id="email" placeholder="Email Address">
                    </div>
                </div>
  
                <!-- Modal footer -->
                <div class="footer">
                    <button type="submit">Sign Up</button>
                </div>
  
            </div>
        </div>
    </div>
  
</body>

@TemaniAfif I updated the linked jsfiddle and your suggestion is a definite improvement, but it still doesn't center vertically. — AngryHacker, Oct 14 '21 at 20:53
now check the duplicate; it's a common situation of vertical alignment — Temani Afif, Oct 14 '21 at 20:56

How to center a bootstrap modal with specific size requirements

0 Answers0