Quick Reach
- 1 What are Bootstrap Tables?
- 2 A basic Bootstrap based table example
- 3 Bootstrap stripped rows example
- 4 Creating a bordered table Bootstrap example
- 5 Hover rows table example with Bootstrap
- 6 Adding Bootstrap classes to rows
- 7 Example of using the classes in the table data
- 8 Responsive Tables with Bootstrap
- 9 Related
What are Bootstrap Tables?
The Bootstrap framework includes CSS classes for the tables in your web documents. The Bootstrap table classes allow different and beautiful table styles that you can create quite easily by simply including the CSS classes in the table tags.
A few of the table classes in Bootstrap framework 3 are:
- .table – for basic table style without a border.
- .table-striped – To add zebra striping to table rows (not compatible with IE 8).
- .table-bordered – Adds a bordered table
- .table-hover – Use this if you want hovered rows in the tables
Following are a few examples of using the table classes with online examples that you can see by clicking at “Experience it online”.
A basic Bootstrap based table example
The following example uses the .table class of Bootstrap CSS to create a table. The created table is without the borders.
Experience this online
|
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
<!DOCTYPE html>
<html>
<head>
<title>BS Tables</title>
<link rel=“stylesheet” type=“text/css” href=“css/bootstrap.min.css”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
</head>
<body>
<div>
<h1>Table example</h1>
<table>
<tr>
<th>Employee Name</th>
<th>Emplyee Salary</th>
</tr>
<tr>
<td>Mike</td>
<td>$5000</td>
</tr>
<tr>
<td>Dave</td>
<td>$6000</td>
</tr>
<tr>
<td>Shena</td>
<td>$4000</td>
</tr>
</table>
</div>
</body>
</html>
|
As you can see online, a table is created without the borders around a table and its rows. The headings are bold while table data is left aligned.
Bootstrap stripped rows example
Following example uses the table-striped class to create the stripped rows in a table.
Experience this online
|
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
<!DOCTYPE html>
<html>
<head>
<title>BS Tables</title>
<link rel=“stylesheet” type=“text/css” href=“css/bootstrap.min.css”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
</head>
<body>
<div>
<h1>Table example</h1>
<table>
<tr>
<th>Employee Name</th>
<th>Emplyee Salary</th>
</tr>
<tr>
<td>Mike</td>
<td>$5000</td>
</tr>
<tr>
<td>Dave</td>
<td>$6000</td>
</tr>
<tr>
<td>Shena</td>
<td>$4000</td>
</tr>
</table>
</div>
</body>
</html>
|
You can see, the first row’s background is light gray and the next is white. The next row is light gray and so on. The rows are styled by the :nth-child CSS selector, which is not compatible with IE 8. So if you have no issue with older browsers then you can simply use this class. And look how simple it is to create a beautiful stripped table with Bootstrap framework.
Creating a bordered table Bootstrap example
Following example creates a bordered table using the same data as in the above examples by using the .table-bordered class.
Experience this online
|
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
<!DOCTYPE html>
<html>
<head>
<title>The Tables in Bootstrap</title>
<link rel=“stylesheet” type=“text/css” href=“css/bootstrap.min.css”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
</head>
<body>
<div>
<h1>Table example bootstrap</h1>
<table>
<tr>
<th>Employee Name</th>
<th>Emplyee Salary</th>
</tr>
<tr>
<td>Mike</td>
<td>$5000</td>
</tr>
<tr>
<td>Dave</td>
<td>$6000</td>
</tr>
<tr>
<td>Shena</td>
<td>$4000</td>
</tr>
</table>
</div>
</body>
</html>
|
Hover rows table example with Bootstrap
As mouse comes over a row in a table, the background color will change. This style looks nice and especially for long tables, it enables users to differentiate the ‘seen’ rows to the others in a table. You can create hover rows by using the .table-hover class. Look at an example below that shows how easy it is to create a hover style table.
Experience this online
|
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Tables</title>
<link rel=“stylesheet” type=“text/css” href=“css/bootstrap.min.css”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
</head>
<body>
<div>
<h1>Table example</h1>
<table>
<tr>
<th>Employee Name</th>
<th>Emplyee Salary</th>
</tr>
<tr>
<td>Mike</td>
<td>$5000</td>
</tr>
<tr>
<td>Dave</td>
<td>$6000</td>
</tr>
<tr>
<td>Shena</td>
<td>$4000</td>
</tr>
</table>
</div>
</body>
</html>
|
You can also add table-bordered in the <table> tag to add the border in hovered style. See example below:
Experience this online
|
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
<!DOCTYPE html>
<html>
<head>
<title>Tables Bootstrap</title>
<link rel=“stylesheet” type=“text/css” href=“css/bootstrap.min.css”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
</head>
<body>
<div>
<h1>Bootstrap example</h1>
<table>
<tr>
<th>Employee Name</th>
<th>Emplyee Salary</th>
</tr>
<tr>
<td>Mike</td>
<td>$5000</td>
</tr>
<tr>
<td>Dave</td>
<td>$6000</td>
</tr>
<tr>
<td>Shena</td>
<td>$4000</td>
</tr>
</table>
</div>
</body>
</html>
|
You can see, a table with hover rows and a border is created by using table classes of Bootstrap framework.
Adding Bootstrap classes to rows
In the above example, we have seen how to apply Bootstrap CSS classes to the table tag. You can also apply classes to individual rows or even table data elements in your web pages. For example showing a row as “active”. Following are a few examples of using the CSS classes in the rows.
Example of using classes in the rows
The following example uses success, active, info classes in a table with a border. The rows can be differentiated by different colors.
Experience this online
|
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
<!DOCTYPE html>
<html>
<head>
<title>Table in bootstrap</title>
<link rel=“stylesheet” type=“text/css” href=“css/bootstrap.min.css”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
</head>
<body>
<div>
<h1>Bootstrap example</h1>
<table>
<tr>
<th>Employee Name</th>
<th>Emplyee Salary</th>
</tr>
<tr>
<td>Mike</td>
<td>$5000</td>
</tr>
<tr class=“success”>
<td>Dave</td>
<td>$6000</td>
</tr>
<tr class=“active”>
<td>Shena</td>
<td>$4000</td>
</tr>
<tr>
<td>Shaun</td>
<td>$5000</td>
</tr>
<tr class=“info”>
<td>Ben</td>
<td>$3500</td>
</tr>
</table>
</div>
</body>
</html>
|
Note that, names in the table are just for illustration purpose.
Example of using the classes in the table data
You can also use these classes in <td> to distinguish data in the table. See example below:
Experience this online
|
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
<!DOCTYPE html>
<html>
<head>
<title>Tables</title>
<link rel=“stylesheet” type=“text/css” href=“css/bootstrap.min.css”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
</head>
<body>
<div>
<h1>Table example</h1>
<table>
<tr>
<th>Employee Name</th>
<th>Emplyee Salary</th>
</tr>
<tr>
<td>Mike</td>
<td>$5000</td>
</tr>
<tr>
<td class=“success”>Dave</td>
<td>$6000</td>
</tr>
<tr>
<td>Shena</td>
<td>$4000</td>
</tr>
<tr>
<td >Shaun</td>
<td>$5000</td>
</tr>
<tr>
<td>Ben</td>
<td class=“danger”>$3500*</td>
</tr>
</table>
</div>
</body>
</html>
|
Responsive Tables with Bootstrap
As such, Bootstrap framework is mobile first; how come Bootstrap based tables cannot be responsive! As the screen gets smaller, the behavior of a table also changes to give the best user experience. If you simply use the above examples in smaller devices like under 300* resolution, the horizontal bar comes in at the browser level. To make the user experience much better, you can wrap table into .table-responsive.
You can simply create a div above the table and wrap that table into the table-responsive class. If the screen resolution is less than 768px then the table will scroll horizontally. Following example shows how to use it:
Experience this online
|
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
<!DOCTYPE html>
<html>
<head>
<title>Tables</title>
<link rel=“stylesheet” type=“text/css” href=“css/bootstrap.min.css”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
</head>
<body>
<div>
<h1>Bootstrap example</h1>
<div class=“table-responsive”>
<table class=“table table-striped table-bordered”>
<tr>
<th>Employee Name</th>
<th>Emplyee Salary</th>
<th>Emplyee Age</th>
</tr>
<tr>
<td>Mike</td>
<td>$5000</td>
<td>45</td>
</tr>
<tr>
<td>Dave</td>
<td>$6000</td>
<td>35</td>
</tr>
<tr>
<td>Shena</td>
<td>$4000</td>
<td>27</td>
</tr>
<tr>
<td>Shaun</td>
<td>$5000</td>
<td>32</td>
</tr>
</table>
</div>
</div>
</body>
</html>
|
Related reading: Twitter Bootstrap Tutorial | A demo theme with bootstrap | Bootstrap CSS
Leave A Comment?