styling differences bootstrap4 and bootstrap5

Ficos

Link to test case bootstrap4:
Link to test case bootstrap5:
Debugger code (debug.datatables.net): none
Error messages shown: none
Description of problem:
Different styling options are no longer available in bootstrap5, like className: "text-right" and the layout of the table differs as well: searchfield to the left, beneath the buttons.

How to solve these differences?

allan

It might be missing it, but it looks like you are missing the dataTables.bootstrap5.css file there. That said, the main reason for the layout issues is:

dom: 'Bfrtip',

The default for Bootstrap 5 is actually:

        "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
        "<'row'<'col-sm-12'tr>>" +
        "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",

If you want to modify the default layout, then just like Bootstrap 4 you should base it off that since it uses Bootstrap classes.

As for text-right, see the Bootstrap 5 migration guide that they published:

Renamed .text-left and .text-right to .text-start and .text-end.

Allan