I'm having trouble styling the export buttons in datatables with bootstrap. When I add btn btn-primary, it only adds a blue border to the button. How can I make it look like a proper bootstrap primary button?
Additionally, I'd like to add some padding to the button. Is there a way to achieve this?
This is my current code:
<table id="example" class="table table-sm table-hover">
<thead>
<tr>
<th>Date</th>
<th>Version</th>
<th>Count</th>
<th>Average</th>
</tr>
</thead>
<tbody></tbody>
</table>
let table = $('#example').DataTable({
data: data,
columns: [{
data: 'date'
}, {
data: 'version'
}, {
data: 'count'
}, {
data: 'avg'
}],
dom: 'lBfrtip',
buttons: [{
extend: 'csv',
text: 'Export',
filename: 'Export File',
className: 'btn btn-primary'
}]
});
This is the current output:
https://i.sstatic.net/YOfD8.png
I want the button to resemble this image: https://i.sstatic.net/1bQO8.png
and I'd also like to add some padding between the button and Show 10 entries.
Can someone guide me on how to achieve this style?