CODEWITHSUNDEEP
csstwitter-bootstrap
JaChNo
JaChNo

Reputation: 89

Spacing issue on bootstrap modal form

I have created a bootstrap modal form with some fields in it the user can edit. But the footer is tight on to the last field, so there is no gap between the form and the buttons.

When i look at the footer in firebug it seems to be taking up half the modal form. I am new to css and I am out of ideas as to why this is happening

Here is the code for the form:

<a data-toggle="modal" href="#myEditModal" class="btn btn-primary btn-lg">Launch demo     modal</a>


<!-- Modal -->
<div class="modal fade" id="myEditModal" tabindex="-1" role="dialog"    aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h4 class="modal-title">Modal title</h4>
    </div>
    <div class="modal-body">

               <div class="form-group">
                    <label for="name" class="col-sm-2 control-label">Name</label>
                    <div class="col-sm-10">
                        <input class="form-control" id="name" name="name" placeholder="Company" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label for="street" class="col-sm-2 control-label">Street</label>
                    <div class="col-sm-10">
                        <input class="form-control" id="street" name="street" placeholder="Street" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label for="number" class="col-sm-2 control-label">Number</label>
                    <div class="col-sm-10">
                        <input class="form-control" id="number" name="number" placeholder="Number" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label for="zipcode" class="col-sm-2 control-label">ZIP Code</label>
                    <div class="col-sm-10">
                        <input class="form-control" id="zipcode" name="zipcode" placeholder="ZIP Code" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label for="city" class="col-sm-2 control-label">City</label>
                    <div class="col-sm-10">
                        <input class="form-control" id="city" name="city" placeholder="City" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label for="country" class="col-sm-2 control-label">Country</label>
                    <div class="col-sm-10">
                        <input class="form-control" id="country" name="country" placeholder="Country" type="text">
                    </div>
               </div>               
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary">Save changes</button>
    </div>
  </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

I have also reproduced the form on bootply

http://www.bootply.com/126859

I only want to introduce a 5px or so margin, if anyone could point out my mistake that would be great

Thanks

JaChNo

Upvotes: 2

Views: 4648

Answers (2)

Hiram Hibbard
Hiram Hibbard

Reputation: 537

You're missing the form tag, and since you have your labels and inputs in columns, it looks like you also need to give the form a class of form-horizontal. Here's a link to an example of how to build a horizontal form with bootstrap: http://getbootstrap.com/css/#forms-horizontal

I updated your code, and this should work without having to add any CSS:

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal" role="form">
          <div class="form-group">
            <label for="name" class="col-sm-2 control-label">Name</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="name" name="name" placeholder="Company">
            </div>
          </div>
          <div class="form-group">
              <label for="street" class="col-sm-2 control-label">Street</label>
              <div class="col-sm-10">
                  <input type="text" class="form-control" id="street" name="street" placeholder="Street">
              </div>
          </div>
          <div class="form-group">
              <label for="number" class="col-sm-2 control-label">Number</label>
              <div class="col-sm-10">
                  <input type="text" class="form-control" id="number" name="number" placeholder="Number">
              </div>
          </div>
          <div class="form-group">
              <label for="zipcode" class="col-sm-2 control-label">ZIP Code</label>
              <div class="col-sm-10">
                  <input type="text" class="form-control" id="zipcode" name="zipcode" placeholder="ZIP Code">
              </div>
          </div>
          <div class="form-group">
              <label for="city" class="col-sm-2 control-label">City</label>
              <div class="col-sm-10">
                  <input type="text" class="form-control" id="city" name="city" placeholder="City">
              </div>
          </div>
          <div class="form-group">
              <label for="country" class="col-sm-2 control-label">Country</label>
              <div class="col-sm-10">
                  <input type="text" class="form-control" id="country" name="country" placeholder="Country">
              </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Upvotes: 2

LOTUSMS
LOTUSMS

Reputation: 10240

Simply add a margin-top:5px to your .btn class. However, if you are a picky as I am, I wouldn't modify Bootstrap, that way you can always update it when they release an update for it.

Instead map the class separatedly in a stylesheet and use the class that is already declared for you as such

.modal-footer .btn{
     margin-top: 5px; /* I think 15px looks way better */
 }

You may/maynot have to add a !important hack to it

Upvotes: 1

Related Questions