How to have a space between the two buttons? And how to align them to center

Arjay Legaspi

I'm using bootstrap from getbootstrap.com. I want to have a space between the SAVE and CLEAR button. I also want them to align center to be proportioned on the textboxes. How can I achieve that?

<div class="form-group">
  <label for="trucktype" class="col-sm-2">Truck Type</label>
        <div class="col-sm-4">
        <select id="trucktype" name="trucktype" class="form-control" tabindex="2">
          <option value="volvo">Service Wheels</option>
          <option value="saab">Boom Truck</option>
          <option value="mercedes">Crane Truck</option>
          <option value="audi">Pole Trailer Truck</option>
        </select>
        </div>
      </div>

   <div class="form-group">
      <label for="truckloadcapacity" class="col-sm-2">Truck load capacity</label>
      <div class="col-sm-4"><input type="text" name="truckloadcapacity" id="truckloadcapacity" class="form-control" tabindex="3"></div>
  </div>

  <div class="form-group">
    <label for="truckdesc" class="col-sm-2">Truck Description:</label>
    <div class="col-sm-4"><textarea class="form-control" rows="3" id="truckdesc" tabindex="4"></textarea></div>
    </div>

  <div class="form-group">
    <label for="truckphoto" class="col-sm-2">Truck Photo</label>
    <div class="col-sm-4"><input type="file" name="file" id="truckphoto" class="form-control" tabindex="5"></div>
  </div>

  <!-- BUTTONS start -->
  <div class="row">      
  <div class="col-sm-4">
  <div class="form-group">
  <input class="btn-primary btn-lg col-sm-4" type="submit" value="Save">
  <input type="reset" class="btn-default btn-lg col-sm-4" name="clear" value="Clear">
  </div>
  </div>
  </div>
  <!-- BUTTONS end -->
 </form>

this.girish

may be you are looking for this class="text-center" will do a trick, and some CSS for spacing

.btn-spacing 
{
margin-right: 5px;
margin-bottom: 5px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="form-group">
  <label for="trucktype" class="col-sm-2">Truck Type</label>
        <div class="col-sm-4">
        <select id="trucktype" name="trucktype" class="form-control" tabindex="2">
          <option value="volvo">Service Wheels</option>
          <option value="saab">Boom Truck</option>
          <option value="mercedes">Crane Truck</option>
          <option value="audi">Pole Trailer Truck</option>
        </select>
        </div>
      </div>

   <div class="form-group">
      <label for="truckloadcapacity" class="col-sm-2">Truck load capacity</label>
      <div class="col-sm-4"><input type="text" name="truckloadcapacity" id="truckloadcapacity" class="form-control" tabindex="3"></div>
  </div>

  <div class="form-group">
    <label for="truckdesc" class="col-sm-2">Truck Description:</label>
    <div class="col-sm-4"><textarea class="form-control" rows="3" id="truckdesc" tabindex="4"></textarea></div>
    </div>

  <div class="form-group">
    <label for="truckphoto" class="col-sm-2">Truck Photo</label>
    <div class="col-sm-4"><input type="file" name="file" id="truckphoto" class="form-control" tabindex="5"></div>
  </div>

  <!-- BUTTONS start -->
  <div class="row">      
  <div class="col-sm-4">
  <div class="form-group btn-block text-center">
  <input class="btn-primary btn-lg col-sm-4 btn-spacing " type="submit" value="Save">
  <input type="reset" class="btn-default btn-lg btn-spacing  col-sm-4" name="clear" value="Clear">
  </div>
  </div>
  </div>
  <!-- BUTTONS end -->

Collected from the Internet

Please contact [email protected] to delete if infringement.