Issue
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/
Solution
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
Answered By - Sean K.
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.