Bootstrap is a CSS framework that lets you quickly and easily build a user interface that has a unified look and feel. The great news is that it is very easy to integrate Bootstrap and DataTables such 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.


To have DataTables styled by Bootstrap, all you need do, as well as including the DataTables core Javascript file on your page, is include the DataTables / Bootstrap CSS and Javascript integration files. These files simply alter the DataTables defaults, such as class names to use the names used by Bootstrap, and add styling information specific to DataTables.

Both files are both available on the DataTables CDN (below) or you can obtain these files directly from the DataTables integration plug-ins repository on GitHub.



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

View example in a new window.