Do you think IIT Guwahati certified course can help you in your career?
Introduction
Hey Ninjas! While designing any web page, we often need to add a list of data to it. Have you ever thought about how we can do this? Or how can we add tables to the web pages? The answer is we can use Bootstrap tables to do all these.
This blog will discuss the topic of Bootstrap tables in detail, along with all the types of Bootstrap tables.
What are Bootstrap Tables
Tables offer a visual setup of data, amplifying its visibility and clarity. Tables are also a core pillar of HTML (HyperText Markup Language), used to create websites and web pages.
Bootstrap offers a .table class, using which we can add rows and columns into the table. There are many other attributes present that help the table to be quick and easy to modify by using Bootstrap.
Let's discuss the attributes that support the tables to look good on the web page.
Attributes in Bootstrap Tables
The Bootstrap table attributes are:
<table>: A <table> tag represents a table in Bootstrap. There is only one <table> tag present in a table.
<thead>: The <thead> tag is used to represent a header to the group of the body content.
<tbody>: The <tbody> tag is used to represent the table's body, which includes td, tr, etc., tags.
<th>: The <th> tag represents the head of the cell in the table.
<tr>: The <tr> tag represents the row of the table.
<td>: The <td> tag means the data present in a row of the table.
<caption>: The <caption> tag is used to summarize the table in fewer words.
There are many ways to modify a table, like a header design, stripping rows, adding or removing borders, rows hoverable, etc. Tables can easily be made responsive using Bootstrap's classes. Let's look at each of them one by one.
Types of Bootstrap Tables
Let's discuss different types of Bootstrap tables in this section. We will start with a simple table.
We can make a dark background using .table-dark class within the <table> tag in Bootstrap. You will also see a change in font colour from black to white.
The bordered table helps you to make a border around the whole table for a better user experience. We can add borders in a table by adding the .table-bordered class within the <table> tag in Bootstrap.
We can also add colours to the border by using .table-bordered and .border-primary together within the <table> tag. This will turn the border colour from black to blue.
We used the <caption> tag in both tables in the example above. You can see the captions at the end of each table. We also added a footer in the second table, as shown in the output.
Borderless Table
The borderless table helps you to make a table without any borders. We can use these in a table by adding the .table-borderless class within the <table> tag in Bootstrap.
The hoverable table changes the colour of the row if you take the cursor on any specific row. We can add hovers in a table by adding the .table-hover class within the <table> tag in Bootstrap.
The coloured table can be executed using the contextual classes. Contextual classes are used to change the colour of rows, columns, backgrounds or anything related to colours.
There are mainly 8 contextual classes available in Bootstrap.
table-primary (Blue colour)
table-secondary (Grey colour)
table-success (Green colour)
table-danger (Red colour)
table-info (Light blue colour)
table-warning (Yellow colour)
table-light (White colour)
table-dark (Black colour)
We can add these classes in the <table>, <thead>, <tbody> <tr>, or <td> tag.
Responsive tables can be made to allow for horizontal scrolling on mobile devices. We can make a table responsive just by adding any table inside the <div></div> with a .table-responsive class in Bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap Tables</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
table * {
white-space: nowrap;
}
</style>
</head>
<body>
<h2>Welcome to Coding Ninjas!</h2>
<div class="m-4">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Sr. No</th>
<th>Name</th>
<th>Designation</th>
<th>Email</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anudeep</td>
<td>Engineer</td>
<td>anudeep@gmail.com</td>
<td>
At Coding Ninjas, our mission is to continuously innovate the
best ways to train the next generation of developers and to
transform the way tech education is delivered.
</td>
</tr>
<tr>
<td>2</td>
<td>Debarshi</td>
<td>Manager</td>
<td>debarshi@gmail.com</td>
<td>
At Coding Ninjas, our mission is to continuously innovate the
best ways to train the next generation of developers and to
transform the way tech education is delivered.
</td>
</tr>
<tr>
<td>3</td>
<td>Pramod</td>
<td>Associate</td>
<td>pramod@gmail.com</td>
<td>
At Coding Ninjas, our mission is to continuously innovate the
best ways to train the next generation of developers and to
transform the way tech education is delivered.
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Output:
Frequently Asked Questions
How to set Bootstrap table column width?
To give the table column an auto width, add the class .w-auto to the table element.
Define scope in Bootstrap tables.
According to the definition of scope, the cell is either a header for a row, column, or set of rows or columns.
Is Bootstrap a framework or a library?
Bootstrap is a CSS framework for creating responsive and mobile websites.
Is Bootstrap best for responsiveness?
Bootstrap is mobile-friendly and responsive. Its six-tier grid classes give more logical control over the layout.
What is included in the Bootstrap bundle?
The Bootstrap bundle contains CSS files, Javascript files, Bootstrap source code, Precompiled Bootstrap, etc.
Conclusion
This article discusses the topic of Bootstrap tables. In detail, we have seen the definition of the Bootstrap tables, attributes of Bootstrap tables, and types of tables with their implementation.
We hope this blog has helped you enhance your knowledge of Bootstrap tables. If you want to learn more, then check out our articles.
But suppose you have just started your learning process and are looking for questions from tech giants like Amazon, Microsoft, Uber, etc. In that case, you must look at the problems, interview experiences, and interview bundles for placement preparations.
However, you may consider our paid courses to give your career an edge over others!
Happy Learning!
Live masterclass
Get shortlisted for Amazon data interview: SQL+Python Prep
by Abhishek Soni
26 Jun, 2025
01:30 PM
Prompt Engineering: New Must-Have GenAI Skill for Developers
by Anubhav Sinha
23 Jun, 2025
01:30 PM
Using Netflix Data to Master Power BI
by Ashwin Goyal
24 Jun, 2025
01:30 PM
Build ChatGPT-like Search Using RAG – Live with Google SDE2
by Saurav Prateek
25 Jun, 2025
01:30 PM
Get shortlisted for Amazon data interview: SQL+Python Prep
by Abhishek Soni
26 Jun, 2025
01:30 PM
Prompt Engineering: New Must-Have GenAI Skill for Developers
131+ registered 
