Bootstrap Table: Beginners Guide with Usable Examples

Mohiuddin Omran Tips
Bootstrap Table_ Beginners Guide with examples

Effective website layouts are essential for presenting information in a user-friendly manner. A well-designed layout enhances readability and entices visitors to explore your site. Tables are a valuable tool for organizing content in a clear and accessible manner.

When it comes to creating clean and responsive tables, Bootstrap can be a game-changer. Bootstrap table allows you to present data in an organized and visually appealing manner. 

In this guide, we’ll walk you through the basics of Bootstrap tables and provide downloadable examples to kickstart your projects.

Getting Started with Bootstrap Tables

Bootstrap tables have additional benefits such as different table styles and responsiveness. First things first, let’s get started with the definition and instructions to set it up.

What is a Bootstrap Table?

A Bootstrap table is a component that allows you to display tabular data on a web page. It’s based on HTML’s <table> element but is enhanced with Bootstrap’s CSS classes to make it more flexible, responsive, and visually appealing.

Setting Up Bootstrap

Before we dive into creating tables, ensure you have Bootstrap integrated into your project. You can include Bootstrap in your HTML file by linking to its CDN or by downloading and hosting it locally.

<!-- Linking to Bootstrap via CDN --><link         href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

Basics of Bootstrap Tables

To create a simple Bootstrap table, here we created a basic table with headers (inside <thead>) and data rows (inside <tbody>). The following HTML structure is the HTML structure of your first bootstrap table.

# First Name Last Name Email
1 John Doe [email protected]
2 Jane Doe [email protected] 
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First Name</th>
      <th scope="col">Last Name</th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>John</td>
      <td>Doe</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jane</td>
      <td>Doe</td>
      <td>[email protected]</td>
    </tr>
  </tbody>
</table>

Enhancing Bootstrap Tables

Different bootstrap table classes can be used to add a more stylish flair to your table. These include:

  • Striped Rows
  • Bordered Table
  • Hovered Rows
  • Condensed Table
  • Responsive Table

Striped Rows

Adding the table-striped class to your table will alternate the background color of each row, improving readability.

html
<table class=” table table-striped”>  
<!– … –>
</table>

Bordered Table

To add borders to your table, include the table-bordered class:

html
<table class=” table table-bordered”>  
<!– … –>
</table>

Hovered Rows

The table-hover class enables a hover effect on the rows, providing visual feedback to users.

html
<table class=” table table-hover”>  
<!– … –>
</table>

Condensed Tables

Bootstrap lets you make your rows more compact with the table-condensed class.

html
<table class=” able table-condensed”>  
<!– … –>
</table>

Bootstrap Responsive Table

Bootstrap makes it easy to create responsive tables that adapt to different screen sizes with a Table-responsive class.

html
<div class=”table-responsive”>  
<table class=”table”>    
<!– … –>  
</table></div>
Ninja tables Subscribe To Get
Subscribe to Our Newsletter

Get Exclusive Tips, Updates, and Inspirations in Your Inbox!

Subscribe Form (Blog)

Bootstrap table examples with codes

Bootstrap Basic Table

A basic Bootstrap table has light padding and only horizontal dividers.

The .table class adds basic styling to a table:

Bootstrap basic table
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Basic Table</h2>
  <p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>            
  <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

Striped Rows

The .table-striped class adds zebra-stripes to a table:

Bootstrap table with striped rows
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Striped Rows</h2>
  <p>The .table-striped class adds zebra-stripes to a table:</p>            
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

Bordered Table

The .table-bordered class adds borders on all sides of the table and cells:

Bootstrap-Table with border
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Bordered Table</h2>
  <p>The .table-bordered class adds borders to a table:</p>            
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

Hover Rows

The .table-hover class adds a hover effect (grey background color) on table rows:

Bootstrap table with hover rows
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Hover Rows</h2>
  <p>The .table-hover class enables a hover state on table rows:</p>            
  <table class="table table-hover">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

Condensed Table

The .table-condensed class makes a table more compact by cutting cell padding in half:

