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

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>