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

Question

I have a form-horizontal

<div class="form-horizontal">
    <div class="form-group">
      <label class="control-label col-lg-6">Discount Terms</label>
      <div class="col-lg-3">
        <input type="text" class="form-control" />
      </div>
      <div class="col-lg-3">
        <input type="text" class="form-control" />
      </div>
    </div>
</div>

And this is the output

I want to decrease the spacing between the two inputs. How can I achieve this?

Answer 1

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

Answer 2

You can move these elements closer by reducing the padding on the .col-*-* elements. You will be overriding bootstrap styles to make sure your selectors are specific enough for the changes to take effect.

.form-horizontal .col-xs-3 {
  padding:0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-horizontal">
    <div class="form-group">
      <label class="control-label col-xs-6">Discount Terms</label>
      <div class="col-xs-3">
        <input type="text" class="form-control" />
      </div>
      <div class="col-xs-3">
        <input type="text" class="form-control" />
      </div>
    </div>
</div>