Hello and welcome to the 9th day of Bootstrap 4 🙃 Today we will learn about Bootstrap 4 tables. We will see the basic classes for tables, how to colour table headings, rows or cells and how to make them responsive. I have also added a section with examples for adding custom elements and how to get advanced functionalities. I hope these will help you better understand how to use Bootstrap 4 tables in your projects with ease.
So let’s get comfortable at our table and learn about tables.
Photo credit to Lemon Digital for their shot.
The article is divided into the following parts:
- Bootstrap 4 Basic Tables
- Colouring Table Elements
- Bootstrap 4 Responsive Tables
- Adding Custom Elements to Tables
- Advanced Tables
- Further Reading
Bootstrap 4 Basic Tables
Although some table properties are rebooted by Bootstrap 4 (like we have learnt in Day 1: Bootstrap 4 CDN and Starter Template) most styles are opt-in. This is because there are multiple widgets that are based on tables (calendar, datepicker, etc) and they would get broken if Bootstrap 4 overwrites the <table> tag. So, in order to get the Bootstrap 4 look for your table, you need to add the classes that you want. The basic table class in Bootstrap 4 is .table. Here is how it looks:
<table class="table">
<thead>
<tr>
<th scope="col">Day</th>
<th scope="col">Article Name</th>
<th scope="col">Author</th>
<th scope="col">Word Count</th>
<th scope="col">Shares</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Bootstrap 4 CDN and Starter Template</td>
<td>Cristina</td>
<td>913</td>
<td>2.846</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Bootstrap Grid 4 Tutorial and Examples</td>
<td>Cristina</td>
<td>1.434</td>
<td>3.417</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Bootstrap Flexbox Tutorial and Examples</td>
<td>Cristina</td>
<td>1.877</td>
<td>1.234</td>
</tr>
</tbody>
</table>
There is also a dark version that you can get by adding the .table-dark class.
<table class="table table-dark">
...
</table>
We are going to use both versions throughout the article. So, when we introduce a new style, we are going to see how it looks both on the light (default) version and on the dark version.
Bootstrap 4 Table with Caption
Adding a <caption> to a table is like adding a title to a paragraph. It helps users understand what the table is about and if they want to read it.
Here is how captions look in Bootstrap 4:
<table class="table">
<caption>List of Bootstrap 4 blog posts</caption>
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
Small Bootstrap 4 Tables
You can modify the padding of the table cells and make the table look more compact with the .table-sm class:
<table class="table table-sm">
<thead>
<tr>
<th scope="col">Day</th>
<th scope="col">Article Name</th>
<th scope="col">Author</th>
<th scope="col">Words</th>
<th scope="col">Shares</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Bootstrap 4 CDN and Starter Template</td>
<td>Cristina</td>
<td>913</td>
<td>2.846</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Bootstrap Grid 4 Tutorial and Examples</td>
<td>Cristina</td>
<td>1.434</td>
<td>3.417</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Bootstrap Flexbox Tutorial and Examples</td>
<td>1.877</td>
<td>1.234</td>
</tr>
</tbody>
</table>
Bootstrap 4 Bordered Tables
By default, Bootstrap 4 tables have borders only for rows. If you want for your cells to be bordered, you need the .table-bordered class.
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Day</th>
<th scope="col">Article Name</th>
<th scope="col">Author</th>
<th scope="col">Words</th>
<th scope="col">Shares</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Bootstrap 4 CDN and Starter Template</td>
<td>Cristina</td>
<td>913</td>
<td>2.846</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Bootstrap Grid 4 Tutorial and Examples</td>
<td>Cristina</td>
<td>1.434</td>
<td>3.417</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Bootstrap Flexbox Tutorial and Examples</td>
<td>1.877</td>
<td>1.234</td>
</tr>
</tbody>
</table>
<table class="table table-dark table-bordered">
...
</table>
Bootstrap 4 Borderless Tables
If you want to delete all borders (including the default row borders), you need the .table-borderless class.
<table class="table table-borderless">
<thead>
<tr>
<th scope="col">Day</th>
<th scope="col">Article Name</th>
<th scope="col">Author</th>
<th scope="col">Words</th>
<th scope="col">Shares</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Bootstrap 4 CDN and Starter Template</td>
<td>Cristina</td>
<td>913</td>
<td>2.846</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Bootstrap Grid 4 Tutorial and Examples</td>
<td>Cristina</td>
<td>1.434</td>
<td>3.417</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Bootstrap Flexbox Tutorial and Examples</td>
<td>1.877</td>
<td>1.234</td>
</tr>
</tbody>
</table>
<table class="table table-dark table-borderless">
...
</table>
Bootstrap 4 Striped Tables
If you want to differentiate your rows, you can colour them as striped (one light, one dark and so on). This makes it easier to identify a row and read the information in it. You can achieve this with the .table-striped class.
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Day</th>
<th scope="col">Article Name</th>
<th scope="col">Author</th>
<th scope="col">Words</th>
<th scope="col">Shares</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Bootstrap 4 CDN and Starter Template</td>
<td>Cristina</td>
<td>913</td>
<td>2.846</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Bootstrap Grid 4 Tutorial and Examples</td>
<td>Cristina</td>
<td>1.434</td>
<td>3.417</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Bootstrap Flexbox Tutorial and Examples</td>
<td>1.877</td>
<td>1.234</td>
</tr>
</tbody>
</table>
<table class="table table-dark table-striped">
...
</table>
Hoverable Rows
Another way to make reading the information on a row easier is to make the row hoverable. You can achieve this with the .table-hover class.
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Day</th>
<th scope="col">Article Name</th>
<th scope="col">Author</th>
<th scope="col">Words</th>
<th scope="col">Shares</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Bootstrap 4 CDN and Starter Template</td>
<td>Cristina</td>
<td>913</td>
<td>2.846</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Bootstrap Grid 4 Tutorial and Examples</td>
<td>Cristina</td>
<td>1.434</td>
<td>3.417</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Bootstrap Flexbox Tutorial and Examples</td>
<td>1.877</td>
<td>1.234</td>
</tr>
</tbody>
</table>
<table class="table table-dark table-hover">
...
</table>
Colouring Table Elements
Table Head Options
You can colour the table head portion of a table with the .thead-light and .thead-dark classes. This is how they look for white tables:
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">Day</th>
<th scope="col">Article Name</th>
<th scope="col">Author</th>
<th scope="col">Words</th>
<th scope="col">Shares</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Bootstrap 4 CDN and Starter Template</td>
<td>Cristina</td>
<td>913</td>
<td>2.846</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Bootstrap Grid 4 Tutorial and Examples</td>
<td>Cristina</td>
<td>1.434</td>
<td>3.417</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Bootstrap Flexbox Tutorial and Examples</td>
<td>1.877</td>
<td>1.234</td>
</tr>
</tbody>
</table>
<table class="table">
<thead class="thead-dark">
...
</thead>
<tbody>
...
</tbody>
</table>
And this is how it looks on dark tables:
<table class="table table-dark">
<thead class="thead-light">
...
</thead>
<tbody>
...
</tbody>
</table>
<table class="table table-dark">
<thead class="thead-dark">
...
</thead>
<tbody>
...
</tbody>
</table>
Table Rows and Cells Options
You can colour individual rows or cell with table classes or background utilities.
Using Table Contextual Classes
There are 9 specific classes for colouring table rows or cells with the format .table-[context]. Context can be one of the following : active, primary, secondary, success, danger, warning, info, lightand dark. We have learned about the contexts in the Bootstrap 4 buttons tutorial.
Here is how each one looks when used on rows:
<table class="table">
<thead>
<tr>
<th scope="col">Class</th>
<th scope="col">Colour</th>
</tr>
</thead>
<tbody>
<tr class="table-active">
<td scope="col">.table-active</td>
<td scope="col">Grey</td>
</tr>
<tr class="table-primary">
<td scope="col">.table-primary</td>
<td scope="col">Blue</td>
</tr>
<tr class="table-secondary">
<td scope="col">.table-secondary</td>
<td scope="col">Grey</td>
</tr>
<tr class="table-success">
<td scope="col">.table-success</td>
<td scope="col">Green</td>
</tr>
<tr class="table-danger">
<td scope="col">.table-danger</td>
<td scope="col">Danger</td>
</tr>
<tr class="table-warning">
<td scope="col">.table-warning</td>
<td scope="col">Yellow</td>
</tr>
<tr class="table-info">
<td scope="col">.table-info</td>
<td scope="col">Light Blue</td>
</tr>
<tr class="table-light">
<td scope="col">.table-light</td>
<td scope="col">White</td>
</tr>
<tr class="table-dark">
<td scope="col">.table-dark</td>
<td scope="col">Dark Grey</td>
</tr>
</tbody>
</table>
And for individual cells:
<table class="table">
<tbody>
<tr>
<td class="table-active">active</td>
<td class="table-primary">primary</td>
<td class="table-secondary">secondary</td>
<td class="table-success">success</td>
<td class="table-danger">danger</td>
<td class="table-warning">warning</td>
<td class="table-info">info</td>
<td class="table-light">light</td>
<td class="table-dark">dark</td>
</tr>
</tbody>
</table>
Using Background Utilities
Similar to the utilities for text colours that we’ve learned about in Bootstrap 4 typography tutorial, there are contextual classes for setting the background colour. The classes have the format .bg-[context], where context can be: primary, secondary, success, danger, warning, info, light, dark, whiteand transparent. The background utilities change the background colour to the corresponding colour: blue, grey, green, red, yellow, light blue, white, black and transparent.
The background utilities do not change the colour of the text from inside the div they are used on. You will need to use text utilities in combination with them if the the contrast between the text and background is not reading-friendly.
You can use both the background and the text utilities for tables. They are especially useful for dark tables, where the table contextual classes don’t work.
Here is how rows look when they are given background utility classes:
<table class="table">
<thead>
<tr>
<th scope="col">Class</th>
<th scope="col">Colour</th>
</tr>
</thead>
<tbody>
<tr class="bg-primary text-white">
<td scope="col">.bg-primary</td>
<td scope="col">Blue</td>
</tr>
<tr class="bg-secondary text-white">
<td scope="col">.bg-secondary</td>
<td scope="col">Grey</td>
</tr>
<tr class="bg-success text-white">
<td scope="col">.bg-success</td>
<td scope="col">Green</td>
</tr>
<tr class="bg-danger text-white">
<td scope="col">.bg-danger</td>
<td scope="col">Danger</td>
</tr>
<tr class="bg-warning text-white">
<td scope="col">.bg-warning</td>
<td scope="col">Warning</td>
</tr>
<tr class="bg-info text-white">
<td scope="col">.bg-info</td>
<td scope="col">Info</td>
</tr>
<tr class="bg-light">
<td scope="col">.bg-light</td>
<td scope="col">White</td>
</tr>
<tr class="bg-dark text-white">
<td scope="col">.bg-dark</td>
<td scope="col">Dark Grey</td>
</tr>
<tr class="bg-transparent">
<td scope="col">.bg-transparent</td>
<td scope="col">Transparent</td>
</tr>
</tbody>
</table>
And used with cells:
<table class="table">
<tbody>
<tr>
<td class="bg-primary text-white">primary</td>
<td class="bg-secondary text-white">secondary</td>
<td class="bg-success text-white">success</td>
<td class="bg-danger text-white">danger</td>
<td class="bg-warning text-white">warning</td>
<td class="bg-info text-white">info</td>
<td class="bg-light">light</td>
<td class="bg-dark text-white">dark</td>
<td class="bg-white">white</td>
<td class="bg-transparent">transparent</td>
</tr>
</tbody>
</table>
Bootstrap 4 Responsive Tables
Tables are not friendly to mobile devices. If their width exceeds the container, it will break the layout. There is a way to avoid this using Bootstrap 4 classes.
Always responsive
If you want for the table to be responsive on all devices, you need to wrap it in a div with the class .table-responsive. The table will be shown inside the .table-responsive and will get a horizontal scroll if its widths exceeds the parent.
Here is a table placed in a .table-responsive that only fills 6 columns in a row:
<div class="row">
<div class="col-5">
<div class="table-responsive">
<table class="table">
...
</table>
</div>
</div>
</div>
Setting Breakpoints
If you want the table to be responsive only up to a specific breakpoint, you can use the class .table-responsive-[breakpoint] instead of .table-responsive. Breakpoint can be: sm, md, lgand xl. If you use .table-responsive-lg, for example, the table will get horizontal scroll for screens that are smaller than a laptop and full width for screens bigger or equal to a laptop.
Adding Custom Elements to Tables
It is often the case that tables will not contain only text. Arranging other elements is pretty straightforward but may require using spacing utilities.
Bootstrap 4 Table with Buttons
Let’s try to add buttons to the table rows. Here is how they look by default:
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Day</th>
<th scope="col">Article Name</th>
<th scope="col">Author</th>
<th scope="col">Words</th>
<th scope="col">Shares</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Bootstrap 4 CDN and Starter Template</td>
<td>Cristina</td>
<td>913</td>
<td>2.846</td>
<td>
<button type="button" class="btn btn-primary"><i class="far fa-eye"></i></button>
<button type="button" class="btn btn-success"><i class="fas fa-edit"></i></button>
<button type="button" class="btn btn-danger"><i class="far fa-trash-alt"></i></button>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Bootstrap Grid 4 Tutorial and Examples</td>
<td>Cristina</td>
<td>1.434</td>
<td>3.417</td>
<td>
<button type="button" class="btn btn-primary"><i class="far fa-eye"></i></button>
<button type="button" class="btn btn-success"><i class="fas fa-edit"></i></button>
<button type="button" class="btn btn-danger"><i class="far fa-trash-alt"></i></button>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Bootstrap Flexbox Tutorial and Examples</td>
<td>Cristina</td>
<td>1.877</td>
<td>1.234</td>
<td>
<button type="button" class="btn btn-primary"><i class="far fa-eye"></i></button>
<button type="button" class="btn btn-success"><i class="fas fa-edit"></i></button>
<button type="button" class="btn btn-danger"><i class="far fa-trash-alt"></i></button>
</td>
</tr>
</tbody>
</table>
I have used Font Awesome icons inside the buttons so they look more compact and don’t take up too much space. If you want to see how to use the Font Awesome icons you can go back to Day 4: Bootstrap 4 Typography Tutorial and Examples.
The buttons in the example are a bit bigger than the text in the other cells, making the other cells look misaligned. We can modify the cells that contain buttons by making their padding smaller. And we can make the buttons smaller too by using the .btn-sm class.
Here is how the table above looks with small buttons.
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Day</th>
<th scope="col">Article Name</th>
<th scope="col">Author</th>
<th scope="col">Words</th>
<th scope="col">Shares</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Bootstrap 4 CDN and Starter Template</td>
<td>Cristina</td>
<td>913</td>
<td>2.846</td>
<td class="py-2">
<button type="button" class="btn btn-sm btn-primary"><i class="far fa-eye"></i></button>
<button type="button" class="btn btn-sm btn-success"><i class="fas fa-edit"></i></button>
<button type="button" class="btn btn-sm btn-danger"><i class="far fa-trash-alt"></i></button>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Bootstrap Grid 4 Tutorial and Examples</td>
<td>Cristina</td>
<td>1.434</td>
<td>3.417</td>
<td class="py-2">
<button type="button" class="btn btn-sm btn-primary"><i class="far fa-eye"></i></button>
<button type="button" class="btn btn-sm btn-success"><i class="fas fa-edit"></i></button>
<button type="button" class="btn btn-sm btn-danger"><i class="far fa-trash-alt"></i></button>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Bootstrap Flexbox Tutorial and Examples</td>
<td>Cristina</td>
<td>1.877</td>
<td>1.234</td>
<td class="py-2">
<button type="button" class="btn btn-sm btn-primary"><i class="far fa-eye"></i></button>
<button type="button" class="btn btn-sm btn-success"><i class="fas fa-edit"></i></button>
<button type="button" class="btn btn-sm btn-danger"><i class="far fa-trash-alt"></i></button>
</td>
</tr>
</tbody>
</table>
Bootstrap 4 Table with Checkboxes
Another useful component used with tables is the checkbox input. Here is an example with checkboxes on the first cell of every row.
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Select Day</th>
<th scope="col">Article Name</th>
<th scope="col">Author</th>
<th scope="col">Words</th>
<th scope="col">Shares</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1" checked>
<label class="custom-control-label" for="customCheck1">1</label>
</div>
</td>
<td>Bootstrap 4 CDN and Starter Template</td>
<td>Cristina</td>
<td>913</td>
<td>2.846</td>
</tr>
<tr>
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck2">
<label class="custom-control-label" for="customCheck2">2</label>
</div>
</td>
<td>Bootstrap Grid 4 Tutorial and Examples</td>
<td>Cristina</td>
<td>1.434</td>
<td>3.417</td>
</tr>
<tr>
<td>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck3">
<label class="custom-control-label" for="customCheck3">3</label>
</div>
</td>
<td>Bootstrap Flexbox Tutorial and Examples</td>
<td>Cristina</td>
<td>1.877</td>
<td>1.234</td>
</tr>
</tbody>
</table>
Bootstrap 4 table with Images
When adding images to a table you need to make sure you specify a max-width for the parent cell. You can use the sizing utilities or write your own CSS. By default, the content in a table cell is vertically aligned to the top. Since the images used in this example have a higher height than the rest of the content, I have changed the cell vertical alignment to center.
Here is how it looks:
<table class="table table-image">
<thead>
<tr>
<th scope="col">Day</th>
<th scope="col">Image</th>
<th scope="col">Article Name</th>
<th scope="col">Author</th>
<th scope="col">Words</th>
<th scope="col">Shares</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td class="w-25">
<img src="..." class="img-fluid img-thumbnail" alt="Sheep">
</td>
<td>Bootstrap 4 CDN and Starter Template</td>
<td>Cristina</td>
<td>913</td>
<td>2.846</td>
</tr>
<tr>
<th scope="row">2</th>
<td class="w-25">
<img src="..." class="img-fluid img-thumbnail" alt="Sheep">
</td>
<td>Bootstrap Grid 4 Tutorial and Examples</td>
<td>Cristina</td>
<td>1.434</td>
<td>3.417</td>
</tr>
</tbody>
</table>
//css
.table-image {
td, th {
vertical-align: middle;
}
}
In this example I have used the .img-thumbnail class. You can see more photo classes in Day 5: Bootstrap 4 Images Tutorial and Examples.
Advanced Tables
If the table you need for your project exceeds the features listed above, you should probably try to use a plugin. I personally recommend wenzhixin‘s Bootstrap Table: http://bootstrap-table.wenzhixin.net.cnIt is a complex repository with advanced use cases for tables like: pagination, sort, search, radio buttons and checkboxes.
To learn more about how to use it and see examples, you can go here.
This is the end of this day. By now, you should be familiar with the Bootstrap 4 tables and know how to use them. Even if you won’t remember all the classes listed here, you will be able to easily find them if you come back. Let me know if I missed something or you run into any kind of trouble. Until tomorrow, let’s have a little break.
Photo credit to Ilia PV for his shot.
Further Reading
All the code used throughout the article is available on CodePen. You can easily fork and edit it there. If you have some time left, you can look at the official Bootstrap 4 documentation:
