Bootstrap Table Guide and Best Bootstrap Table Examples

Are you frustrated by the lack of knowledge of the best Bootstrap Table Examples and their respective guides? Worry no more! This carefully researched article provides a comprehensive guide to Bootstrap Tables and the most popular Bootstrap Table Examples.

Mastering Bootstrap Tables is essential for developing responsive, efficient business software, ensuring your web applications not only look professional but also provide a seamless user experience across all devices. Numerous studies have shown that well-designed, proficient websites maximize user engagement and foster an enjoyable browsing experience.

By reading this article, you will learn all you need about the Bootstrap Table Framework, how to effectively implement Bootstrap Tables, and the top Bootstrap Table Examples. You will also learn the best practices for utilizing Bootstrap Tables to ensure the design and development of your webpage achieves the desired results.

Tables and data visualization

In the realm of business software, the humble table transcends its simplicity to become a powerhouse of data management and visualization, much like the assembly line revolutionized heavy industry, highlighting the critical role of effectively presenting complex data for insightful analysis and decision-making. 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.

Tables before Bootstrap

Data visualization is an ancient art. You may have heard of “Ptolemy’s Map”. That is the name commonly given to all geographical knowledge in the works of Claudius Ptolemy (do not confuse it with Egyptian pharaohs). Claudius Ptolemy was a mathematician, astronomer, geographer, and 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 on his maps. Still, his maps and descriptions give a fair representation of distant geography. The proportions were distorted and the distances inaccurate, but Ptolemy died almost 1,800 years before the launch of the first satellite. Let us give him some credit! Even back then maps were tools, not curiosities. When the world’s largest library contained less data than your smartphone does today, it was obvious how helpful visual representation was. 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.

The 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 a 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 head colors

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 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 <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 the example below.

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

Bootstrap table with images

When 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 tables

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 a .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 a 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 uses 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 based on 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 the 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 tables 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 checkbox tables are featured in one of the largest bootstrap communities. The table has a very accurate design and a 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 the 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 the 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 the 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 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, changing column order, showing or hiding 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 the 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 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

• 12+ React Boilerplates & Starter Kits for Developers in 2021
• Top 24 Free Essential Plugins to Extend Bootstrap
• 6 Reasons to Use ReactJS for Web Development