Bootstrap Button alignment

Question

My button in bootstrap4 touches the top of the table. How can I add some gap and right align it to edge of table?

    <div class="container">
    <div class="table-title">
    <div class="row">
        <div class="col-sm-8"><h5>Birds</h5></div>
        <div class="col-sm-4">
            <button type="button" class="btn btn-info add-new">
                <i class="fa fa-plus"></i> Add New
            </button>
        </div>
    </div>
    </div>
    

    <table class="table">
        <thead class="table-light">
          <tr>
            <th>Name</th>
            <th>Sex</th>
            <th>Status</th>
            <th>Owner</th>
            <th>IIS</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
            <tr *ngFor="let bird of birds$ | async">
            <td>bird</td>
            <td>sex</td>
            <td>status</td>
            <td>owner</td>
            <td>IIS</td>
            <td>
                <a style="padding-left:10px;"><fa-icon [icon]="iconEdit"></fa-icon></a>
                <a style="padding-left:10px;"><fa-icon [icon]="iconTrash"></fa-icon></a>
            </td>
          </tr>
        </tbody>
      </table>

I tried to add a blank row but this did nothing.

Fiddle here : https://jsfiddle.net/df0e4uv3/

Answer 1

Try adding .py-3 on <div class="col-sm-4">. <div class="col-sm-4 py-3">. Or you can add it on the <table> for details, you can reference here