# Override Bootstrap options

With bootstrap integration, angular-datatables overrides classes so that it uses Bootstrap classes instead of DataTables'. However, you can also override the classes used by using the helper `DTOption.withBootstrapOptions`.

Angular-datatables provides default properties for Bootstrap compatibility. You can check them out on Github.

angular.module('showcase.overrideBootstrapOptions', ['datatables', 'datatables.bootstrap']) .controller('WithBootstrapOptionsCtrl', WithBootstrapOptionsCtrl); function WithBootstrapOptionsCtrl(DTOptionsBuilder, DTColumnBuilder) { var vm = this; vm.dtOptions = DTOptionsBuilder .fromSource('data.json') .withDOM('<\'row\'<\'col-xs-6\'l><\'col-xs-6\'f>r>t<\'row\'<\'col-xs-6\'i><\'col-xs-6\'p>>') // Add Bootstrap compatibility .withBootstrap() .withBootstrapOptions({ TableTools: { classes: { container: 'btn-group', buttons: { normal: 'btn btn-danger' } } }, ColVis: { classes: { masterButton: 'btn btn-primary' } }, pagination: { classes: { ul: 'pagination pagination-sm' } } }) // Add ColVis compatibility .withColVis() // Add Table tools compatibility .withTableTools('vendor/datatables-tabletools/swf/copy_csv_xls_pdf.swf') .withTableToolsButtons([ 'copy', 'print', { 'sExtends': 'collection', 'sButtonText': 'Save', 'aButtons': ['csv', 'xls', 'pdf'] } ]); vm.dtColumns = [ DTColumnBuilder.newColumn('id').withTitle('ID').withClass('text-danger'), DTColumnBuilder.newColumn('firstName').withTitle('First name'), DTColumnBuilder.newColumn('lastName').withTitle('Last name') ]; }