Katarina Harbuzava for Flatlogic

Posted on May 13, 2021 • Edited on Jun 7, 2021 • Originally published at flatlogic.com

Bootstrap Table Guide And Best Bootstrap Table Examples

#bootstrap #javascript #webdev

Tables are an important part of any web application’s life. Tables organize and present content in a way that’s easy for readers to quickly scan and absorb large amounts of data. 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, categorised 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

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 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.

About Flatlogic

At Flatlogic, we help businesses to speed up web development with our beautifully designed web & mobile application templates built with React, Vue, Angular, React Native, and Bootstrap. During the last several years we have successfully delivered more than 100 custom dashboards and data management solutions to various clients starting from innovative startups to established and respected enterprises.

You might also like these articles:
Top 24 Free Essential Plugins To Extend Bootstrap
37 Simple And Useful Table Templates & Examples For Web Developers
Top 13+ Login Pages Design Examples

Top comments (2)

Alexis Enache • May 14 '21

Great article. Tables are indeed important and very hard to build them well. I tried to do a good one on Codepen: codepen.io/extrabright/details/zYZ...

I used Bootstrap 5 for this, so you can use it for free :)

angelaKam • May 13 '21

Learned a lot. Thanks~