jQuery Datatables customize DOM

Question

I have this setup for my table:

$(document).ready(function() {
        $('#example').DataTable({
            dom: 'Bfrtilp',
            responsive: true,
            "order": [[ 1, "desc" ]],
            "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Alle"]],
            buttons: [
                {
                    extend: 'copyHtml5',
                    exportOptions: {
                        columns: [ 0, ':visible' ]
                    }
                },
                {
                    extend: 'excelHtml5',
                    title: 'Events export'
                },
                {
                    extend: 'pdfHtml5',
                    title: 'Events export'

                },
                'colvis'
            ],
            "language": {"url": "/vendor/datatables/german.json"}
        });
    });

and it looks like this:

and the problem is that the buttons are not inline with search field and pagination is not inline with "lengthMenu" field.

I want it to be like this:

How can i edit the output for these functions....so they are lined up nicely?

Answer 1

Add this to the head. .btn-group { margin-bottom: -45px;z-index: 2;}