Bootstrap Table Guide and Best Bootstrap Table Examples

Tables and data visualization

Tables are so widespread and trivial it’s easy to take them for granted. Meanwhile, the value of a table or spreadsheet for big data is like that of an assembly line for heavy industry. Before we dive into our Bootstrap table examples, let’s take a moment to realize what an achievement we have at our disposal. When an aspiring business analyst or data scientist learns his or her craft, a good part of the learning process is dedicated to graphics. The demand for a mixture of hard data and fine art isn’t accidental. With technical progress, the data we work with gets more complex. As data gets more complex, understanding it becomes harder.

Data visualization is an ancient art. You may have heard of the term “Ptolemy’s Map”. That is the name commonly given to all geographical knowledge contained in the works of Claudius Ptolemy, not to be confused with Egyptian pharaohs. Claudius Ptolemy was a mathematician, an astronomer, a geographer, and a musical theorist (apparently, it was a thing back then). He lived in Alexandria in the second century A.D. and almost certainly never visited most places found in his maps. Still, his maps and descriptions give a fair representation of what lay beyond the horizon. Sure, the proportions were distorted and the distances inaccurate, but the man died almost 1,800 years before the launch of the first satellite. Let us give him some credit! Maps existed back then, and they were tools, not curiosities. Even when the world’s largest library contained less data than an average smartphone does today, it was obvious how helpful it is to represent information in a simplified visual way. Hence the modern popularity of infographics and diagrams.

Tables in modern Web Development

Tables are an important part of any web application’s life. Tables help both visualize and structure data. Instead of reading each entry’s full parameters, its location in the table gives us some insight. They help us absorb large amounts of data with relative ease. We can say that tables are the foundation of a modern web application. Therefore, it is very important to make them carefully and with love. After we’ve reviewed the best javascript table plugins, we decided to create a digest of the best tables out there, categorized by one technology. Here it is: today we will talk about Bootstrap tables.

Bootstrap table is good for creating date pickers, admin panels, calendars, and all other stuff to show complex data.

In this article, you will learn what a bootstrap table is, how to make basic bootstrap tables and how to make them beautiful. You will also learn how to customize bootstrap tables. After that, we will list the best examples of ready-made bootstrap tables.

What is a bootstrap table? A basic example of Bootstrap table

Bootstrap tables are well-organized components for displaying data. The data is presented in the form of columns and tables. Bootstrap tables are opt-in. To build it, you just need to add .table class to any <table> and then style it.

The code example of the basic Bootstrap table looks like this:

<table class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">Name</th> <th scope="col">Surname</th> <th scope="col">Username</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Eugene</td> <td>Stepnov</td> <td>@e93</td> </tr> <tr> <th scope="row">2</th> <td>Mark</td> <td>Dever</td> <td>@md111</td> </tr> <tr> <th scope="row">3</th> <td>John</td> <td>Piper</td> <td>@piper</td> </tr> </tbody>
</table>

Bootstrap Table Classes

The basic principle when developing a bootstrap table is classes. You don’t need to write cumbersome CSS to style and customize your table. Just add classes to the <table> tag describing how the table will behave. For example, here are the most popular classes:

Border: Add a border with .table bordered;

Colors: Add color to different rows with .table striped;

Condense: Make your rows more compact with .table-condensed;

Hover: Highlight a table sortable line when you hover with .table-hover.

Next, we’ll look at how to put these classes into practice.

Types of bootstrap table

Now let’s take a look at different basic manipulations with Bootstrap table.

Striped rows and dark table

For creating a striped row table you just need to add .table-striped to any table row within the <tbody>. You can also add the table dark class to make the table dark and invert the colors.

<table class="table table-dark table-striped"> <thead> <tr> <th scope="col">#</th> <th scope="col">Name</th> <th scope="col">Surname</th> <th scope="col">Username</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Eugene</td> <td>Stepnov</td> <td>@e93</td> </tr> <tr> <th scope="row">2</th> <td>Mark</td> <td>Dever</td> <td>@md111</td> </tr> <tr> <th scope="row">3</th> <td>John</td> <td>Piper</td> <td>@piper</td> </tr> </tbody>
</table>

Bordered and borderless bootstrap table

To add borders to a table, use the .table-bordered class. In this case, the table tag will look like this

<table class="table table-bordered">
...
</table>

For the borderless table, you should use:

<table class="table table-borderless">
...
</table>

Contextual bootstrap table classes

You can also use contextual classes to colorize individual lines or cells. It’s also worth mentioning that you can use several different classes at the same time to build a wide variety of tables.

To make a colorized table, you can apply the following classes to <tr> elements (rows) or <td> elements (individual cells):

.Table-primary
.Table-secondary
.Table-success
.Table-danger
.Table-warning
.Table-info
.Table-light
.Table-dark

In our example below, we have made a small table with a hover, using 3 context classes to colorize individual lines.

