CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Matt
Matt

Reputation: 4752

How can one reduce the spacing between inline form inputs?

I am using Bootstrap 3 to format a simple inline form. Obviously I want to reduce the spacing between these buttons, but can't for the life of me figure out how. I tried deleting all non-bootstrap CSS, but the problem remained.

How can I reduce the spacing between these buttons?

My html:

<div class="form-inline" role="form">
        <div id="instructions" ng-repeat="instruction in racing.Instructions" class="row">
            <div class="col-sm-4">
                <input type="text" name="Description" ng-model="instruction.Description" class="form-control" />
            </div>
            <div class="col-sm-3">
                <div class="btn-group" role="group" aria-label="order">
                    <button type="button"
                            class="btn btn-default btn-sm">
                        <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
                    </button>
                    <button type="button" class="btn btn-default btn-sm">
                        <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
                    </button>
                </div>
            </div>
            <div class="col-sm-1">
                <button ng-click="removeInstruction(instruction)" class="btn btn-default btn-sm">
                    <span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>
                </button>
            </div>
        </div>
    </div>

The output: enter image description here

Fiddle: http://jsfiddle.net/ppwsgchh/

Upvotes: 1

Views: 132

Answers (3)

vanburen
vanburen

Reputation: 21663

Bootstrap Input Groups might help depending on your ultimate needs.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="form-inline" role="form">
    <div id="instructions" ng-repeat="instruction in racing.Instructions" class="row">
      <div class="col-sm-12">
        <div class="input-group">
          <input type="text" name="Description2" ng-model="instruction.Description" class="form-control" /> <span class="input-group-btn" role="group" aria-label="order">
                        
                <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>

          </button>
          <button ng-click="removeInstruction(instruction)" class="btn btn-default"> <span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>

          </button>
          </span>
        </div>
      </div>
      <div class="col-sm-12">
        <div class="input-group">
          <input type="text" name="Description" ng-model="instruction.Description" class="form-control" /> <span class="input-group-btn" role="group" aria-label="order">
                        <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>

          </button>
          <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>

          </button>
          <button ng-click="removeInstruction(instruction)" class="btn btn-default"> <span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>

          </button>
          </span>
        </div>
      </div>
      <div class="col-sm-12">
        <div class="input-group">
          <input type="text" name="Description" ng-model="instruction.Description" class="form-control" /> <span class="input-group-btn" role="group" aria-label="order">
                        <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>

          </button>
          <button ng-click="removeInstruction(instruction)" class="btn btn-default"> <span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>

          </button>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Andrew C.
Andrew C.

Reputation: 36

Any reason the minus-sign button can't be in the same button group as the chevron's?

<div class="col-sm-3">
    <div class="btn-group" role="group" aria-label="order">
       <button type="button" class="btn btn-default btn-sm">
           <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
       </button>
       <button type="button" class="btn btn-default btn-sm">
           <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
       </button>

       <!-- Minus button added to the button group -->
       <button ng-click="removeInstruction(instruction)" class="btn btn-default btn-sm">
           <span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>
       </button>

    </div>
</div>

Upvotes: 1

DavidG
DavidG

Reputation: 118947

The issue is with the padding on the buttons. You can fix it by setting your own. Here is a working example:

#instructions button.btn.btn-default.btn-sm {
    padding-bottom: 7px;
    padding-top: 7px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>



<div class="form-inline" role="form">
  <div id="instructions" ng-repeat="instruction in racing.Instructions" class="row">
    <div class="col-sm-4">
      <input type="text" name="Description" ng-model="instruction.Description" class="form-control" />
    </div>
    <div class="col-sm-3">
      <div class="btn-group" role="group" aria-label="order">
        <button type="button" class="btn btn-default btn-sm">
          <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
        </button>
        <button type="button" class="btn btn-default btn-sm">
          <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
        </button>
      </div>
    </div>
    <div class="col-sm-1">
      <button ng-click="removeInstruction(instruction)" class="btn btn-default btn-sm">
        <span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>
      </button>
    </div>
  </div>
  <div id="instructions" ng-repeat="instruction in racing.Instructions" class="row">
    <div class="col-sm-4">
      <input type="text" name="Description" ng-model="instruction.Description" class="form-control" />
    </div>
    <div class="col-sm-3">
      <div class="btn-group" role="group" aria-label="order">
        <button type="button" class="btn btn-default btn-sm">
          <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
        </button>
        <button type="button" class="btn btn-default btn-sm">
          <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
        </button>
      </div>
    </div>
    <div class="col-sm-1">
      <button ng-click="removeInstruction(instruction)" class="btn btn-default btn-sm">
        <span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>
      </button>
    </div>
  </div>
  <div id="instructions" ng-repeat="instruction in racing.Instructions" class="row">
    <div class="col-sm-4">
      <input type="text" name="Description" ng-model="instruction.Description" class="form-control" />
    </div>
    <div class="col-sm-3">
      <div class="btn-group" role="group" aria-label="order">
        <button type="button" class="btn btn-default btn-sm">
          <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
        </button>
        <button type="button" class="btn btn-default btn-sm">
          <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
        </button>
      </div>
    </div>
    <div class="col-sm-1">
      <button ng-click="removeInstruction(instruction)" class="btn btn-default btn-sm">
        <span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>
      </button>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions