Go to Bootstrap v3.x or Bootstrap v2.x demo.
Get the current version of Bootstrap (now v4.x).
In v2.31.3 , updated to Bootstrap 4.4.1.
In v2.29.3
Updated to use Bootstrap v4.0.0-beta.2.
Updated theme v4 by changing table-inverse to table-dark.
Updated theme v4 by changing thead-inverse to thead-dark.
In v2.29.0 , updated to use Bootstrap v4.0.0-beta.
In v2.28.4 , added this Bootstrap v4.0.0-alpha.6 demo.
Notes:
This version of the theme no longer requires the UITheme widget !
Bootstrap v4.x no longer includes fonts or images, so I didn't bother including Font Awesome icons on this demo page.
For more information like revision history of this theme & why there is a button to enable/disable the zebra widget, please see the Bootstrap v3.x demo .
Demo
Reset filter : Reset filters
enabled
Name
Major
Sex
English
Japanese
Calculus
Geometry
Name
Major
Sex
English
Japanese
Calculus
Geometry
Student01 Languages male 80 70 75 80 Student02 Mathematics male 90 88 100 90 Student03 Languages female 85 95 80 85 Student04 Languages male 60 55 100 100 Student05 Languages female 68 80 95 80 Student06 Mathematics male 100 99 100 90 Student07 Mathematics male 85 68 90 90 Student08 Languages male 100 90 90 85 Student09 Mathematics male 80 50 65 75 Student10 Languages male 85 100 100 90 Student11 Languages male 86 85 100 100 Student12 Mathematics female 100 75 70 85 Student13 Languages female 100 80 100 90 Student14 Languages female 50 45 55 90 Student15 Languages male 95 35 100 90 Student16 Languages female 100 50 30 70 Student17 Languages female 80 100 55 65 Student18 Mathematics male 30 49 55 75 Student19 Languages male 68 90 88 70 Student20 Mathematics male 40 45 40 80 Student21 Languages male 50 45 100 100 Student22 Mathematics male 100 99 100 90 Student23 Mathematics male 82 77 0 79 Student24 Languages female 100 91 13 82 Student25 Mathematics male 22 96 82 53 Student26 Languages female 37 29 56 59 Student27 Mathematics male 86 82 69 23 Student28 Languages female 44 25 43 1 Student29 Mathematics male 77 47 22 38 Student30 Languages female 19 35 23 10 Student31 Mathematics male 90 27 17 50 Student32 Languages female 60 75 33 38 Student33 Mathematics male 4 31 37 15 Student34 Languages female 77 97 81 44 Student35 Mathematics male 5 81 51 95 Student36 Languages female 70 61 70 94 Student37 Mathematics male 60 3 61 84 Student38 Languages female 63 39 0 11 Student39 Mathematics male 50 46 32 38 Student40 Languages female 51 75 25 3 Student41 Mathematics male 43 34 28 78 Student42 Languages female 11 89 60 95 Student43 Mathematics male 48 92 18 88 Student44 Languages female 82 2 59 73 Student45 Mathematics male 91 73 37 39 Student46 Languages female 4 8 12 10 Student47 Mathematics male 89 10 6 11 Student48 Languages female 90 32 21 18 Student49 Mathematics male 42 49 49 72 Student50 Languages female 56 37 67 54
Page Header
<!-- Bootstrap v4.x stylesheet -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- bootstrap css theme -->
<link rel="stylesheet" href="css/theme.bootstrap_4.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.tablesorter.js"></script>
<script src="js/jquery.tablesorter.widgets.js"></script>
<!-- pager plugin -->
<link rel="stylesheet" href="css/jquery.tablesorter.pager.css">
<script src="js/jquery.tablesorter.pager.js"></script>
<style>
.tablesorter-pager .btn-group-sm .btn {
font-size: 1.2em; /* make pager arrows more visible */
}
</style>
Javascript
HTML