vendredi 26 mars 2021

How to center custom checkbox in table with Bootstrap

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 :

http://jsfiddle.net/5duvfs3b/

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