A table, in general, describes a relationship between a row with a set of columns. It’s a great way to organize and illustrate data.
Bootstrap is a CSS framework that can help us create content super quickly. In this article, we review how to get Bootstrap set up, learn why we might need a table, and take a look at some examples of tables in action using the Bootstrap framework.
Getting Started
To make sure we can view a modal on our web page, make sure we have the proper dependencies. For this demonstration, we don’t need Bootstrap, Popper.JS and jQuery, but it’s a good idea to add it anyway since you will probably work with other components that do need it. Navigate to the Bootstrap’s Quick Start page for assistance with getting all your dependencies.
It’s up to you how to link the packages we need, but the easiest, most beginner-friendly way is to use the content delivery network – the CDN – for jQuery, Popper.js, and Bootstrap. Be careful of the order of your <script> tags – order matters here.
When to Use a Table
Use a table when you want to aggregate a lot of data at once. Use a Bootstrap table when you want to create responsive tables with ease. Bootstrap uses the basic HTML structure of a table. All you have to do is incorporate their CSS and your custom styling to incorporate customized, responsive tables for your website.
Use Bootstrap to Create a Table
Tables are traditionally built with HTML and CSS. This will get the basic structure and styling of our table on the screen. We use Bootstrap to get a responsive design up and ready to go quickly so we can move on to higher priority items on our list of items to do for our application.
When using Bootstrap, have the documentation at hand so you can properly structure the table. What’s different about a table as opposed a modal or a navbar, is that it does not necessarily rely on JavaScript to work so it’s treated more as a content feature rather than an actual component itself. You will find information about how to create tables under the Content menu in the sidebar as opposed to the Components menu.
Let’s start with a basic structure:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Table Demo</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table>
<thead>
<tr>
<th>Bootstrap Table Demo</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="col">No. </th>
<th scope="col">Drink</th>
<th scope="col">Price</th>
</tr>
<tr>
<td scope="row">#1</td>
<td>Iced Tea</td>
<td>$3.25</td>
</tr>
<tr>
<td scope="row">#2</td>
<td>Fountain Soda</td>
<td>$3.00</td>
</tr>
<tr>
<td scope="row">#3</td>
<td>Coffee</td>
<td>$2.00</td>
</tr>
<tr>
<td scope="row">#4</td>
<td>Latte</td>
<td>$4.25</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="script.js">
</script>
</body>
</html>If you run the markup above, you will see a very basic table that has a header and several rows that describe drinks, prices and their row number. There is no styling except what’s been established by bootstrap for the whole document.
To add styling to a table, all you need to do is add the .table class to the <table> tag.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Table Demo</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table class="table">
<thead>
<tr>
<th scope="colgroup"> Bootstrap Table Demo</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="col">No. </th>
<th scope="col">Drink</th>
<th scope="col">Price</th>
</tr>
<tr>
<td scope="row">#1</td>
<td>Iced Tea</td>
<td>$3.25</td>
</tr>
<tr>
<td scope="row">#2</td>
<td>Fountain Soda</td>
<td>$3.00</td>
</tr>
<tr>
<td scope="row">#3</td>
<td>Coffee</td>
<td>$2.00</td>
</tr>
<tr>
<td scope="row">#4</td>
<td>Latte</td>
<td>$4.25</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="script.js">
</script>
</body>
</html>
This adds very basic styling and responsiveness to the table. Let’s take a look to see how else we can customize the styling to suit our needs.
Invert Default Colors
Add .table-dark in addition to .table in your list of class names in the <table> tag to change the table’s basic color scheme to dark.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Table Demo</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table class="table table-dark">
<thead>
<tr>
<th scope="colgroup"> Bootstrap Table Demo</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="col">No. </th>
<th scope="col">Drink</th>
<th scope="col">Price</th>
</tr>
<tr>
<td scope="row">#1</td>
<td>Iced Tea</td>
<td>$3.25</td>
</tr>
<tr>
<td scope="row">#2</td>
<td>Fountain Soda</td>
<td>$3.00</td>
</tr>
<tr>
<td scope="row">#3</td>
<td>Coffee</td>
<td>$2.00</td>
</tr>
<tr>
<td scope="row">#4</td>
<td>Latte</td>
<td>$4.25</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="script.js">
</script>
</body>
</html>You can also use the basic Bootstrap color properties in addition to dark and light to control the contextual class (i.e. .table-primary, table-danger, table-success, etc.)
<thead> Style Options
If you would like to control the color scheme of the head of the table separate from the body, you can do that by adding .thead-dark or .thead-light to the <thead> class attribute.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Table Demo</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table class="table table-danger">
<thead class="thead-light">
<th>Bootstrap Table Demo</th>
<th />
<th />
</thead>
<tbody>
<tr>
<th scope="col">No. </th>
<th scope="col">Drink</th>
<th scope="col">Price</th>
</tr>
<tr>
<td scope="row">#1</td>
<td>Iced Tea</td>
<td>$3.25</td>
</tr>
<tr>
<td scope="row">#2</td>
<td>Fountain Soda</td>
<td>$3.00</td>
</tr>
<tr>
<td scope="row">#3</td>
<td>Coffee</td>
<td>$2.00</td>
</tr>
<tr>
<td scope="row">#4</td>
<td>Latte</td>
<td>$4.25</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="script.js">
</script>
</body>
</html>Stripes
Add .table-striped the <table> tag to adjust the color of every other row in a table.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Demo</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table class="table table-striped table-warning">
<thead class="thead-light">
<th>Bootstrap Table Demo With Stripes</th>
<th />
<th />
</thead>
<tbody>
<tr>
<th scope="col">No. </th>
<th scope="col">Drink</th>
<th scope="col">Price</th>
</tr>
<tr>
<td scope="row">#1</td>
<td>Iced Tea</td>
<td>$3.25</td>
</tr>
<tr>
<td scope="row">#2</td>
<td>Fountain Soda</td>
<td>$3.00</td>
</tr>
<tr>
<td scope="row">#3</td>
<td>Coffee</td>
<td>$2.00</td>
</tr>
<tr>
<td scope="row">#4</td>
<td>Latte</td>
<td>$4.25</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="script.js">
</script>
</body>
</html>Borders
Use .table-bordered to add borders to all sides of each cell – use .table-borderless to remove all borders from all sides of each cell.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Table Demo</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table class="table table-primary table-bordered">
<thead class="thead-light">
<th>Bootstrap Table Demo With Borders</th>
<th />
<th />
</thead>
<tbody>
<tr>
<th scope="col">No. </th>
<th scope="col">Drink</th>
<th scope="col">Price</th>
</tr>
<tr>
<td scope="row">#1</td>
<td>Iced Tea</td>
<td>$3.25</td>
</tr>
<tr>
<td scope="row">#2</td>
<td>Fountain Soda</td>
<td>$3.00</td>
</tr>
<tr>
<td scope="row">#3</td>
<td>Coffee</td>
<td>$2.00</td>
</tr>
<tr>
<td scope="row">#4</td>
<td>Latte</td>
<td>$4.25</td>
</tr>
</tbody>
</table>
<table class="table table-primary table-borderless">
<thead class="thead-light">
<th>Bootstrap Table Demo Without Borders</th>
<th />
<th />
</thead>
<tbody>
<tr>
<th scope="col">No. </th>
<th scope="col">Drink</th>
<th scope="col">Price</th>
</tr>
<tr>
<td scope="row">#1</td>
<td>Iced Tea</td>
<td>$3.25</td>
</tr>
<tr>
<td scope="row">#2</td>
<td>Fountain Soda</td>
<td>$3.00</td>
</tr>
<tr>
<td scope="row">#3</td>
<td>Coffee</td>
<td>$2.00</td>
</tr>
<tr>
<td scope="row">#4</td>
<td>Latte</td>
<td>$4.25</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="script.js">
</script>
</body>
</html>Hover
.table-hover added to the class attribute of the <table> tag will allow all rows in the <tbody> to become hoverable.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Table Demo</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table class="table table-hover table-primary table-bordered">
<thead class="thead-light">
<th>Bootstrap Table Demo With Hover</th>
<th />
<th />
</thead>
<tbody>
<tr>
<th scope="col">No. </th>
<th scope="col">Drink</th>
<th scope="col">Price</th>
</tr>
<tr>
<td scope="row">#1</td>
<td>Iced Tea</td>
<td>$3.25</td>
</tr>
<tr>
<td scope="row">#2</td>
<td>Fountain Soda</td>
<td>$3.00</td>
</tr>
<tr>
<td scope="row">#3</td>
<td>Coffee</td>
<td>$2.00</td>
</tr>
<tr>
<td scope="row">#4</td>
<td>Latte</td>
<td>$4.25</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="script.js">
</script></body>
</html>Responsive Tables
Encapsulate your <table> with a <div> with the class name .table-responsive to make your table responsive across all breakpoints. This basically makes your table scrollable horizontally if the content is every truncated by the size of the table.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Table Demo</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table class="table table-hover table-primary table-bordered">
<thead class="thead-light">
<th>Bootstrap Table Demo With Hover</th>
<th />
<th />
</thead>
<tbody>
<tr>
<th scope="col">No. </th>
<th scope="col">Drink</th>
<th scope="col">Price</th>
</tr>
<tr>
<td scope="row">#1</td>
<td>Iced Tea</td>
<td>$3.25</td>
</tr>
<tr>
<td scope="row">#2</td>
<td>Fountain Soda</td>
<td>$3.00</td>
</tr>
<tr>
<td scope="row">#3</td>
<td>Coffee</td>
<td>$2.00</td>
</tr>
<tr>
<td scope="row">#4</td>
<td>Latte</td>
<td>$4.25</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="script.js">
</script></body>
</html>Conclusion
There are many ways to customize tables by using Bootstrap in combination with your HTML. After you have mastered using these ways to style your Bootstrap tables, try using your own customizable styles!
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
