How do you add Bootstrap buttons in Bootstrap Table

I've already figured out the solution. I'd like to share it with everyone.

This is my table:

 <table
    id="table"
    data-toggle="table"
    data-pagination="true"
    data-url="data/RegisteredVisitors.json"
    data-show-refresh="true"
    data-show-toggle="true"
    data-show-columns="true"
    data-search="true"                          
    data-show-pagination-switch="true"
    data-id-field="visitor_id"
    data-page-list="[10, 25, 50, 100, ALL]"
    data-show-footer="false">    
<thead>
<tr>    
    <th data-field="visitor_id" data-checkbox="false" >#</th>
    <th data-field="visitor_number" data-formatter="VisitorDetails">Visitor #</th>
    <th data-field="visitor_names" data-formatter="VisitorDetails" data-sortable="true">Visitor Names</th>
    <th data-field="phone_number"  data-sortable="true">Phone Number</th>
    <th data-field="matter_type"  data-sortable="true">Matter Type</th>
    <th data-field="office_name"  data-sortable="true">Office Attending</th>
    <th data-field="time_in"  data-sortable="true">Time In</th>
    <th data-field="time_out" data-sortable="true">Time Out</th>
    <th data-field="last_visit"  data-sortable="true">Last Visit</th>
    <th data-formatter="TableActions">Action</th>
</tr>
</thead>
</table>

This is my jQuery function

function TableActions (value, row, index) {
    return [
        '<a class="like" href="javascript:void(0)" title="Edit">',
        '<i class="glyphicon glyphicon-pencil"></i>',
        '</a> ',
        '<a class="danger remove" href="javascript:void(0)" data-visitorserial="'+row.visitor_id+'" data-visitornames="'+row.visitor_names+'" data-visitorid="'+row.visitor_number+'" data-toggle="modal" data-target="#VisitorDelete" title="Remove">',
        '<i class="glyphicon glyphicon-trash"></i>',
        '</a>'
    ].join('');
}

Finally got it running.

<table class="table table-hover">
    <thead>
        <tr>
            <th>Button</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><button type="button" class="btn btn-primary">button</button></td>
        </tr>
    </tbody>
</table>

For me, I did this.

<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Operation</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>
      <button type="button" class="btn btn-outline-primary" onclick="location.href='#'">Edit</button>
      </td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>
      <button type="button" class="btn btn-outline-primary" onclick="location.href='#'">Edit</button>  
      </td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>
      <button type="button" class="btn btn-outline-primary" onclick="location.href='#'">Edit</button>  
      </td>
    </tr>
  </tbody>
</table>

The outcome should look like something like this.