Bootstrap condensed table
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Condensed Table</h2>
  <p>The .table-condensed class makes a table more compact by cutting cell padding in half:</p>            
  <table class="table table-condensed">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

Contextual Classes

Contextual classes can be used to color table rows (<tr>) or table cells (<td>):

Bootstrap table contextual classes
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Contextual Classes</h2>
  <p>Contextual classes can be used to color table rows or table cells. The classes that can be used are: .active, .success, .info, .warning, and .danger.</p>
  <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Default</td>
        <td>Defaultson</td>
        <td>[email protected]</td>
      </tr>      
      <tr class="success">
        <td>Success</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr class="danger">
        <td>Danger</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr class="info">
        <td>Info</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
      <tr class="warning">
        <td>Warning</td>
        <td>Refs</td>
        <td>[email protected]</td>
      </tr>
      <tr class="active">
        <td>Active</td>
        <td>Activeson</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

The contextual classes that can be used are:

ClassDescription
.activeApplies the hover color to the table row or table cell
.successIndicates a successful or positive action
.info Indicates a neutral informative change or action
.warning Indicates a warning that might need attention
.danger Indicates a dangerous or potentially negative action

Responsive Tables

The .table-responsive class creates a responsive table. The table will then scroll horizontally on small devices (under 768px). When viewing anything larger than 768px wide, there is no difference:

html
<div class=”table-responsive”>  
<table class=”table”>    
<!– … –>  
</table>
</div>
Ninja tables Subscribe To Get
Subscribe to Our Newsletter

Get Exclusive Tips, Updates, and Inspirations in Your Inbox!

Subscribe Form (Blog)

Bootstrap Table examples you can use and download

123
Bootstrap 4 Basic table with card by BBBootstrapBootstrap Pricing Table By CodepenBootstrap 4 Business pricing table by BBBootstrap
Fresh Bootstrap table by Creative timTable With a searchbar by codepenBootstrap 4 Team Points table by BBBootstrap

Ninja Table Bootstrap tables

So these were the code things for your website tables. But You know what, Ninja Tables enables you to create all these tables and make them responsive with just in clicks. The best part is you can customize them in the easiest way possible.

Ninja Tables comes with 100+ table design customization with the 3 most popular design libraries including Bootstrap 3, Bootstrap 4, and semantic UI. Now you don’t need to code your every table.

Basic table with searching and sorting options

NamePositionOfficeAgeStart dateSalary
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Thor WaltonDeveloperNew York612013/08/11$98,540
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Suki BurksDeveloperLondon532009/10/22$114,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Jena GainesOffice ManagerLondon302008/12/19$90,560

Tables with striped rows

