Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

How to Add Responsive Bootstrap Table to Your Website Layout

Tables are an essential component of web design, allowing for an organized presentation of data in a grid layout consisting of rows and columns. However, developing responsive, aesthetically pleasing tables can be challenging. This is where Bootstrap comes in handy.

By adding Bootstrap table modifier classes .table to the table elements, developers can tap into Bootstrap’s wide array of styling options for tables. This includes adding borders, colors, vertical alignment, nesting tables, and more. Additionally, these table styles have been designed to be responsive, automatically adapting to different viewport sizes.

The major benefit of using Bootstrap for tables is that it removes the need to manually style tables and their content from scratch. The Framework takes care of optimizing tables for resizing, readability, and aesthetics. This saves developers valuable time and effort.

In this comprehensive guide, we will explore the key methods for augmenting plain tables with Bootstrap styling and responsiveness, thereby teaching you how to create responsive tables with variant classes, borders, vertical alignment, nested tables, and more.

We will go over how to add borders, colors, sizes, nesting, and more using Bootstrap’s table classes. We will also see some real-world examples to understand how versatile and customizable Bootstrap tables can be for any web project’s data presentation needs. By the end, you will have a clear roadmap for integrating Bootstrap’s table utilities in your web pages and enhancing their readability and design.

What is Bootstrap

Bootstrap is a popular front-end development framework that provides handy utilities for enhancing table styling and layout with minimal effort. Bootstrap is a comprehensive set of HTML, CSS, and JavaScript components and tools designed to simplify web development. It provides developers with a solid foundation upon which to build responsive and visually appealing websites and web applications.

Bootstrap’s primary focus is on responsive design, ensuring that your website or web application adapts seamlessly to different screen sizes, from the smallest smartphones to the largest desktop monitors.

Bootstrap’s feature set includes a responsive grid system, an extensive library of pre-built UI components, (such as navigation bars, buttons, forms, card, pagination, badges, navbar, modals, etc), and a wealth of CSS classes for styling and layout control.

In addition to these components, Bootstrap offers optional JavaScript plugins to enhance user interactions and functionality.

Importance of Tables in Web Development

Tables are an essential component of web pages to organize and display data in rows and columns. They allow you to arrange textual and numeric content, like text, images, links, and more, in a structured and easy-to-scan format.

It’s also important to learn how to make a table responsive. Using responsive Bootstrap tables in your website layout provides several advantages:

  • Responsiveness: Bootstrap’s built-in table classes make tables responsive, allowing them to adapt and scroll horizontally across device sizes from phones to desktops seamlessly.

  • Customization: Bootstrap includes dozens of table variants for styling, borders, colors, padding, and more to customize the design.

  • Accessibility: Adding features like captions and header scopes improves tables for screen readers and accessibility.

  • Compatibility: Bootstrap tables work smoothly across modern browsers and don’t require extra plugins or dependencies.

If you want to be a 5x developer and skip the hard part of building UIs from scratch, Purecode.ai has a repository of 10,000+ custom-generated AI components for MUI, TailwindCSS, and CSS3. Consider using our AI-generated custom components today!

Do you want to skip ahead and learn via YouTube videos? Check out everything you need to know about how to create responsive tables using Bootstrap in this 12 mins video tutorial:

How to Create a Basic Responsive Table with Bootstrap

To create a basic table with Bootstrap, you just need to add the .tableclass to your table element. A basic Bootstrap table has light padding and only horizontal dividers.

This code below demonstrates the most basic table markup with Bootstrap:

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Basic Table Example</title>
      <link rel="stylesheet" href="<https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css>"/>
   </head>
   <body>
      <div class="container">
         <h1>Basic Table Example</h1>
         <table class="table">
            <thead>
               <tr>
                  <th scope="col">#</th>
                  <th scope="col">First</th>
                  <th scope="col">Last</th>
                  <th scope="col">Handle</th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <th scope="row">1</th>
                  <td>Mark</td>
                  <td>Otto</td>
                  <td>@mdo</td>
               </tr>
               <tr>
                  <th scope="row">2</th>
                  <td>Jacob</td>
                  <td>Thornton</td>
                  <td>@fat</td>
               </tr>
               <tr>
                  <th scope="row">3</th>
                  <td colspan="2">Larry the Bird</td>
                  <td>@twitter</td>
               </tr>
            </tbody>
         </table>
      </div>
      <script src="<https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js>"></script>
      <script src="<https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js>"></script>
   </body>
