"bootstrap4 table #table #checkbox #pagination #bootstrap4 #responsive-table #material-checkbox"
Bootstrap 4.0.0 Snippet by Tawshif

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<main class="container pt-5">
<div class="card mb-5">
<div class="card-header">Fearures</div>
<div class="card-block p-0">
<table class="table table-bordered table-sm m-0">
<thead class="">
<tr>
<th>#</th>
<th>Name</th>
<th>Registration Date</th>
<th>E-mail address</th>
<th>Premium Plan</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
</label>
</td>
<td>John Lilki</td>
<td>September 14, 2013</td>
<td>jhlilk22@yahoo.com</td>
<td>No</td>
</tr>
<tr>
<td>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
html {
font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
font-size: 14px;
}
.table {
border: none;
}
.table-definition thead th:first-child {
pointer-events: none;
background: white;
border: none;
}
.table td {
vertical-align: middle;
}
.page-item > * {
border: none;
}
.custom-checkbox {
min-height: 1rem;
padding-left: 0;
margin-right: 0;
cursor: pointer;
}
.custom-checkbox .custom-control-indicator {
content: "";
display: inline-block;
position: relative;
width: 30px;
height: 10px;
background-color: #818181;
border-radius: 15px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

heyy

eheh () - 8 years ago - Reply 0


hello

tawshif () - 7 years ago - Reply -1