Can't change pagination style (BS5)

kintstoner

Well.. after researching for hours, i surrender to the forums

I can't find a way to change my bootstrap 5 pagination generated by datatables, i want to center it on the screen and change things like swapping the non-active color to black and active color to green, also i want to remove borders.

Actual result

Desired One

Thanks in advance!!

allan

Are you using a Bootstrap theme that we aren't applying the required colours from? Or are you just looking for information on how to customise the Bootstrap paging control?

If the former, please link to a test case showing the issue.

If the latter, I'd just "Inspect" the elements and derive the CSS you need from the information shown in the browser - e.g. to remove the border:

ul.pagination .page-link {
  border: none;
}

http://live.datatables.net/jetafigu/1/edit

Allan

kintstoner

Thanks for the answer!

yeah im looking to customize the Bootstrap paging control, i have to add that all of these is inside an Angular 12 project, i loaded the scripts and the CSS of the BS5 example on angular.json file. I don't know why but i can't target the classes to override the styles like i did with all the other screens on the App.

just tried once again with the solution you said, but the styles doesn't apply

allan

I'd need a link to your page showing the issue to be able to offer any help then.

Allan

kintstoner

Can't give you a link cause the project is under NDA conditions, but i solved the problem by manually modifying the "jquery.dataTables.css" it's a pretty ugly solution but...well it's something!

thanks anyway Allan!

allan

If you are using Bootstrap 5 you shouldn’t be including that file. Use dataTables.bootstrap5.css.

Allan

kintstoner

yeah you are right, but in the meanwhile of these topic i switched to Angular-datatables library, which uses jquery file, if i come back to bs5 i will! thanks!