Reduce Spacing Between Bootstrap Horizontal Form Controls

How to decrease the space between form-controls in form-horizontal bootstrap?

You can add a new class to the column that contains the inputs, e.g. called 'input'. Like this:

 <div class="col-lg-3 input">
    <input type="text" class="form-control" />
  </div>

Then style the width by targetting the left and right padding to whatever you need.

.input {
  padding-right: 0;  
  padding-left: 0;
}

Full Demo

Reduce spacing between bootstrap horizontal form controls

I solved it by adding

label {
margin-bottom: 0;
}

It works fine now.

Bootstrap - Reducing spacing between form-controls like textbox and label

I'm trying to reduce the spacing between a label and it's respective text-box.

Give your texboxes a css class (pull-left or whatever you want to call it) and then use css to pull the textboxes to the left.

.pull-left {
margin-left: -20px; /* Try with different values until you are happy */
}

I want to reduce the height of the textbox.

Try using padding and line-height and play with the numbers until you are happy with the height:

input[type="text"]{ padding: 20px 10px; line-height: 28px; }

The above will apply 20px to top and bottom and 10px to left and right. Here are some other ways:

padding: 20px 10px 20px 10px; /*top right bottom left*/ 

Finally make sure these margins play well when you are changing the size of the screen. If it looks good on big screen, it may not look good on smaller screens so choose something which will look good across all screens.

Bootstrap 3 horizontal form spacing

I think this is what you want.

FIDDLE

You can reduce the space between the labels and the inputs by adding a negative margin to the labels.

CSS:

label {
    margin-right: -20px;
}

HTML:

<div class="page-header">
        <h1>sample</h1>
    </div>
    <div class="container nopadding">
            <form class="form-horizontal" role="form">
            <div class="form-group">
                <label for="recordId" class="col-sm-2 control-label">Record Id</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control" id="recordId" placeholder="Record Id"></input>
                </div>
            </div>
            <div class="form-group">
                <label for="id" class="col-sm-2 control-label">Id</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control" id="id" placeholder="Password"></input>
                </div>
            </div>
            <div class="form-group">
                <label for="familyName" class="col-sm-2 control-label">Family Name</label>
                <div class="col-sm-2">
                    <input type="text" class="form-control" id="familyName" placeholder="Family Name" maxlength="30"></input>
                </div>
            </div>
        </form>
    </div>

Also, not sure why you had a div with class row on there. Should be a form tag. I've adjusted that in the HTML for my answer and Fiddle.

Bootstrap form spacing is off

It's because of default padding and margin of the form classes.

You have to remove the default paddings and margins in order to center the elements and aligned in a same line.

Add the following lines in you css

.form-group, .form-row > .col, .form-row > [class*="col-"] {
  padding-left:0; 
  padding-right:0;
}
.form-row{
  margin:0;
}

A working codepen link: https://codepen.io/Ev1tw1n/pen/xmdjeL

bootstrap reduce spacing between rows

The issue is that there is a margin applied to .form-group. To override, add this to your CSS or change it in the CSS code for bootstrap.

.form-group {
  margin-bottom: 0;
}

Demo: http://www.bootply.com/lKW7vRzS6d

bootstrap form-group spacing

http://jsfiddle.net/TLF4L/6/

Main issue is to make sure you set class "form-horizontal" on your form. For the program address fields, you could either set out a separate row for each or what I'd suggest is just adding a css for margin-bottom on each input field. Edited jsfiddle above

.margin-bottom {
margin-bottom:15px;}



<div class="col-xs-12 col-sm-12">
<form role="form" class='form-horizontal'>
    <div class="form-group">
        <div class="col-xs-3 text-right">
            <label for="cpTitle">Title</label>
        </div>
        <div class="col-xs-9">
            <input type="text" class="form-control" placeholder="Title of the program" id="cpTitle" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-xs-3 text-right">
            <label for="cpDesc">Description</label>
        </div>
        <div class="col-xs-9">
            <textarea class="form-control" rows="3" placeholder="Description of the program" id="cpDesc"></textarea>
        </div>
    </div>
    <div class="form-group">
        <div class="col-xs-3 text-right">
            <label for="cpAddr">Program address</label>
        </div>
        <div class="col-xs-9">
            <input type="text" class="form-control margin-bottom" placeholder="Name of Facility" id="cpAddr" />
            <input type="text" class="form-control margin-bottom" placeholder="Street 1" />
            <input type="text" class="form-control margin-bottom" placeholder="Street 2" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-xs-3 text-right"> </div>
        <div class="col-xs-3">
            <input type="text" class="form-control" placeholder="State" />
        </div>
        <div class="col-xs-3">
            <input type="text" class="form-control" placeholder="City" />
        </div>
        <div class="col-xs-3">
            <input type="text" class="form-control" placeholder="Zip" />
        </div>
    </div>
</form>

Bootstrap - spacing between form-inline elements

That space is generated by the property inline-block is compared to treating the elements as text, if you have on your markup each element on a new line this generates a space and each element is a "new word".

Check the Snippet

section {  background:white;  margin:20px auto;}div {  display:inline-block;  height:50px;  width:30%;  margin:20px auto;  background:red;  border:thin solid orange}

<section>  <div></div>  <div></div>  <div></div></section>