Bootstrap div's overflowing with JQuery modal

Question

I have a minor front end issue. When I load Bootstrap DIV's into the JQuery Modal's body it over flows into the footer instead of expanding the body. Thanks.

        <div class="modal fade col-sm-4 col-sm-offset-4" id="register" role="dialogue">
            <div class="modal-dialogue">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4>Register</h4>
                    </div>
                    <div class="modal-body">
                        <form action="" method="POST">
                        <div class="form-group">
                            <div class="col-sm-12">
                                <input type="text" class="form-control" name="fname" placeholder="First Name">
                            </div>
                            <div class="col-sm-12">
                                <input type="text" class="form-control" name="lname" placeholder="Last Name">
                            </div>
                            <div class="col-sm-12"><br></div>
                            <div class="col-sm-12">
                                <input type="text" class="form-control" name="email" placeholder="Email Address">
                            </div>
                            <div class="col-sm-12">
                                <input type="text" class="form-control" name="email2" placeholder="Confirm Email Address">
                            </div>
                            <div class="col-sm-12">
                                <input type="text" class="form-control" name="pw" placeholder="Password">
                            </div>
                            <div class="col-sm-12">
                                <input type="text" class="form-control" name="pw2" placeholder="Re-type Password">
                            </div>

                            <!-- END ADDRESS FORM -->
                        </div>
                    </form>
                    </div>
                    <div class="modal-footer">
                        <a class = "btn btn-warning" data-dismiss = "modal">Sign Up</a><a class = "btn btn-warning" data-dismiss = "modal">Cancel</a>
                    </div>
                </div>
            </div>
        </div>

Answer 1

Add the 'row' class to your .modal-body

http://jsbin.com/fehivowimu/edit?html,output

   <div class="modal fade col-sm-4 col-sm-offset-4" id="register" role="dialogue">
  <div class="modal-dialogue">
    <div class="modal-content">
      <div class="modal-header">
        <h4>Register</h4>
      </div>
      <div class="modal-body row">

        <form action="" method="POST">
          <div class="form-group">
            <div class="col-sm-12">
              <input type="text" class="form-control" name="fname" placeholder="First Name">
            </div>
            <div class="col-sm-12">
              <input type="text" class="form-control" name="lname" placeholder="Last Name">
            </div>
            <div class="col-sm-12"><br></div>
            <div class="col-sm-12">
              <input type="text" class="form-control" name="email" placeholder="Email Address">
            </div>
            <div class="col-sm-12">
              <input type="text" class="form-control" name="email2" placeholder="Confirm Email Address">
            </div>
            <div class="col-sm-12">
              <input type="text" class="form-control" name="pw" placeholder="Password">
            </div>
            <div class="col-sm-12">
              <input type="text" class="form-control" name="pw2" placeholder="Re-type Password">
            </div>

            <!-- END ADDRESS FORM -->
          </div>
        </form>

      </div>
      <div class="modal-footer">
        <a class = "btn btn-warning" data-dismiss = "modal">Sign Up</a><a class = "btn btn-warning" data-dismiss = "modal">Cancel</a>
      </div>
    </div>
  </div>
</div>