How to customize buttons using DOM to be more bootstrappy?

Dzyann

So I read this post about how to customize the buttons to use bootstrap4.
I like how the buttons look in that post, but I would rather use the DOM configuration option. Following the instructions from this post.

So I updated my dom option to look like this:

dom: '<"row btn-group"<"col-sm-12 col-md-6"B><"col-sm-12 col-md-6"l>><"row"rt><"row"ip>',

And also updated my button configuration options to look like this:

 buttons: [
            {
                extend: 'excel',
                text: '<span class="glyphicon glyphicon-download-alt pull-left"></span> Excel</button>',
                titleAttr: 'Excel',
                className: 'btn btn-secondary',
                exportOptions: {
                    orthogonal: 'export'
                    //columns: [0, ':visible'],
                    //stripHtml:false

                }
            }
        ]

In the example the html structure is:

<div id="example_wrapper" class="dataTables_wrapper container-fluid dt-bootstrap4">
    <div class="row">
        <div class="col-sm-12 col-md-6">
            <div class="dt-buttons btn-group">
                <a class="btn btn-secondary buttons-copy buttons-html5" tabindex="0" aria-controls="example" href="#"><span>Copy</span></a>
                <a class="btn btn-secondary buttons-excel buttons-html5" tabindex="0" aria-controls="example" href="#"><span>Excel</span></a>
                <a class="btn btn-secondary buttons-pdf buttons-html5" tabindex="0" aria-controls="example" href="#"><span>PDF</span></a>
                <a class="btn btn-secondary buttons-collection dropdown-toggle buttons-colvis" tabindex="0" aria-controls="example" href="#"><span>Column visibility</span></a>
            </div>
        </div>
        <div class="col-sm-12 col-md-6">
            <div id="example_filter" class="dataTables_filter">
                <label>Search:<input type="search" class="form-control form-control-sm" placeholder="" aria-controls="example"></label>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <table id="example" class="table table-striped table-bordered dataTable" cellspacing="0" width="100%" role="grid" aria-describedby="example_info" style="width: 100%;">
            //Rest of the table

But my structure is:

<div id="myDataTable" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
<div class="row">
    <div class="col-sm-12 col-md-1">
        <div class="dt-buttons">
            <a class="dt-button buttons-excel buttons-html5 btn btn-secondary" tabindex="0" aria-controls="Datatable_PartListModel" href="#" title="Excel">
                <span>
                    <span class="glyphicon glyphicon-download-alt pull-left"></span> Excel</span>
            </a>
        </div>
    </div>
    <div class="col-sm-12 col-md-1">
        <div class="dataTables_length" id="Datatable_PartListModel_length">
            <label>Mostrar 
                <select name="Datatable_PartListModel_length" aria-controls="Datatable_PartListModel" class="form-control input-sm">
                    <option value="5">5</option>
                    <option value="10">10</option>
                    <option value="20">20</option>
                    <option value="-1">Todos</option>
                </select> registros
            </label>
        </div>
    </div>
</div>
<div class="row">
    //Table
</div>
<div class="row">
    //summary and indexation
</div>

As you can see there are several differences and the buttons wind up having a background with a gradient.
The major difference I see is that in your example buttons are surrounded by
<div class="dt-buttons btn-group">
and each link ('a' element) has the following classes: "btn btn-secondary buttons-copy buttons-html5"
While in my code the buttons are surrounded by
<div class="dt-buttons">
As you can see my div doesn't have the "btn-group" and each link has this classes: "dt-button buttons-excel buttons-html5 btn btn-secondary", I have an extra "dt-button".

I am thinking again I am making a silly mistake but I don't see where I am wrong. If you need additional information to help me please let me know. My grid is dynamically generated so it is not so simple to give the full definition here.

How can I make my buttons look more like in your example?
Thank you!

allan

Have you included all the Bootstrap 4 styling files? If you could link to a page showing the issue that would be very useful.

This example shows Buttons with BS4 styling.

Allan

Dzyann

So the issue was that I was adding an additional css file by mistake that was overriding somehow the bootstrap one. Once that only the correct css files were added the style worked correctly.