CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Baso
Baso

Reputation: 1354

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

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

enter image description here

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

Upvotes: 4

Views: 10548

Answers (3)

gaetanoM
gaetanoM

Reputation: 42054

You can remove the padding-right from the first col-lg-3 and the padding-left from the second. In order to address each element you may use nth-child:

.form-horizontal .col-lg-3:nth-of-type(1) {
  padding-right: 2px;
}
.form-horizontal .col-lg-3:nth-of-type(2) {
  padding-left: 2px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<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>

Upvotes: 2

sol
sol

Reputation: 22949

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

Upvotes: 6

bob
bob

Reputation: 993

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>

Upvotes: 2

Related Questions