KiRa KiRa - 2 months ago 14
CSS Question

How to center data table header and data using in bootstrap w/o using CSS?

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

CSS
of the mvc4 the
Site.css
. W/o modifying the css how can I center the Header
(Name)
and the data
(A B C D)
of my datatable?. If it is not possible how to edit it in
CSS
?. I only have a basic knowledge in
css


PICTURE

Here is my code of my JS

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 '<button type="button" class="btn btn-info btn-xs action" id="btnAddToCart_' + data + '"><i class="glyphicon glyphicon-cutlery glyphicon-fw action"></i></button>';
}
}
]
});

// 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 }
]
});
}
});

Answer

Using CSS is the best/preferred way of styling HTML.

For horizontal text alignment, Bootstrap has some helper CSS classes:

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

Source: http://getbootstrap.com/css/#type-alignment

For table cell alignment you could make your own helper CSS classes and use those:

.text-top {
  vertical-align: top;
}
.text-middle {
  vertical-align: middle;
}
.text-bottom {
  vertical-align: bottom;
}

Alternatively you could add custom CSS classes to your datatable:

<table class="example-class"> ... </table>

And then use that to style your cells:

.example-class th {
  vertical-align: middle;
}
.example-class td {
  vertical-align: top;
}
Comments