Bootstrap Table for Responsive and User-Friendly Layouts

Effective website layouts are very important for presenting information in a clear and user-friendly way. One of the best tools for this is the Bootstrap Table, which helps organize content elegantly and accessibly.

By leveraging the power of Bootstrap Tables, you can enhance your site’s readability and encourage visitors to engage more deeply with your content. It allows developers to display data in an organized, visually appealing manner across all devices.

In this comprehensive guide, we’ll cover the fundamentals of the Bootstrap Table and provide downloadable, ready-to-use examples to kickstart your projects with confidence and style.

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	john@example.com
2	Jane	Doe	jane@example.com

html

<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>john@example.com</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jane</td>
      <td>Doe</td>
      <td>jane@example.com</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>

Get Ninja Tables FAST!

Special Discount

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:

html
<!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>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </div> </body> </html>

html

<!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>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>

</body>
</html>

Striped Rows

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

html
<!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>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </div> </body> </html>

html

<!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>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>

</body>
</html>

Bordered Table

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

html
<!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>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </div> </body> </html>

html

<!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>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>

</body>
</html>

Hover Rows

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

html
<!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>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </div> </body> </html>

html

<!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>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>

</body>
</html>

Condensed Table

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

HTML

<!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>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

Contextual Classes

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

HTML

<!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>def@somemail.com</td>
      </tr>      
      <tr class="success">
        <td>Success</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr class="danger">
        <td>Danger</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr class="info">
        <td>Info</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
      <tr class="warning">
        <td>Warning</td>
        <td>Refs</td>
        <td>bo@example.com</td>
      </tr>
      <tr class="active">
        <td>Active</td>
        <td>Activeson</td>
        <td>act@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

The contextual classes that can be used are:

Search Search in Class Description
Class	Description
.active	Applies the hover color to the table row or table cell
.success	Indicates 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

Ninja Tables Special Discount!

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>

Bootstrap Table examples you can use and download

1	2	3

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

Switch Color

LocationSelect Office Location PositionSelect By Position Select By PositionView Filters Clear All Chief Financial Officer (CFO) Chief Marketing Officer (CMO) Data Coordinator Developer Development Lead Financial Controller Integration Specialist Javascript Developer Junior Javascript Developer Marketing Designer Office Manager Post-Sales support Regional Director Regional Marketing Software Engineer Support Engineer Support Lead System Architect Systems Administrator Technical Author OK Cancel Search Search in Name Position Office Age Start date Salary
Name	Position	Office	Age	Start date	Salary
Zorita Serrano	Software Engineer	San Francisco	56	2012/06/01	$115,000
Zenaida Frank	Software Engineer	New York	63	2010/01/04	$125,250
Yuri Berry	Chief Marketing Officer (CMO)	New York	40	2009/06/25	$675,000
Vivian Harrell	Financial Controller	San Francisco	62	2009/02/14	$452,500
Unity Butler	Marketing Designer	San Francisco	47	2009/12/09	$85,675
Timothy Mooney	Office Manager	London	37	2008/12/11	$136,200
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25	$320,800
« ‹ 1 2 3 4 5 › »

Tables with striped rows

Type Name to Filter All198019902000 Search Search in ID Name Number (Personal) Number (Office) Birth year NHS Projects done Bonus
ID	Name	Number (Personal)	Number (Office)	Birth year	NHS	Projects done	Bonus
1	Beatrice	222-984-7165	350-481-4539	1994	8724976385	806	3.0%
2	Andre	958-871-4691	393-506-5720	1979	6635613447	87744	40%
3	Giordano	695-935-5577	222-390-5362	1997	9005698047	33	6.0%
4	Dael	299-400-9731	106-669-3781	1980	8716798449	6063	30%
5	Vern	703-795-3128	920-142-4121	2003	8309501439	4011	30%
6	Helene	460-498-0217	918-714-7579	1999	7506926253	4	0%
« ‹ ... 1 2 3 4 5 6 7 8 9 ... › »

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 name	Email	Country	ZIP
Alva Co.	Email Alva Co.	Detroit	04662
Adeleid	Email Adeleid	Beirut	14738
Fizzy Group of Industries	Email Fizzy Group of Industries	London	68023
Lukoil Company	Email Lukoil Company	Kyiv	17563
Matsubishi	Email Matsubishi	Tokyo	48637
Denesik Engil Constructions	Email Denesik Engil Constructions	Copenhagen	84003
SM Entertainment	Email SM Entertainment	Seoul	28119
IKAA	Email IKAA	Stockholme	17562
Ayila Corp.	Email Ayila Corp.	Manhattan	48337

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.

Explore the best jQuery Table Plugins with advanced functionalities such as search, pagination, or sorting, and many other advanced 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– 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.