How to improve html design with bootstrap?

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" >
      <button (click)="ExportToExcel()" class="btn btn-success"style="margin-right=20px;">ExportTOExcel</button> </div>  
    <div *ngFor="let fil of FilterList"  style="padding-bottom: 10px;margin-right: 10px;">
      {{fil.controlName | slice:3:15}} &nbsp;&nbsp;
      <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">



<div class="table-responsive table-container">

  <table class="table table-bordered">
    <thead class="thead-dark">
        <th *ngFor="let coln of headerCols">

      <tr *ngFor="let rep of contentBody">
        <td *ngFor="let r1 of rep">{{r1}}</td>


.table tbody tr:hover td, .table tbody tr:hover th {

    background-color: #eeeeea;


also this is screen shoot from my design bad as above

Bootstrap has some custom classes to change the appearance of the tables which may be what you are looking for.

However its usually down to you to style them as you require.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.