Bootstrap allows to create beautiful tables using the CSS framework. Version 4 has some new classes for inverting the table color and making the table responsive. You can different type of tables easily with the latest version 5 also. In this tutorial we will discuss various possibilities of creating tables with Bootstrap 5. You can download the files used on the this tutorial here.
Default Bootstrap 5 Table
Bootstrap table uses all HTML table tags with the header inside <thead> and the body of the table inside <tbody> tags. In our example, let us create simple mark sheet in a table format with four student names (in rows) and five subjects with average percentage (in columns). Below is the code for default Bootstrap table.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags for Bootstrap 5 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<!-- Start of Table -->
<table class="table">
<thead>
<tr>
<th>Student Name</th>
<th>Sub1</th>
<th>Sub2</th>
<th>Sub3</th>
<th>Sub4</th>
<th>Sub5</th>
<th>%</th>
</tr>
</thead>
<tbody> <tr>
<td>Thomas</td>
<td>80</td>
<td>90</td>
<td>70</td>
<td>80</td>
<td>75</td>
<td>79</td>
</tr> <tr>
<td>Peter</td>
<td>100</td>
<td>90</td>
<td>68</td>
<td>75</td>
<td>89</td>
<td>84.4</td>
</tr>
<tr>
<td>John</td>
<td>55</td>
<td>43</td>
<td>57</td>
<td>76</td>
<td>45</td>
<td>55.2</td>
</tr>
<tr>
<td>Kelly</td>
<td>84</td>
<td>76</td>
<td>89</td>
<td>76</td>
<td>90</td>
<td>83</td>
</tr>
</tbody>
</table>
<!-- End of Table -->
<!-- Bootstrap 5 Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>By default the only CSS class required for creating a Bootstrap table is the “table” class applied directly on the HTML table element. You don’t need to create a <div> tag for inserting tables in Bootstrap. The default tag will produce the following result:
Inverting the Table Colors
Bootstrap 4 allows you to invert the color of your table by adding “table-inverse” to the <table> tag. It will invert the background to dark and the text to light colors. The code should look like below:
<table class="table table-inverse">
All content remains same here similar to default table.
<table>The inverse table will have very dark and attractive background as shown below:
Inverse Header Table
In previous case the “table-inverse” class was applied to the entire table. Bootstrap 4 also allows to invert only the header background and text colors. In order to invert the header just add the “thead-inverse” class to the <thead> tag.
<table class="table">
<thead class="thead-inverse">
</thead>
</table>And our mark sheet table will have a black header row like below:
That’s not all!!! There are many more options with Bootstrap. Let us create some more variations.
Striped Bootstrap 4 Table
Striped table allows you to create alternate colors for the rows. Just add “table-striped” to the existing “table” class” and the table will have striping pattern. The light grey background color will be applied to all odd numbered rows starting from the first row.
<table class="table table-striped">
</table>Striped table is mostly preferred to differentiate the rows and showcase the content to visitors.
Bootstrap Bordered Table
This one will simple add the border to the default table. What you need is to append “table-bordered” class to the existing “table” class.
<table class="table table-bordered">
</table>Our mark sheet table with border should look like below:
You can also easily create the bordered table with stripes on rows.
<table class="table table-striped table-bordered">
</table>Table with Hover Effects on Rows
How about adding hover effects to your table? The “table-hover” class will do that for you. Hover the mouse over the table to see the corresponding row is highlighted with light grey background color.
<table class="table table-hover">
</table>Below is how your table should look when you move the mouse on second row.
Responsive Bootstrap Table for Smaller than 768 Pixel Devices
Creating a responsive table in Bootstrap 4 is very simple. You don’t need to add additional <div> for adding responsiveness. Just insert “table-responsive” class, a horizontal scroll bar will be automatically added to the table when viewed on the browser below 768 pixels screen size.
<table class="table table-responsive">
</table>Here is how our responsive table will be looking. Remember the horizontal scroll bar will only appear when the table is viewed with the screen size smaller than 768 pixel. Otherwise you will not find any difference compared to regular Bootstrap table.
Bootstrap Table with Compressed Text
Sometimes it is necessary to compress the height of the table to reduce the space occupied. Bootstrap allows to do this by adding “table-sm” class to an existing “table” class as shown below:
<table class="table table-sm">
</table>This will remove the padding and make the table height compact.
Creating Bootstrap Table with Background Color
As of now, what we have discussed is to create simple table or to have default light grey background for rows. Bootstrap also enables coloring your table cells and rows to make it beautiful. You can highlight any rows or any cells of your table in five different colors. There are two set of CSS classes that help you to add background colors – one is contextual classes and other is background utility classes. The below table explains different options available:
| Table Contextual Classes | |
| table-active | Light grey hover color |
| table-success | Light green success or positive action |
| table-info | Light blue for information message |
| table-warning | Light yellow for indicating warning |
| table-danger | Light red for indicating danger |
| table-primary | Light blue for indicating primary color in Bootstrap |
| table-secondary | Light red for indicating danger |
| table-light | Light gray for indicating no color |
| table-dark | Light black for indicating dark |
| Background Utility / Contextual Classes | |
| bg-primary | Medium blue as primary color |
| bg-success | Forest green for success |
| bg-warning |
Free speech green color for warning
|
| bg-info | Light sea green for information |
| bg-danger | Red (Cinnabar) for danger |
| bg-light | Solitude for light |
| bg-dark | Mirage color for dark |
| bg-secondary | Aluminium color for secondary |
Remember these classes can be applied to individual rows and cells of Bootstrap table in any combination.
Colored Rows with Contextual Classes
Let us apply the contextual classes on our mark sheet table to see them on action. Below code applies “table-active” class to the first row of the table to change the background color to light grey.
<table class="table">
<tr class="table-active">
<td>Thomas</td>
<td>80</td>
<td>90</td>
<td>70</td>
<td>80</td>
<td>75</td>
<td>79</td>
</tr> <tr>
</table>Below is how the complete table will look when you apply “table-success”, “table-warning” and “table-danger” classes to second, third and fourth <tr> elements of the table.
Colored Rows with Background Colors
Similar to table contextual classes, you can apply background colors to rows using background contextual classes.
<table class="table">
<tr class="bg-success">
<td>Thomas</td>
<td>80</td>
<td>90</td>
<td>70</td>
<td>80</td>
<td>75</td>
<td>79</td>
</tr> <tr>
</table>Below is an eye catching table has “bg-success”, “bg-danger”, “bg-warning”, “bg-info” and other background utility classes applied to the rows.
Colored Cells with Contextual Classes
Each cell of a Bootstrap table can be applied with one of the contextual classes to highlight it from other cells. This will be really useful when you have bigger table and wanted to highlight only few cells. Below code shows applying the “table-active” contextual class to a table cell.
<table class="table">
<tr>
<td>Thomas</td>
<td class="table-active">80</td>
<td>90</td>
<td>70</td>
<td>80</td>
<td>75</td>
<td>79</td>
</tr> <tr>
</table>Below table has four cells applied with different background colors randomly.
Colored Rows and Cells with Background Colors and Contextual Classes
Finally you can apply table contextual class and background contextual class in any combination to make different background colors for rows and cells.
<table class="table">
<tr class="table-active">
<td>Thomas</td>
<td class="table-info">80</td>
<td>90</td>
<td>70</td>
<td>80</td>
<td>75</td>
<td class="bg-success">79</td>
</tr> <tr>
</table>Here is how the example table will look like with various colors applied for rows and cells.
1 Comment
Leave your reply.