</html>

This will render the following image for the most basic table markup:

How to Enhance Tables with Variant Classes

Bootstrap includes several useful table variant classes to improve the design, readability, and interactivity of tables.

How to Apply Contextual Classes

Use contextual color variant classes to color table rows, cells, or the entire table. This visually enhances tables for quick scanning:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Contextual Table Example</title>
    <link
      rel="stylesheet"
      href="<https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css>"
    />
    <link rel="stylesheet" href="src/style.css" />
  </head>
  <body>
    <div class="container">
      <h1>Contextual Table Example</h1>
      <!-- On tables -->
      <table class="table-primary">
        ...
      </table>
      <table class="table-secondary">
        ...
      </table>
      <table class="table-success">
        ...
      </table>
      <table class="table-danger">
        ...
      </table>
      <table class="table-warning">
        ...
      </table>
      <table class="table-info">
        ...
      </table>
      <table class="table-light">
        ...
      </table>
      <table class="table-dark">
        ...
      </table>

      <!-- On rows -->
      <tr class="table-primary">
        ...
      </tr>
      <tr class="table-secondary">
        ...
      </tr>
      <tr class="table-success">
        ...
      </tr>
      <tr class="table-danger">
        ...
      </tr>
      <tr class="table-warning">
        ...
      </tr>
      <tr class="table-info">
        ...
      </tr>
      <tr class="table-light">
        ...
      </tr>
      <tr class="table-dark">
        ...
      </tr>

      <!-- On cells (`td` or `th`) -->
      <tr>
        <td class="table-primary">...</td>
        <td class="table-secondary">...</td>
        <td class="table-success">...</td>
        <td class="table-danger">...</td>
        <td class="table-warning">...</td>
        <td class="table-info">...</td>
        <td class="table-light">...</td>
        <td class="table-dark">...</td>
      </tr>
    </div>

    <script src="<https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js>"></script>
    <script src="<https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js>"></script>
  </body>
</html>

How to Implement Accented Tables

Accent tables rows or columns with zebra striping for easier reading using .table-striped and .table-striped-columns. You can also add zebra-striping to the table rows within the <tbody> by simply adding class .table-striped to the .table base class, as shown below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Accented Table Example</title>
    <link
      rel="stylesheet"
      href="<https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css>"
    />
    <link rel="stylesheet" href="src/style.css" />
  </head>
  <body>
    <div class="container">
      <h1>Accented Table Example</h1>

      <table class="table table-striped">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td colspan="2">Larry the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table>
    </div>

    <script src="<https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js>"></script>
    <script src="<https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js>"></script>
  </body>
</html>

How to Implement Hover Tables

You can also enable a hover state on table rows within a <tbody> element by adding the modifier class .table-hover to the .table base class. The example below shows how to add hover effects with .table-hover:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hover Table Example</title>
    <link
      rel="stylesheet"
      href="<https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css>"
    />
    <link rel="stylesheet" href="src/style.css" />
  </head>
  <body>
    <div class="container">
      <h1>Hover Table Example</h1>

      <table class="table table-striped-columns table-hover">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td colspan="2">Larry the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table>
    </div>

    <script src="<https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js>"></script>
    <script src="<https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js>"></script>
  </body>
</html>

How to Stripe Rows

Use .table-striped to add zebra-striping to table rows:

<table class="table table-striped">
  ...
</table>

How to Stripe Columns

Use .table-striped-columns to add zebra striping to table columns, this helps the reader’s eye track across columns:

<table class="table table-striped-columns">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
  </tbody>
</table>

The striping applies to the <td> and <th> cells within each row.

How to Create Hoverable Rows

Add .table-hover to the .table class to enable a subtle hover state on table rows within <tbody>:

<table class="table table-hover">
  <thead>
    ...
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
  </tbody>
</table>

The row background will darken slightly on hover to indicate an interactive row.

How to Highlight Active Tables

Highlight a <tr> or specific <td> cell with .table-active to indicate an active, current, or selected row:

<tr class="table-active">
  <th scope="row">1</th>
  <td>Mark</td>
  <td>Otto</td>
  <td>@mdo</td>
</tr>

<tr>
  <th scope="row">2</th>
  <td class="table-active">Jacob</td>
  <td>Thornton</td>
  <td>@fat</td>
</tr>

This adds a solid color background to indicate an active state.

How to Apply Borders to Tables

How to Add Borders to Tables

