How can make Bootstrap's horizontal form labels smaller with CSS?

Question

Bootstrap has a lot of examples for types of forms. I'm interested in using the "Horizontal form" which looks like this

This is what it looks like after outlining some elements with the web inspector toolbar:

I am working inside of a popup modal and space is already a bit tight. I tried adding bootstrap's grid system's .span1 and .span2 to the labels as a class, but it is not giving the desired behavior.

Is there a way to use some other aspect of bootstrap to get the desired behavior (i.e. tighten up the amount of space that labels on a horizontal form take up)? What is the proper way to do this? I'm using bootstrap version 2.1

Answer 1

i am not aware if bootstrap has got something defined for it..below is a workaround..

<div class="control-group">
<label class="control-label" style="width:auto" for="inputEmail">Email</label>
<div class="controls" style="margin-left:auto">
<input type="text" class="input-small" id="inputEmail" placeholder="Email">
</div>
</div>

i added style="width:auto" which was default 140px and style="margin-left:auto" which was default 160px. Also class="input-small" to reduce the input field width to squeeze out more space so that it fits in modal..

Now you tweak further to fit it as per your needs..

Answer 2

To reduce the vertical spacing, form-control-sm shrinks the font-size (using Bootstrap 4):

<form>
  <div class="form-group form-row">
    <label class="col-sm-2 col-form-label form-control-sm">Label</label>
    <div class="col-sm-3">
      <input class="form-control form-control-sm">
    </div>
  </div>
</form>