HTML buttons are not aligned in center. either it moving to left side or right side

<div class="col-lg-3">
        <div class="panel panel-default" style="height:750px;font-size:18px;overflow: auto;">
            <div class="panel-heading">
                <a href="#"><i class="glyphicon glyphicon-briefcase panel_icon"></i></a>
                Add New CLI Commands                                            
            </div>
            <div class="panel-body" style="font-size:12px !important;">
                <form action="#">
                    <div class="form-group">
                        <label for="command_name">Command Name:</label>
                        <input type="text" class="form-control" id="command_name" placeholder="Enter Command" name="command_name">
                    </div>
                    <div class="form-group">
                        <label for="command_description">Command Description:</label>
                        <input type="text" class="form-control" id="command_description" placeholder="Enter Command Description" name="command_description">                        
                    </div>                  
                    <div class="col-lg-12">                                         
                        <button type="submit" class="col-lg-3 btn btn-success pull-left" style="margin-left:3px" ng-click="addCommandsData()">Add</button>
                        <button type="button" class="col-lg-3 btn btn-warning pull-center" style="margin-left:3px" ng-click="updateCommandsData()">Update</button>                      
                        <button type="button" class="col-lg-3 btn btn-danger pull-right" style="margin-left:3px" ng-click="deleteCommandsData()">Delete</button>                                                
                    </div>                  
                </form>
            </div>
        </div>
    </div>

Buttons such as Add, Update and Delete are not aligned properly. However I have given pull-center for Update. Given code for reference. Any suggestions please.

Solution

As suggested by @Officer Erik K, you can archive this using bootstrap 3 classes text-center, pull-left and pull-right :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="col-lg-12 text-center">
  <button type="submit" class="btn btn-success pull-left" style="margin-left:3px">
    Add
  </button>
  <button type="button" class="btn btn-warning" style="margin-left:3px">
    Update
  </button>                      
  <button type="button" class="btn btn-danger pull-right" style="margin-left:3px">
    Delete
  </button>     
</div>

Or you can use flex :

.space-between {
  display: flex;
  justify-content: space-between;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="col-lg-12 space-between">
  <button type="submit" class="btn btn-success" style="margin-left:3px">
    Add
  </button>
  <button type="button" class="btn btn-warning" style="margin-left:3px">
    Update
  </button>                      
  <button type="button" class="btn btn-danger" style="margin-left:3px">
    Delete
  </button>     
</div>