Style tfooter with pagination using Bootstrap Angular6 Datatable

Question

I used angular 6 datatable to paginate my data in table.

https://www.npmjs.com/package/angular-6-datatable

Everything works fine but i cant deal with style in footer of mfBootstrapPaginator

As you can see, this items are not in one line. How to set them in one line or at least next to each other?

 <div class="table-responsive"> <table id="tablePreview" class="table table-hover table-bordered" [mfData]="data" #mf="mfDataTable" [mfRowsOnPage]="10"> <thead> <tr> <th>#</th> </tr> </thead> <tbody> <tr *ngFor="let item of mf.data; let i = index;"> <td></td> </tr> </tbody> <tfoot> <tr> <!-- I got 8 columns in my project --> <td colspan="8"> <mfBootstrapPaginator [rowsOnPageSet]="[5,10,25, 50, 100]"></mfBootstrapPaginator> </td> </tr> </tfoot> </table> </div> 

I use Angular 6, Bootstrap 4

Answer 1

Change the display of the pagination class:

.pagination {
   display: inline-flex !important;
}

Answer 2

I now, the question is older but maybe it helps someone. I wrote this:

 <style> ul.pagination {display: inline-flex !important;} .pagination li.active .page-link {background-color: rgb(54,61,71) !important; border-color: rgb(54,61,71) !important;} </style> 

in my index.html befor the head close tag and it works for me. I hope it helps someone.