How to improve following HTML design to be look good using bootstrap?
I work on angular 7 but design look to me Not good so how to improve it
I need to
1- improve styles and shape of table display data ?
2- two drop downlist i need it with bootstrap and beside button on right side ?
3- if i can improve header of table to be good display
this is my html and css
<div class="row" #TABLE #table>
<div class="col-10 table-responsive" >
<div>
<button (click)="ExportToExcel()" class="btn btn-success"style="margin-right=20px;">ExportTOExcel</button> </div>
</div>
<div>
<div *ngFor="let fil of FilterList" style="padding-bottom: 10px;margin-right: 10px;">
{{fil.controlName | slice:3:15}}
<Select id="{{fil.controlName}}" style="width:200px; margin-right:10px;">
<option value="0">-Select-</option>
<option *ngFor="let fil2 of this.FilterBinddata">
<div *ngIf="fil.controlName===fil2.filterName">
{{fil2.reportSource}}
</div>
</option>
</Select>
<div>
</div>
</div>
</div>
<div class="table-responsive table-container">
<table class="table table-bordered">
<thead class="thead-dark">
<tr>
<th *ngFor="let coln of headerCols">
{{coln}}
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let rep of contentBody">
<td *ngFor="let r1 of rep">{{r1}}</td>
</tr>
</tbody>
</table>
</div>
</div>
}
.table tbody tr:hover td, .table tbody tr:hover th {
background-color: #eeeeea;
}
