I have tried to center the first column that contains in header delete all and in lines checkbox with Bootstrap 4 but without success, I have tried text-center CSS class but its not working can someone help:
The example code is available in jsfiddle her :
I use the Bootstrap 4 And the html code is here:
<div class="content-wrapper">
<div class="content-body">
<div class="row">
<div class="col-12">
<div class="card">
<form class="list list-customer" method="POST"
action="#">
<div class="table-responsive pt-0">
<table class="list-items dt-column-search table table-striped table-bordered dataTable">
<thead class="list-header">
<tr>
<th class="p-0 text-center">
<button type="button" data-multi="1"
onclick=""
class="act-delete-all btn btn-icon btn-flat-dark btn-sm waves-effect"
tabindex="1" aria-label="Delete" title="Delete selected entries">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round"
class="feather feather-trash-2">
<polyline points="3 6 5 6 21 6"></polyline>
<path
d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
<line x1="10" y1="11" x2="10" y2="17"></line>
<line x1="14" y1="11" x2="14" y2="17"></line>
</svg>
</button>
</th>
<th class="customer-code sorting">
<a class=" " tabindex="1"
href="#">
Code<span class="float-right mr-1">
</span>
</a>
</th>
</tr>
<tr class="list-search">
<th class="dt-checkboxes-cell dt-checkboxes-select-all">
<div class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" id="checkboxSelectAll"
tabindex="">
<label class="custom-control-label" for="checkboxSelectAll"></label>
</div>
</th>
<th class="customer-code">
<input class="form-control form-control-sm" type="text" tabindex=""
placeholder="Search..." name="filter[val][3]" value="">
</th>
</tr>
</thead>
<tbody>
<tr class="list-item " data-label="Test user">
<td class="dt-checkboxes-cell">
<div class="custom-control custom-checkbox">
<input class="custom-control-input dt-checkboxes" type="checkbox" id="4"
name="id[]" value="4" tabindex="1">
<label class="custom-control-label" for="4"></label>
</div>
</td>
<td class="customer-code"><a class="items-field custom-link"
href="#"
tabindex="1">demo@example.com</a>
</td>
</tr>
<tr class="list-item " data-label="test@test.com">
<td class="dt-checkboxes-cell">
<div class="custom-control custom-checkbox">
<input class="custom-control-input dt-checkboxes" type="checkbox" id="2"
name="id[]" value="2" tabindex="1">
<label class="custom-control-label" for="2"></label>
</div>
</td>
<td class="customer-code"><a class="items-field custom-link"
href="#"
tabindex="1">test@test.com</a>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
Aucun commentaire:
Enregistrer un commentaire