HTML 
CSS 
PHP 
JavaScript 
SQL 
Bootstrap 
Solidity 
jQuery 
Git 
Chrome DevTools 
C++ 
Python Whenever people need to have a bunch of exact data outputted clearly, they usually choose visual displays of data, such as graphs, charts, or tables. The thing is, they are also considered as illustrations, so you have to be aware of styling, too.
In this tutorial, we will introduce you to various CSS classes used to create Bootstrap table styles. Using them, you will be able to adapt it to the overall design of your page better. Formatting your table properly will make it not only more eye-pleasing but also quicker to access and use.
As each new CSS class is presented, a code example will be provided: feel free to play around with it, see the difference every step makes, and master styling Bootstrap tables in no time.
Contents
Bootstrap Table: Main Tips
- With the introduction of Bootstrap 4, some changes to how tables are styled have appeared.
- Additional classes for styling tables have also been presented.
- You can add scroll bars to your Bootstrap tables to make them more responsive.
Available Table Styles
You might choose not to use any Bootstrap table styles, and yet the framework will add some styling to your table itself. This will happen if you use the simple .table class. Bootstrap 4 will add some padding and changes the font. To reduce the padding size by half, you can use the .table-sm class.
Look at the code example below. The simple .table class is applied, and yet you can see some basic features of Bootstrap table styles: padding, align, and borders are all chosen for a simple, clean look:
<table class="table" style="width: 100%; max-width: 100%; margin-bottom: 1rem; background-color: transparent; border-collapse: separate; display: table; border-spacing: 2px; border-color: grey;">
<thead>
<tr>
<th style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Number</th>
<th style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Color of product</th>
<th style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Shipping date</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">009</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Green</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">May 29th</td>
</tr>
<tr>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">065</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Red</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">September 7th</td>
</tr>
<tr>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">089</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Blue</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">January 15th</td>
</tr>
</tbody>
</table>
Bordered
Bootstrap 4 also offers an option of creating a bordered table using the .table-bordered class. See the code example below: you will notice the only difference it has compared to the one we discussed before is the declared CSS class. And yet the look of the table has changed, as it now has borders.
This look might be better if your table is surrounded by text, and you need the borders to be clearly defined:
<table class="table table-bordered">
<thead>
<tr>
<th style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Number</th>
<th style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Color of product</th>
<th style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Shipping date</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">009</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Green</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">May 29th</td>
</tr>
<tr>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">065</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Red</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">September 7th</td>
</tr>
<tr>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">089</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Blue</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">January 15th</td>
</tr>
</tbody>
</table>
Hover effect
Using Bootstrap 4, you also have an option of adding a hover effect on the table using the .table-hover class. This means a particular row is highlighted when the user's cursor is hovering on it, creating a kind of Bootstrap responsive table.
This feature is especially useful when you have large tables with tons of data, and matching the first column with say, the twelfth, in just one glance is barely possible:
<table class="table table-hover">
<thead>
<tr>
<th style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Number</th>
<th style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Color of product</th>
<th style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Shipping date</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">009</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Green</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">May 29th</td>
</tr>
<tr>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">065</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Red</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">September 7th</td>
</tr>
<tr>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">089</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Blue</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">January 15th</td>
</tr>
</tbody>
</table>
Striped
If you want the rows to be clearly divided from each other, but don't want the dynamics of the hover effect, you can make a striped table. This means each second line will be in a bit of a different shade than others, making it easier to read the data. To create a striped table in Bootstrap 4, you should use .table-striped class:
<table class="table table-striped">
<thead>
<tr>
<th style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Number</th>
<th style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Color of product</th>
<th style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Shipping date</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">009</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Green</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">May 29th</td>
</tr>
<tr>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">065</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Red</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">September 7th</td>
</tr>
<tr>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">089</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Blue</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">January 15th</td>
</tr>
</tbody>
</table>
- Easy to use with a learn-by-doing approach
- Offers quality content
- Gamified in-browser coding experience
- The price matches the quality
- Suitable for learners ranging from beginner to advanced
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid Certificates of completion
- Easy to navigate
- No technical issues
- Seems to care about its users
- Huge variety of courses
- 30-day refund policy
- Free certificates of completion
Dark
A table has to not only provide information but also look good on the page. If you have a website that has a somewhat dark color scheme, the standard white table can look completely out of place. Luckily, Bootstrap 4 also offers an option of a dark-colored table using the .table-dark class. See how it works in the example.
You can see the color chosen here is #212529 (very dark blue, almost black), but you can choose any other - try changing the color codes in the code editor and play around:
<table class="table table-dark" style="color: #fff; background-color: #212529;">
<thead>
<tr>
<th style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Number</th>
<th style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Color of product</th>
<th style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Shipping date</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">009</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Green</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">May 29th</td>
</tr>
<tr>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">065</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Red</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">September 7th</td>
</tr>
<tr>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">089</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Blue</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">January 15th</td>
</tr>
</tbody>
</table>
Using Multiple Classes
As you were going through the list, you might have thought that while some of these features are nice, they are not enough to make an impression. Well, in that case, Bootstrap 4 allows you to combine table style classes.
Look at the example below. You can see both .table-dark and .table-striped are applied, making the table both dark and striped:
<table class="table table-dark table-striped" style="color: #fff; background-color: #212529;">
<thead>
<tr>
<th style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Number</th>
<th style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Color of product</th>
<th style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Shipping date</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">009</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Green</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">May 29th</td>
</tr>
<tr>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">065</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Red</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">September 7th</td>
</tr>
<tr>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">089</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Blue</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">January 15th</td>
</tr>
</tbody>
</table>
Contextual Colors
Bootstrap 4 allows use contextual color classes on whole tables or individual rows as well by applying classes such as .table-primary and others.
Review the example we have below. A different color code is defined before every row: for example, you can see "background-color: #b8daff in front of the first one. This particular code is light blue, and the first row of our table becomes colored:
<table class="table">
<thead>
<tr style="background-color: #b8daff;">
<th style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Number</th>
<th style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Color of product</th>
<th style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Shipping date</th>
</tr>
</thead>
<tbody>
<tr style="background-color: #c3e6cb;">
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">009</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Green</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">May 29th</td>
</tr>
<tr style="background-color: #f5c6cb;">
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">065</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Red</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">September 7th</td>
</tr>
<tr style="background-color: #bee5eb;">
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">089</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Blue</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">January 15th</td>
</tr>
</tbody>
</table>
Modifying Headers
Among other classes, Bootstrap 4 has a few header-oriented ones. Let's review these in closer detail.
.thread-dark class gives a table header a black background. It might be useful if your website design is made of contrasting colors, or simply if you wish to accent some table more than you usually would:
<table class="table thread-dark">
<thead style="color: #fff; background-color: #212529; border-color: #32383e;">
<tr>
<th style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Number</th>
<th style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Color of product</th>
<th style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Shipping date</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">009</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Green</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">May 29th</td>
</tr>
<tr>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">065</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Red</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">September 7th</td>
</tr>
<tr>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">089</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Blue</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">January 15th</td>
</tr>
</tbody>
</table>
.thread-light gives a light gray background to the table header. This look is more subtle, but also helps to mark a clear distinction between the header and data rows:
<table class="table thread-light">
<thead style="color: #495057; background-color: #e9ecef; border-color: #e9ecef;">
<tr>
<th style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Number</th>
<th style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Color of product</th>
<th style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Shipping date</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">009</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Green</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">May 29th</td>
</tr>
<tr>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">065</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Red</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">September 7th</td>
</tr>
<tr>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">089</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">Blue</td>
<td style="padding: .75rem; vertical-align: top; border-top: 1px solid #e9ecef;">January 15th</td>
</tr>
</tbody>
</table>
Responsive Tables
There also are certain classes which determine at what screen size a table should get a scroll bar.
The most simple way to create a responsive table Bootstrap offers is by assigning the .table-responsive class on a <div> element surrounding the table itself like this:
<div class="table-responsive">
<!-- The actual table starts here -->
<table class="table">
<!-- Table contents -->
</table>
</div>This makes the table display a horizontal scrollbar if the device it is being viewed on has a screen with a width under 992px.
Here's a list of responsive table Bootstrap classes you can use for more specific screen sizes:
- .table-responsive-sm - sroll-bar appears if screen width is less than 576px.
- .table-responsive-md- scroll-bar appears if screen width is less than 768px.
- .table-responsive-lg - scroll-bar appears if screen width is less than 992px.
- .table-responsive-xl - scroll-bar appears if screen width is less than 1200px.
Bootstrap Table: Summary
- Table styling is a bit different in Bootstrap 4, compared to how it looked in the previous version of the framework.
- You can use classes for creating various Bootstrap table styles, too.
- When creating Bootstrap responsive tables, a scroll bar might come in handy.
