Skip to main content
X

Explore your training options in 10 minutes

Using the Bootstrap Framework to Create a Table

Christina Kopecky - January 04, 2021


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.

Get offers and scholarships from top coding schools illustration

Find Your Bootcamp Match

  • Career Karma matches you with top tech bootcamps
  • Access exclusive scholarships and prep courses










By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.

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.

Venus, a software engineer at Rockbot

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

<!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.

What's Next?

Christina Kopecky

About the author: Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.

Skip to main content