IDNameNumber (Personal)Number (Office)Birth yearNHSProjects doneBonus
1Beatrice222-984-7165350-481-4539199487249763858063.0%
2Andre958-871-4691393-506-5720197966356134478774440%
3Giordano695-935-5577222-390-536219979005698047336.0%
4Dael299-400-9731106-669-378119808716798449606330%
5Vern703-795-3128920-142-412120038309501439401130%
6Helene460-498-0217918-714-75791999750692625340%
7Lucia946-789-4665641-414-778619941027621031905.0%
8Ugo553-106-7354268-686-1240198712619295352041.8%
9Scotty657-668-6437296-398-539719895023264025940.8%
10Alair126-372-6204886-995-29521995998367641972.0%
11Johannes938-771-0567412-916-986019931864292768420.8%
12Bruce674-911-1761925-366-25321995669510938940%
13Elia298-912-6743100-268-137719909261246419718.0%
14Ignace573-540-9806760-220-418719941256510793554.0%
15Myrvyn496-560-4975927-798-786419979015720819100.2%
16Elston686-473-5285348-181-71792001369144597780510%
17Kenn571-747-0625679-702-035820004345711428378.0%
18Sabrina991-530-0870368-816-269619959563467728230015%
19Bronson345-167-6080928-571-785719961787244474100.2%
20Petrina674-327-0874144-283-59861988084875326758023.6%
21Nickie970-609-1240108-269-61572000409458373482.0%
22Kaylyn281-428-1555651-962-1812199836899035727442.8%
23Nelia967-783-6333658-583-524819937780982475781.2%
24Allyn583-134-1481526-296-089220008751312069132.3%
25Hayward662-368-9704969-953-6369199311001909532779540%
26Crissie696-796-9017207-163-17461997255385179060%
27Fanny546-829-9919136-330-92911987524785655456312%
28Mandi214-577-4644772-880-77091985541158757390%
29Cathee478-404-8228558-591-248319994722167869444.0%
30Kalindi356-370-4271471-257-089020000855275332593.0%
31Francoise288-244-1531666-150-496719824877880917169420%
32Shalna124-679-9097693-587-35391983145283318434213.5%
33Merrill953-378-4277540-500-60822001625584626150%
34Payton411-432-7436273-650-7372197633920061066062%
35Ashlee545-650-5950564-180-322019848545344015449917%
36Alyss104-890-1094591-734-6851199377627523237173540%
37Gallagher544-488-8367583-202-035019751168647444886%
38Dianna807-366-5104334-710-127319993242978242178012%
39Lyda831-528-9518675-748-9769199449822616011430411%
40Morganica838-972-9693398-696-821219876599532802675%
41Yale235-401-6007630-671-0236197031372035544798%
42Pippa815-431-1056469-329-3556198991815829359202.2%
43Garvin580-119-9495218-260-9724197889865743579713250%
44Andriette303-551-6756149-348-3346200009922793131701.2%
45Packston781-506-2277713-979-4625197438001072955926045%
46Kathleen972-276-5666369-917-086519958625834566804440%
47Spence457-920-0216714-765-59851967361314417497115%
48Katrina140-981-8063183-501-024419934343927180513.0%
49Charmain820-402-0486674-231-463619950284197556244.3%
50Ibbie596-981-4326539-207-01632001477926708030%

Bordered tables

Features
Description
Fluent Forms
Turn all your form entries into a table and visualize them by connecting with Ninja Tables.
WooCommerce Table
Showcase all your products in an organized and customizable WooCommerce Product Table.
Google Spreadsheet
Easily integrate Google Spreadsheet to fetch all your data and create dynamic tables on your websites.
WP Posts Table
Rearrange all your messy WP Posts and show them in an organized table.
Ninja Charts
A free WordPress chart plugin that allows you to make interactive charts.
Custom SQL Table
Generate a webpage table by retrieving data from your SQL database using a custom SQL query.

Tables with hovering rows

Company nameEmailCountryZIP
Alva Co.[email protected]Detroit04662
Adeleid[email protected]Beirut14738
Fizzy Group of Industries[email protected]London68023
Lukoil Company[email protected]Kyiv17563
Matsubishi[email protected]Tokyo48637
Denesik Engil Constructions[email protected]Copenhagen84003
SM Entertainment[email protected]Seoul28119
IKAA[email protected]Stockholme17562
Ayila Corp.[email protected]Manhattan48337
Ninja-Tables-White-Logo

Create Smart Data Tables Easily!

Buy Now

Final verse

When choosing Bootstrap tables for your website, carefully consider what you aim to highlight for your viewers. Whether it’s a pricing table, a data table, or text content, think about the optimal placement of each section to ensure maximum readability. 

Integrate elements like buttons, panels, checkboxes, and more if they contribute to better comprehension. Additionally, explore the best jQuery Table Plugins with advanced functionalities such as search, pagination, or sorting options.

The most exceptional tables are those you tailor to your specific needs, as you possess the keenest understanding of what complements your website’s aesthetics and objectives. Infuse your unique ideas into the design, ultimately drawing in a broader user base.

Or, use the last option to make it as easy as a pie. And customize your tables on every occasion. Create amazing tables for your websites and customize them however you want.

Ninja Tables Logo

Ninja Tables– Easiest Table Plugin in WordPress

Get it NOW!

Hopefully, you got what you wanted from this blog. Follow us on Facebook, Linkedin, and X to get all the latest updates and blogs. Subscribe to our youtube channel for latest videos and tutorials.

Get In touch with Ninja Tables

I am a creative content creator at WPManageNinja. An eager science major with a passion looking for understanding and practicing new technology trends.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *