CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Piyush Seofaceup
Piyush Seofaceup

Reputation: 61

Bootstrap modal height and width is not getting accurate

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

Screenshot of the live website

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">&times;</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 />&nbsp; &nbsp; I accept <a href="terms.php" target="_blank">SEO_Faceup Terms & Conditions</a>.</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>


<a href="#" data-toggle="modal" data-target="#myModal" style="text-decoration:none">QUICK ENQUIRY</a></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.

Upvotes: 2

Views: 1155

Answers (2)

artiom
artiom

Reputation: 48

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">&times;</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 />&nbsp; &nbsp; I accept <a href="terms.php" target="_blank">SEO_Faceup Terms & Conditions</a>.</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>


<a href="#" data-toggle="modal" data-target="#myModal" style="text-decoration:none">QUICK ENQUIRY</a></div>

Upvotes: 0

clodal
clodal

Reputation: 1825

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">&times;</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 />&nbsp; &nbsp; I accept <a href="terms.php" target="_blank">SEO_Faceup Terms & Conditions</a>.</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>


	<a href="#" data-toggle="modal" data-target="#myModal" style="text-decoration:none">QUICK ENQUIRY</a></div>

Upvotes: 3

Related Questions