title: How to resize modal from bootstrap
body: <p>I am new to modal pop-up from the bootstrap. I am currently using here a modal from the examples on w3schools. I want to insert my input form inside the modal. So when the user click the <em>Upload File button</em>, this modal will pop-up. Here is the photo: <a href="https://i.stack.imgur.com/QggFj.png" rel="nofollow noreferrer">(Please take a look at this image)</a> </p>
  
  <hr>
  
  <p>As you can see, my problem here is the input fields are unorganized, I just <strong>want to resize the modal so the input fields would fit in.</strong> How can I achieve that? Your help will be highly appreciated. Here is my code: </p>
  
  <pre><code>&lt;!-- ******** LOG IN MODAL START ******** --&gt;
  &lt;!-- Modal --&gt;
  &lt;div class="modal fade" id="myModal" role="dialog"&gt;
  &lt;div class="modal-dialog"&gt;
  
    &lt;!-- Modal content--&gt;
    &lt;div class="modal-content"&gt;
  
      &lt;div class="modal-header" style="background-color: #003399;"&gt;
        &lt;button type="button" class="close" data-dismiss="modal" style="color: 
         #fff;"&gt;&amp;times;&lt;/button&gt;
        &lt;h4 class="modal-title" style="color: #fff;"&gt;Upload New File&lt;/h4&gt;
      &lt;/div&gt;
  
      &lt;div class="modal-body"&gt;
      &lt;div class="form-horizontal"&gt;
        &lt;form class="form-horizontal" action="uploadfile.php" method="post" 
         name="addservice" enctype="multipart/form-data" align="center" 
         onsubmit="return validateForm()"&gt; 
      &lt;div class="form-group"&gt;
  
          &lt;div class="form-group"&gt;
            &lt;label for="filename" class="col-sm-2 control-label"&gt;File Name:
            &lt;/label&gt;
            &lt;div class="col-sm-4"&gt;&lt;input type="text" class="form-control" 
               name="filename" id="filename" placeholder="Name of the file" 
               maxlength="55" tabindex="1" required&gt;&lt;/div&gt;
          &lt;!--  &lt;/div&gt;
  
          &lt;div class="form-group"&gt; --&gt;
            &lt;label for="file" class="col-sm-2"&gt;File:&lt;/label&gt;
            &lt;div class="col-sm-4"&gt;&lt;input type="file" maxlength="11" 
              name="file" id="file" class="form-control" tabindex="2" 
              required&gt;&lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
            &lt;label for="filedesc" class="col-sm-2"&gt;File Description:&lt;/label&gt;
            &lt;div class="col-sm-4"&gt;&lt;textarea class="form-control" rows="3" 
             name=" filedesc" id="filedesc" placeholder="(maximum of 75 
             characters)" style="resize: none;" maxlength="75" tabindex="3" 
             required&gt;&lt;/textarea&gt;&lt;/div&gt;
          &lt;/div&gt;
  
  
      &lt;/div&gt;
  
          &lt;div class="col-sm-4"&gt;
            &lt;div class="form-group"&gt;&lt;input class="btn btn-success btn-lg col-
            sm-4" name="submit" type="submit" value="Upload" tabindex="4"&gt;
              &lt;input type="reset" class="btn btn-default btn-lg col-sm-4" 
              name="clear" value="Clear" tabindex="5"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
        &lt;/form&gt;
      &lt;/div&gt;
      &lt;/div&gt; &lt;!-- modal body --&gt;
  
      &lt;div class="modal-footer"&gt;
        &lt;button type="button" class="btn btn-default" data-
        dismiss="modal"&gt;Close&lt;/button&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;  &lt;!-- modal content --&gt;
  
  &lt;/div&gt; &lt;!-- modal dialog --&gt;
  &lt;/div&gt;  &lt;!-- modal fade --&gt;
  &lt;!-- ******** LOG IN MODAL END ******** --&gt;
  </code></pre>