Q: Buttons are not aligned in Datatables-angular I have used angular Data Tables for rendering my data. I have anything initialized data Tables properly but there is a problem in CSS as may be. I am not getting my desired result . The output of beef is the output off my data table and you can see that next and other buttons are not aligned properly what should I do to fix it?
Datatable output
I have initialize data tables in component.ts
  this.dtOptions = {
  pagingType: 'full_numbers',
  lengthMenu: [
    [5, 10, 15, 25, -1],
    [5, 10, 15, 25, 'All']
  ],
  destroy: true,
  retrive: true,
  language: {
    search: '_INPUT_',
    searchPlaceholder: 'Search records',
  },
  dom: "<'row' <'col-md-5 col-sm-12'l> <'col-md-3'B> <'col-md-3 col-sm-12' f> >r t  <'row' <'col-md-10 col-sm-12'i> <'col-md-2 col-sm-12' p> >",

  buttons: [
    {
      text: 'Excel',
      extend: 'excel',
      className: ' btn btn-sm button btn-outline-light ',
      exportOptions: {
        columns: 'th:not(:last-child)'
      }
    },
    {
      extend: 'print',
      text: 'Print',
      className: ' btn-sm button btn  btn-outline-light ',
      exportOptions: {
        columns: 'th:not(:last-child)'
      }
    },
    {
      extend: 'copy',
      text: 'Copy',
      className: ' btn-sm button btn  btn-outline-light ',
      exportOptions: {
        columns: 'th:not(:last-child)'
      }
    },
    {
      extend: 'csv',
      text: 'CSV',
      className: ' btn-sm button btn  btn-outline-light',
      exportOptions: {
        columns: 'th:not(:last-child)'
      }
    },
    {
      extend: 'pdf',
      text: 'PDF',
      className: ' btn-sm button btn  btn-outline-light',
      exportOptions: {
        columns: 'th:not(:last-child)'
      }
    }
  ]
};

MY HTML File
<div class="row"  >
<div class="heading" style="padding:0px 0px 0px 10px;margin-bottom: 10px;">
  <table class="table table text-white table-hover table-bordered table-stripped" datatable [dtOptions]="dtOptions"
    [dtTrigger]="dtTrigger" id="mainTable">
    <thead>
      <tr>
        <th scope="col">S no.</th>
        <th scope="col"> Project Name </th>
        <th scope="col"> Total Sites </th>
        <th> Report Date </th>
        <th> UART </th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let device of devices; let i = index">
        <td>{{i+1}}</td>
        <td> {{device.project}} </td>
        <td> {{device.total_sites}} </td>
        <td> {{device.report_date | date : 'MMM d, y'}} </td>
        <td> {{device.uart }} </td>
      </tr>
    </tbody>
  </table>
</div>

How to solve error?
