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

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

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>