Bootstrap 5

Bootstrap 5 is the next generation of the venerable CSS framework that lets you quickly and easily build a user interface that has a unified look and feel. DataTables offers full integration with Bootstrap 5 so that your DataTables will match the same look and feel of the rest of your site.

Bootstrap 5 provides a number of options for styling HTML tables, giving you flexibility over the table, while ensuring they look very slick. The DataTables / Bootstrap integration ensures that you can use all of these features as well as the enhancements that DataTables makes to a plain HTML table.

Installation

The simplest way to include the Bootstrap 5 integration for DataTables and its extensions is to use the DataTables download builder. This is a point and click interface that lets you select what styling and what software you wish to use.

The download builder has the option of hosting the required files on the DataTables CDN, downloading a package that you can host locally, or using a package manager such as NPM.

Manual installation

If you wish to use the DataTables Git repo or download package, rather than the download builder, DataTables and all of its extensions share a similar file naming conventions that can be used to include the required files.

DataTables

The main DataTables file has the name dataTables.js using the format that is common to the majority of jQuery plug-ins. There is also a styling integration file for the various styling libraries supported by DataTables, this has the format dataTables.{style}.js (dataTables.bootstrap5.js for Bootstrap 5 for example).

Both of these Javascript files should be included - the main file to include the basic DataTables functionality and the styling file to set defaults as appropriate for the styling library.

For CSS only a single file should be included as the styling library will provide the core styling options for the table. The CSS files have the format dataTables.{style}.css (dataTables.bootstrap5.css for Bootstrap 5 for example).

Extensions

The file naming conventions described above are also applied to the extensions.

For Javascript we have: dataTables.{extension}.js and {extension}.{style}.js - for example for Buttons the files to include are dataTables.buttons.js and buttons.bootstrap5.js - again the core library is included and the styling file to set appropriate defaults.

In the case of the CSS, only a single file should be included - the appropriate file for the styling being used - {extension}.{style}.css - buttons.bootstrap5.css for example.

Please note that not all extensions require Javascript and / or CSS for the styling libraries. If the styling libraries are not present in the repo or package, then they are not required.

Details

Should you be interested in the dry details of the DataTables file name conventions, please refer to this technical note.

Example

An example of a DataTable styled by Bootstrap is available here.