<table class="table table-sm table-hover"> <thead> <tr> <th scope="col">#</th> <th scope="col">Name</th> <th scope="col">Surname</th> <th scope="col">Username</th> </tr> </thead> <tbody> <tr class="table-danger"> <th scope="row">1</th> <td>Eugene</td> <td>Stepnov</td> <td>@e93</td> </tr> <tr class="table-success"> <th scope="row">2</th> <td>Mark</td> <td>Dever</td> <td>@md111</td> </tr> <tr class="table-warning"> <th scope="row">3</th> <td>John</td> <td>Piper</td> <td>@piper</td> </tr> </tbody>
</table>

Bootstrap table heads color

You can also specify different background colors for the table head using the modifier classes .thead-light or .thead-dark on the <thead> element.

The following example uses the class .thead-light to create a table with a light head.

<table class="table table-dark table-striped"> <thead class="thread-light"> <tr> ... </tr>
</table>

Likewise, you can use the class .thead-dark to create a table with a dark head.

<table class="table table-dark table-striped"> <thead class="thread-dark"> <tr> ... </tr>
</table>

Hoverable rows

Sometimes you need to highlight some rows of a table. Then we need to use :hover. In bootstrap, you don’t need to modify anything in the CSS file: just add the .table-hover class to the <table> tag

<table> tag <table class="table table-hover">
...
</table>

Small bootstrap table

If you want to develop a small compact table, just add class .table-sm.

<table class="table table-sm">
...
<table/>

Responsive bootstrap table

One thing you simply need to know about is responsive bootstrap tables. To make any table responsive, wrap the <table> tag in a <div> with the class .table-responsive. Or you can specify the maximum breakpoint at which this table property will appear by adding the class .table-responsive {-sm | -md | -lg | -xl}. Look at an example below.

<div class="table-responsive"> <table class="table"> ... </table>
</div>

Bootstrap table with images

Adding images to a table, 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.

<table class="table table-image"> <thead> <tr> <th scope="col">Number</th> <th scope="col">Avatar</th> <th scope="col">First Name</th> <th scope="col">Last Name</th> <th scope="col">Username</th> <th scope="col">Social Link</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td class="w-25">
<img src="https://s7d9.scene7.com/is/image/LifeWayChristianResources/piper_john_author?wid=300&hei=300&op_usm=2,.5,6,0" alt="John Piper"> </td> <td>John</td> <td>Piper</td> <td>@johnpiper</td> <td>twitter</td> </tr> <tr> <th scope="row">2</th> <td class="w-25">
<img src="https://www.capitolhillbaptist.org/monkimage.php?mediaDirectory=mediafiles&mediaId=3241749&fileName=mark-dever-2-300-300-0-0.jpg" class="img-fluid img-thumbnail" alt="Mark Dever"> </td> <td>Mark</td> <td>Dever</td> <td>@markdever</td> <td>twitter</td> </tr> </tbody>
</table>

Common questions about bootstrap table

How to style a bootstrap table?

To style the bootstrap table, add various classes to the <table>, <th>, <tr> tags. For example, the .table-sm class will make your table compact. For more details refer to the official bootstrap documentation.

What is table responsive in bootstrap?

Table responsive allows any table to scroll horizontally. To make any table responsive just add .table-responsive class to <table> tag.

How do I add a border to a bootstrap table?

To add borders to the table, use the .table-bordered class on the <table> tag

How do I center the text bootstrap table?

The easiest way to center text in the bootstrap table is to add .text-center class in the <table> tag.

How do I make a scrollable table in bootstrap?

Use a responsive table to add scroll. Just add .table-responsive class to a <table> tag.

Best Bootstrap Table Examples

Bootstrap table

The bootstrap table is a plugin for integration with the most popular CSS frameworks. It is an extended version of the table that integrates with many CSS frameworks. It supports Material Design, Bootstrap, Bulma, Semantic UI, and Foundation. You can install it with npm or yarn by using the Bootstrap Table source JavaScript files and CSS.

One of the most important things about this plugin is that you make the table fully responsive in a very short time. The plugin is maintained by thousands of contributors and it has thousands of commits. The other good thing is that this library has great documentation with many live examples with source code on how to use this plugin. For instance, there are examples of a Modal table, different use of buttons, how to add search, merge or update cells, and other features that can extend your bootstrap table.

Notable features:

• responsive web design;
• scrollable table with fixed headers;
• fully configurable via data attributes;
• get data in JSON format using AJAX;
• simple column sorting with a click;
• powerful pagination and localization.

Bootstrap tables in Light Blue Bootstrap Admin Template

Light Blue HTML5 Admin Template is a product developed by Flatlogic, made in dark and transparent colors. The template is made on the basis of Bootstrap 4 and is fully responsive. In addition to tables, you will find many other components in this template such as buttons, icons, dashboards and others.

As for tables, in this template they are subdivided into Tables Basic and Tables Dynamic.

In Tables Basic you will find static bootstrap tables with the following features:

• Tables with buttons;
• Tables with images;
• Striped and bordered tables;
• Hover and overflow tables;
• Tables with checkboxes.

In Tables Dynamic section you will find the following features:

• Sortable tables;
• Working search console;
• Tables made on top of Backgrid.js;
• Tables made on top of jQuery DataTables.