Add .table-bordered to apply borders on all sides of the table and cells:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Border Table Example</title>
    <link
      rel="stylesheet"
      href="<https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css>"
    />
    <link rel="stylesheet" href="src/style.css" />
  </head>
  <body>
    <div class="container">
      <h1>Border Table Example</h1>

      <table class="table table-bordered table-hover">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td colspan="2">Larry the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table>
    </div>

    <script src="<https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js>"></script>
    <script src="<https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js>"></script>
  </body>
</html>

Borders are added between all <td> and <th> cells for a clean, divided appearance.

How to Create Borderless Tables

For a table without inner borders between cells, use .table-borderless:

<table class="table table-borderless">
  <thead>
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

This creates a minimalist, clean table appearance without vertical or horizontal borders.

How to Make Tables Compact

Make tables more compact by cutting cell padding in half with .table-sm:

<table class="table table-sm">
  ...
</table>

This reduces the spacing between text and cell edges for a tighter layout.

How to Add Table Group Dividers

Separate table groups like <thead>, <tbody>, and <tfoot> using .table-group-divider on the rows to add thicker borders between groups.

This allows you to add a thicker border, darker between table groups—<thead>, <tbody>, and <tfoot>—with .table-group-divider. Customize the color by changing the border-top-color (which we don’t currently provide a utility class for at this time).

<table class="table">
  <thead>...</thead>

  <tbody class="table-group-divider">
    ...
  </tbody>

  <tfoot>...</tfoot>
</table>

This code below demonstrates the group divider:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Table Group Divider Example</title>
    <link
      rel="stylesheet"
      href="<https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css>"
    />
    <link rel="stylesheet" href="src/style.css" />
  </head>
  <body>
    <div class="container">
      <h1>Table Group Divider Example</h1>

      <table class="table">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
          </tr>
        </thead>
        <tbody class="table-group-divider">
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td colspan="2">Larry the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table>
    </div>

    <script src="<https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js>"></script>
    <script src="<https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js>"></script>
  </body>
</html>

This visually divides table sections with an emphasized bottom border.

How to Align Cells Vertically

Align cells to the top, middle, or bottom of a row with the vertical-align classes:

<td class="align-top">...</td>

<tr class="align-middle">
  ...
</tr>

<td class="align-bottom">...</td>

  • align-top: Vertically aligns to the top

  • align-middle: Aligns to the middle

  • align-bottom: Aligns to the bottom

This overrides the default vertical alignment of cells within the row.

Understanding the Anatomy of Bootstrap Tables

How to Customize Table Heads

Use .table-light or .table-dark to style <thead> rows as light or dark gray:

<table class="table">
  <thead class="table-dark">
    ...
  </thead>
  <tbody>
    ...
  </tbody>
</table>

This allows styling the header separate from the body with color contrast.

This code below demonstrates how to create dark tables using the table-dark class:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Dark Table Example</title>
    <link
      rel="stylesheet"
      href="<https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css>"
    />
    <link rel="stylesheet" href="src/style.css" />
  </head>
  <body>
    <div class="container">
      <h1>Dark Table Example</h1>

      <table class="table">
        <thead class="table-dark">
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
          </tr>
        </thead>
        <tbody class="table-group-divider">
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td colspan="2">Larry the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table>
    </div>

    <script src="<https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js>"></script>
    <script src="<https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js>"></script>
  </body>
</html>

How to Work with Table Footers

For tables that need footers, add a <tfoot> section:

<table class="table">
  <thead>...</thead>
  <tbody>...</tbody>

  <tfoot>
    <tr>
      <td>Footer Content</td>
    </tr>
  </tfoot>
</table>

Similar to <thead>, <tfoot> can be styled independently from <tbody>. This code below demonstrates how to create dark tables using the <tfoot> HTML attribute:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Table Footer Content Example</title>
    <link
      rel="stylesheet"
      href="<https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css>"
    />
    <link rel="stylesheet" href="src/style.css" />
  </head>
  <body>
    <div class="container">
      <h1>Table Footer Content Example</h1>

      <table class="table">
        <thead class="table-dark">
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
          </tr>
        </thead>
        <tbody class="table-group-divider">
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td colspan="2">Larry the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td>Footer Content</td>
          </tr>
        </tfoot>
      </table>
    </div>

    <script src="<https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js>"></script>
    <script src="<https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js>"></script>
  </body>
</html>

How to Add Captions to Tables

