How can I get rid of extra space between elements in the Bootstrap module?

Question

I use bootstrap grid to build the form inside the modal. There is too much space between the label and the input element, and if I have two form controls on the same line, there is too much space between them. I use 3 columns for each element, for any of them less, and I get word wrap or cropping.

<div class="modal-body">
    <div class="form-horizontal">    
        <div class="form-group">
            <label class="control-label col-xs-3">Start Time:</label>
            <div class="col-xs-3 margin-top-sm">
                <div class="input-group bootstrap-timepicker timepicker">
                    <input type="text" class="form-control" data-provide="timepicker" data-bind="value:startTime" id="StartTime" />
                    <span class="input-group-addon" ><i class="fa fa-clock-o"></i></span>
                </div>
        </div>
            <label class="control-label col-xs-3">End Time:</label>
            <div class="col-xs-3 margin-top-sm">
                <div class="input-group bootstrap-timepicker timepicker">
                    <input type="text" class="form-control" data-provide="timepicker" data-bind="value:endTime" id="EndTime" />
                    <span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
                </div>
            </div>                
        </div>
    </div>
</div>

Answer 1

I modified your HTML and CSS to get the desired result. Instead of using, cols-*I used spansandrow-fluid

HTML:

 <div id="myModal" class="modal show" tabindex="-1" role="dialog" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-body">
            <div class="row-fluid">
               <div class="span6">
                  <label class="control-label">Start Time:</label>
                  <div class="input-group bootstrap-timepicker timepicker">
                    <input type="text" class="form-control" data-provide="timepicker" data-bind="value:endTime" id="EndTime" />
                    <span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
                  </div>   
               </div>
               <div class="span6">
                  <label class="control-label">End Time:</label>
                  <div class="input-group bootstrap-timepicker timepicker">
                     <input type="text" class="form-control" data-provide="timepicker" data-bind="value:endTime" id="EndTime" />
                     <span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
                  </div>
               </div>            
            </div>
         </div>
      </div>
   </div>
</div>

CSS

.span6{
   display: inline-block;
   max-width: 40%;
   margin-left: 6%;
}

CODEPEN DEMO