Bootstrap modal height and width is not getting accurate - html

Question

I am using bootstrap modal but the problem is that the bootstrap modal is not properly aligned according to the forms. Please find the screenshot of
And here the code is :
.modal.fade .modal-header {
background-color: rgba(131, 72, 172, 0.8);
color: #FFF;
}
<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/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="modal fade " id="myModal" tabindex="-1" style="display:none;" role="dialog" aria-labelledby="myModal" aria-hidden="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only"></span></button>
<h4 class="modal-title" id="myModalLabel" align="center">Quick Enquiry</h4>
</div>
<div class="modal-body">
<p>Please fill up the form for Quick Enquiry.</p>
</div>
<div class="modal-body">
<div class="span12">
<form method="post" enctype="multipart/form-data" action="email_format.php">
<input type="text" style="width: 300px; height: 40px;" class="form-control" required name="name" value="" placeholder="Full Name">
<br>
<input type="email" id="reqDate" style="width: 300px; height: 40px;" class="form-control" name="email" placeholder="Email" required>
<br>
<input type="text" id="reqDate" style="width: 300px; height: 40px;" class="form-control" required name="website" placeholder="Website">
<br>
<input type="text" id="reqDate" style="width: 300px; height: 40px;" class="form-control" required name="phone" placeholder="Phone">
<br>
<input type="text" id="reqDate" style="width: 300px; height: 40px;" class="form-control" required name="msg" placeholder="Questions?">
</div>
<div class="col-md-6">
<p style="font-size:11px; line-height:20px;"> <input type="checkbox" checked /> I accept SEO_Faceup Terms & Conditions.</p>
</div>
<div class="modal-footer">
<button type="submit" name="questions" class="thm-btn b-inner font-8">Submit</button></div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
QUICK ENQUIRY</div>
And I tried to reduce the width of the modal by css using .modal { width: 350px; } but the popup is not coming in center.
Thanks in advance.

Answer 1

To answer your question directly, add style="width: 350px; margin: 0 auto;" to the .modal-body class. On a side note, i recommend that you use classes instead of inline styles.
.modal.fade .modal-header { background-color:rgba(131,72,172, 0.8); color:#FFF;}
<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/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="modal fade " id="myModal" tabindex="-1" style="display:none;" role="dialog" aria-labelledby="myModal" aria-hidden="false">
<div class="modal-dialog" style="width: 320px; margin: 0 auto;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only"></span></button>
<h4 class="modal-title" id="myModalLabel" align="center">Quick Enquiry</h4>
</div>
<div class="modal-body" style="width: 100%; margin: 0 auto;">
<p>Please fill up the form for Quick Enquiry.</p>
<div class="span12">
<form method="post" enctype="multipart/form-data" action="email_format.php">
<input type="text" style="height: 40px;" class="form-control" required name="name" value="" placeholder="Full Name">
<br>
<input type="email" id="reqDate" style="height: 40px;" class="form-control" name="email" placeholder="Email"required>
<br>
<input type="text" id="reqDate" style="height: 40px;" class="form-control" required name="website" placeholder="Website">
<br>
<input type="text" id="reqDate" style="height: 40px;" class="form-control" required name="phone" placeholder="Phone">
<br>
<input type="text" id="reqDate" style="height: 40px;" class="form-control" required name="msg" placeholder="Questions?">
</div>
<div class="col-md-6">
<p style="font-size:11px; line-height:20px;"> <input type="checkbox" checked /> I accept SEO_Faceup Terms & Conditions.</p>
</div>
<div class="modal-footer">
<button type="submit" name="questions" class="thm-btn b-inner font-8" >Submit</button></div>
</div>
</div>
</div>
</div></div>
</form>
</div>
QUICK ENQUIRY</div>

Answer 2

Try this, and remember HTML is your friend ;)
.modal.fade .modal-header {
background-color: rgba(131, 72, 172, 0.8);
color: #FFF;
}
<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/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="modal fade " id="myModal" tabindex="-1" style="display:none;" role="dialog" aria-labelledby="myModal" aria-hidden="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only"></span></button>
<h4 class="modal-title" id="myModalLabel" align="center">Quick Enquiry</h4>
</div>
<div class="modal-body">
<p><center>Please fill up the form for Quick Enquiry.</center></p>
</div>
<div class="modal-body">
<center>
<div class="span12">
<form method="post" enctype="multipart/form-data" action="email_format.php">
<input type="text" style="width: 300px; height: 40px;" class="form-control" required name="name" value="" placeholder="Full Name">
<br>
<input type="email" id="reqDate" style="width: 300px; height: 40px;" class="form-control" name="email" placeholder="Email" required>
<br>
<input type="text" id="reqDate" style="width: 300px; height: 40px;" class="form-control" required name="website" placeholder="Website">
<br>
<input type="text" id="reqDate" style="width: 300px; height: 40px;" class="form-control" required name="phone" placeholder="Phone">
<br>
<input type="text" id="reqDate" style="width: 300px; height: 40px;" class="form-control" required name="msg" placeholder="Questions?">
<center>
</div>
<div class="col-md-6">
<p style="font-size:11px; line-height:20px;"> <input type="checkbox" checked /> I accept SEO_Faceup Terms & Conditions.</p>
</div>
<div class="modal-footer">
<button type="submit" name="questions" class="thm-btn b-inner font-8">Submit</button></div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
QUICK ENQUIRY</div>