Add a heading inside the <caption> element to tables:

<table>
  <caption>List of users</caption>
  ...
</table>

Captions help document tables and improve accessibility when read by screen readers.

How to Create Responsive Tables

How to Make Tables Responsive

Wrap tables in .table-responsive to make them scroll horizontally on smaller screens:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Responsive Table Example</title>
    <link
      rel="stylesheet"
      href="<https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css>"
    />
    <link rel="stylesheet" href="src/style.css" />
  </head>
  <body>
    <div class="container table-responsive">
      <h1>Responsive Table Example</h1>

      <table class="table">
        <thead class="table-dark">
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
          </tr>
        </thead>
        <tbody class="table-group-divider">
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td colspan="2">Larry the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td>Footer Content</td>
          </tr>
        </tfoot>
      </table>
    </div>

    <script src="<https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js>"></script>
    <script src="<https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js>"></script>
  </body>
</html>

This enables horizontal scrolling over wrapping content.

How to Make Tables Responsive for Specific Breakpoints

Use .table-responsive{-sm|-md|-lg|-xl|-xxl} to make tables responsive up to a breakpoint:

<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>

The table will scroll horizontally below the -lg (large) breakpoint.

Table of Key Methods for Styling Bootstrap Tables

MethodDescriptionExample
.tableAdds basic Bootstrap table styling with horizontal dividers and paddinghtml <table class="table"> ... </table>
.table-stripedAdds zebra-striping to rowshtml <table class="table table-striped"> ... </table>
.table-borderedApplies borders on all sideshtml <table class="table table-bordered"> ... </table>
.table-hoverEnables hover state on table rowshtml <table class="table table-hover"> ... </table>
.table-darkMakes table darker, used for <thead>/<tfoot> elementshtml <thead class="table-dark"> ... </thead>
.table-responsiveMakes table scroll horizontally on small screenshtml <div class="table-responsive"> <table> ... </table> </div>
.table-smMakes table more compact by cutting cell paddinghtml <table class="table table-sm"> ... </table>

Some key differences:

  • .table-striped stripes rows while .table-bordered adds borders between all cells
  • .table-dark is used for styling table header and footer sections
  • .table-responsive wraps the table to make it scrollable on small screens
  • .table-sm reduces cell padding for a more compact table

By combining these different table modifiers you can create visually enhanced responsive Bootstrap tables.

FAQs

Answers to some frequently asked questions:

What is a Bootstrap table?

A Bootstrap table is a table enhanced with Bootstrap’s built-in styles, responsive classes, borders, variants, colors, padding, and more for visually appealing data tables.

How to create a Bootstrap table in HTML?

To create a Bootstrap table in HTML, add the table class to the <table> element along with any other table classes for styling borders, colors, spacing, responsiveness, etc. Structurally it uses the same <table>, <thead>, <tbody>, and <tr> elements.

Example:

<table class="table table-bordered table-striped">
  <thead>
    ...
  </thead>
  <tbody>
   ...
  </tbody>
</table>

How to make a Bootstrap table responsive?

To make a Bootstrap table responsive, wrap it in a div with the table-responsive class, which enables horizontal scrolling on smaller screens:

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Which Bootstrap class will apply a striped look?

The .table-striped class adds zebra-striping to table rows to make it easier to scan and read the rows.

Example:

<table class="table table-striped">
  ...
</table>

Is Bootstrap table free to use?

Yes, Bootstrap’s table styles and classes are open-source and free to use without licensing or attribution requirements. Bootstrap is an MIT-licensed project usable in any project.

What You Have Learned

In this article, you learned how to add responsive Bootstrap tables to web pages and customize them using the various table classes for colors, stripes, hover effects, responsiveness, and more. Using these table enhancement options allows you to improve the presentation and UX of tabular data.

You also learned how to create responsive tables with variant classes, borders, vertical alignment, nested tables, and more.

I hope this helps! However, if you need custom beautiful components for your design utilizing the full power of Bootstrap, you should explore PureCode.ai library of 10,000+ AI-generated custom components.

Learn everything about Bootstrap table in this video below:

Emmanuel Uchenna

Emmanuel Uchenna

Emmanuel is an experienced and enthusiastic software developer and technical writer with 4+ proven years of professional experience. He focuses on full-stack web development. He is fluent in React, TypeScript, VueJS, and NodeJS and familiar with industry-standard technologies such as version control, headless CMS, and JAMstack. He is passionate about knowledge sharing.