Twitter Bootstrap Question posted in

close up spaces in a bootstrap form – Twitter bootstrap

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>
                <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">
Tags:

4

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    You can use this code:

    input[type=text], .txtarea{
  margin-bottom: 10px;
}
    Login or Signup to reply.
  3. 0

    In bootstrap already they keep on the margin property always. we can overwrite that to solve your problem.

    you need to add one class like this:

    .splclass{
  margin:0 !important;
  padding:0 !important;
}

    Add additionally in the form inline style like this:

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

    i think it will helpful

    Login or Signup to reply.
  4. 0

    Well if you don’t want any space in between, you definitely don’t want any margin. Move the CSS to it’s own file: 

    .send {
  width:100%; 
  background-color:#da291c;
}

.message {
  width:100%;
}

.form {
  width: 90%;
  height: 100%;
  margin: 0;
}

    and html: 

    <div class="row-fluid">
    <form class="form" 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 class="message" name="complaints" rows="3" required></textarea>
            </div>
        </div> 
        <div class="form-actions">
            <input class="btn btn-primary send" name="commit" type="submit" value="Send">
        </div>
    </form>
</div>

    and you can see the fiddle here: https://jsfiddle.net/6j98311j/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search