Francis Francis - 3 months ago 9
CSS Question

close up spaces in a bootstrap form

I have a bootstrap form with the following css code in it. I have tried to close up the blank spaces in the form by adding margin:0 attribute but still the spaces between the element is there.

css form code

<div class="row-fluid">
<form style="width: 90%; height: 100%; margin-top:1px;" method="post"novalidate="novalidate" class="form well">

<div class="row-fluid">
<div class="control-group span12">
<label for="name">Name *</label>
<input ng-model="name" name="name" type="text" class="input-block-level" required>
</div>
</div>
<div class="row-fluid">
<div class="control-group span12">
<label for="email">Email *</label>
<input name="email" placeholder="" type="email" class="input-block-level" ng-model="email"ng-change="id=email" required>
</div>
</div>
<div class="row-fluid">
<div class="control-group span12">
<label for="complaints">Message *</label>
<textarea style="width:100%;" name="complaints" rows="3" required></textarea>
</div>
</div>
<div class="form-actions">
<input style="width:100%; background-color:#da291c;" class="btn btn-primary" name="commit" type="submit" value="Send">
</div>
</form>
</div>


this is the picture of the above form

enter image description here

My challenge is to close the gaps on the areas pointed with arrows.

I am using this version of bootstrap

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css">

Answer

You can remove the margin-bottom that bootstrap adds to the class .control-group

.row-fluid div.control-group, div.form-actions {
    margin-bottom: 0px;
}

div.my-form{
  padding-bottom: 0px;
  margin-top:0px;
  padding-top:0px;
}

.control-group input,.control-group textarea{
      margin-bottom: 0px;    
}

form.form{
  padding-bottom: 0;
  padding-top:0;
}

UPDATED jsfiddle with your code

Comments