As a result, using this template, you get not only different types of well-designed bootstrap tables, but also a well-thought-out admin panel for a full-fledged web application with different components.

MDbootstrap bootstrap table generator

This tool allows you to quickly generate a bootstrap table to see how it will look, and copy the resulting code. The tool can create tables using the following combinations of bootstrap classes:

• Striped
• Hoverable
• Bordered
• Borderless
• Small
• Responsive
• Captions

Also, in addition to this, you can choose the color of cells and borders. This tool will be very helpful if you want to test different table styles.

Fixed Column Bootstrap Table by Colorlib

The table is well suited for displaying huge data arrays since it’s not always possible to remember which cell corresponds to which one. This is why the first column is fixed while you scroll horizontally. It is fully customizable, allowing you to use any color you choose, or create a responsive table and add rows if necessary.

It uses Bootstrap and Fontawesome. The scroll is implemented with jQuery.

The product is completely free. To download and run it, you will need to leave your email on the site.

Bootstrap 4 static table with checkboxes and fixed header

Fixed header and checkboxes tables are featured in one of the largest bootstrap communities. The table has very accurate design and good user experience. The table uses Bootstrap 4 and Jquery. This snippet is free and open-source – you can use it in your project. The project has integration with FontAwesome and includes more than 1000+ images.

Creative Tim bootstrap table

This Bootstrap table is based on the bootstrap table plugin. The project is completely free and open-source, nevertheless it has wide functionality. You can set background color (5 colors), the background of the table can be created from scratch, or you can leave only the header. Also, the table can run either in full screen mode or compact. This table has all the functionality of bootstrap – table plugin.

Bootstrapious Pricing table

Fixed header bootstrap table template

Fixed Header Bootstrap Table Template has – guess what – a fixed header that gives you the ability to scroll vertically. The table has rounded corners, and it is also possible to change table color and use different color combinations. There is no column border in the variants, which allows you to add as much content as you like without getting cut off. The columns simply adjust themselves to keep the table looking impressive.

Sortable

This small bootstrap table has important functionality, namely the ability to sort the various columns of the table. This function is done with a little bit of jQuery code:

$(function(){ $('#keywords').tablesorter(); });

Fade and Blur on Hover Data Table

This table has a strict corporate design that can be suitable for large, serious applications. Of course, you can change the color configuration settings and choose your theme from unlimited custom combinations that will deliver the right look for your table.

However, the main feature of this table is this: when you hover over a row, it will be highlighted by fading out the others. This will allow your users to focus better and clearly see what they are reading.

Fixed column datatable

In this template you will find 6 different example tables. This is a plugin written in Vue and Bootstrap. By using this template you get a data table with checkboxes, a data table with accordion, and data tables with different column alignment. The code script for all six designs is shared as a single code file. The template is fully customizable and responsive.

Bootstrap datagrid

Bootstrap datagrid is a jQuery datagrid plugin compatible with Bootstrap 2 and 3. It is completely free and open source, available under MIT license. The disadvantage of this tool is no Bootstrap 4 support. The plugin is completely responsive and fully configurable. The features of the plugin include sorting, filtering, change columns order, show or hide columns, single or multiple row selection, filters, localization, pagination, and more. As a bonus, Bootstrap datagrid has neat documentation.

React bootstrap table

A very useful tool indeed: react and bootstrap are the two most popular front end libraries. React bootstrap table allows you to create bootstrap style tables inside the React application. It works with Bootstrap 3 and 4. The installation, configuration and usage are very intuitive.

React bootstrap table supports following built-in features:

• Striped, borderless, condensed table;
• Column align, hidden, width, sort, title, styling, customization;
• Table scrolling;
• Cell format;
• Pagination;
• Row selection;
• Table Search, Column filter;
• Cell editor;
• Insert & delete Row;
• Export to CSV;
• Rich function hooks;
• Header column span;
• Remote mode;
• Row expand;
• Keyboard navigation.

Footable

FooTable is a responsive plugin built for Bootstrap. The table is free to download and fully responsive. The features of this table include searching within the table, searching by category, pagination, sorting in individual columns and tag indicating the number of entries. The table displays 10 entries at a time, which can be changed according to your needs.

Js grid

jsGrid is a jQuery plugin you can add to your Bootstrap site. The plugin has a lot of basic features for tables such as sorting, searching, pagination, scrolling the entries, etc. Additional features of the table include data editing, validation, filtering, etc.

The plugin has very good documentation. Despite the fact it is written in jquery, there are still periodic updates.

Conclusion

In this article, we introduced you to the concept of Bootstrap table, as well as basic manipulations with it and various ready-made templates as a bonus.

When you create your table, we recommend you to think of what information will be the most important in it, and only then decide which features and elements to use. You can also choose bootstrap tables with more advanced options, including search, pagination, or sort features.

As for your ready-made examples of bootstrap tables, the best tables are the ones you customize yourself: because you know best what will suit your website and your vision.

If you want to somehow improve and comment on this article, we’ll be very happy to hear from you. You can also find many examples of bootstrap tables by looking at our bootstrap templates.

You might also like these articles