How to center data table header and data using in bootstrap w/o using CSS?
<p>I am starting to learn asp.net mvc4 and bootstrap so far I managed to create this Data table. I am using the current default <code>CSS</code> of the mvc4 the <code>Site.css</code>. W/o modifying the css how can I center the Header <code>(Name)</code> and the data <code>(A B C D)</code> of my datatable?. If it is not possible how to edit it in <code>CSS</code>?. I only have a basic knowledge in <code>css</code></p>

<p><a href="https://i.stack.imgur.com/zON55.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zON55.png" alt="PICTURE"></a></p>

<p>Here is my code of my JS</p>

<pre><code>var globalPersonId = 1;
var dataTablesOrderedList = "";
$(document).ready(function () {

var dataTablesFirstBS = $('#dataTables-FIrstSample').DataTable({
    responsive: true,
    processing: true,
    info: true,
    search: true,
    stateSave: true,
    order: [[1, "asc"]],
    lengthMenu: [[50, 100, 200, -1], [50, 100, 200, "All"]],
    ajax: { "url": "/BS/GetFirstDataTable" },
    columns:
    [
        { data: "BSId", title: "", visible: false, searchable: false, sortable: false },
        { data: "Name", title: "Name", sClass: "alignCenter", sortable: false },
        {
            data: "ActionMenu", title: "Sample Button", width: "100px", sAlign: "alignCenter", searchable: false, orderable: false, sClass: "alignCenter",
            "mRender": function (data) {
                return '&lt;button type="button" class="btn btn-info btn-xs action" id="btnAddToCart_' + data + '"&gt;&lt;i class="glyphicon glyphicon-cutlery glyphicon-fw action"&gt;&lt;/i&gt;&lt;/button&gt;';
            }
        }
    ]
});

//    MyFirstBS();
function MyFirstBS() {

    dataTablesOrderedList = $('#tblMyFirstBS').DataTable({
        responsive: true,
        processing: true,
        info: true,
        retrieve: true,
        destroy: true,
        search: true,
        stateSave: true,
        lengthMenu: [[5, 10, 20, -1], [5, 10, 20, "All"]],
        ajax: {
            "url": "/BS/GetFirstDataTable",
            "data": function (d) {
                d.BSId = globalPersonId;
            }
        },
        columns:
    [
        { data: "BSId", title: "", visible: false, searchable: false, sortable: false },
        { data: "Name", title: "Name", searchable: false, sortable: false }
    ]
    });
   }
  });
</code></pre>