Bootstrap is a CSS framework that lets you quickly and easily build a user interface that has a unified look and feel. It is super easy to integrate Bootstrap and DataTables so that your fully featured DataTables will match the same look and feel of the rest of your site.

Bootstrap 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.


The simplest way to include the Bootstrap 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 or downloading a package that you can host locally.

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.


The main DataTables file has the name jquery.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.bootstrap.js for Bootstrap 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.bootstrap.css for Bootstrap for example).


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

For Javascript we retain the two part name and drop the jquery. part, so now we have: dataTables.{extension}.js and {extension}.{style}.js - for example for Buttons the files to include are dataTables.buttons.js and buttons.bootstrap.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.bootstrap.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.


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


An example of a DataTable styled by Bootstrap is shown below.

View example in a new window.