bootstrap-4-tables

Day 9: Bootstrap 4 Tables Tutorial and Examples

 

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.

bootstrap-4-table-working

Photo credit to Lemon Digital for their shot.

The article is divided into the following parts:

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:

dark



There is also a dark version that you can get by adding the .table-dark class.

dark



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:

dark


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:

dark


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.

dark


Bootstrap 4 Borderless Tables

If you want to delete all borders (including the default row borders), you need the .table-borderless class.

dark


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.

dark


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.

dark


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:

dark



And this is how it looks on dark tables:

dark


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:

dark



And for individual cells:

dark


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:

dark



And used with cells:

dark


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:

dark


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:

dark



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.

dark


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.

dark


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:

dark



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.

bootstrap-4-table-finish

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:

 

 

Sharing is caring!

Cristina Conacel

Cristina is a web developer and the owner of BootstrapBay. She likes foxes, clean design, writing blog posts and creating themes that are useful to other developers.