Bootstrap 5.3 Tables: Responsive and Stylish Data Presentation

---

In Bootstrap 5.3, tables can be easily styled and made responsive using the built-in classes and components provided by Bootstrap. Here's an explanation of tables in Bootstrap 5.3:

• Basic Table Structure: To create a basic table, you can use the <table> element with the "table" class. Inside the table, you can define table rows using the <tr> element and table data/cells using the <td> element. You can also use the <th> element to define table headers for each column.
• Table Styling: Bootstrap provides several classes to style tables. You can use classes such as "table-striped" to add alternating background colors to table rows, "table-bordered" to add borders to table cells, and "table-hover" to highlight rows on hover. Additionally, classes like "table-responsive" can be used to make the table horizontally scrollable on smaller screens.
• Table Components: Bootstrap offers various table components that enhance the functionality and appearance of tables. For example, you can use the "thead" element to group table header content, the "tbody" element to group table body content, and the "tfoot" element to group table footer content.
• Table Customization: You can further customize tables using Bootstrap's utility classes. For instance, you can use classes like "text-center" to center-align content within table cells, "text-nowrap" to prevent text wrapping, or "text-truncate" to truncate long text with ellipses.
• Advanced Features: Bootstrap also provides additional features for tables, such as table pagination and table sorting. You can use the "table-responsive" class in combination with pagination classes like "pagination" and "page-link" to create a paginated table. For sorting functionality, you can utilize JavaScript plugins or write custom JavaScript code to handle table sorting.

Bootstrap Normal Table

In Bootstrap 5.3, a normal table refers to a basic table structure that can be easily styled and customized using Bootstrap's classes. Here's an explanation of how to create a normal table in Bootstrap 5.3:

<table class="table">
    <thead>
      <tr>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
    </tbody>
  </table>

• <table>: This is an HTML element used to create a table structure in HTML.
• class="table": The class attribute is used to assign one or more classes to the element, which allows you to apply specific styles and behaviors to the element. In this case, the "table" class is applied to the table element.

Bootstrap Table Colors

In Bootstrap 5.3, you can easily apply different colors to tables using the available utility classes. Here's an explanation of the table color options in Bootstrap 5.3

Background Color Classes: Bootstrap also provides utility classes for applying specific background colors to table rows or cells. These classes are applied to the <tr> or <td> elements. The available background color classes are:

• table-primary: Applies a primary background color.
• table-secondary: Applies a secondary background color.
• table-success: Applies a success background color.
• table-info: Applies an info background color.
• table-warning: Applies a warning background color.
• table-danger: Applies a danger background color.
• table-light: Applies a light background color.
• table-dark: Applies a dark background color.

These classes allow you to apply specific colors to table rows or cells to match your design or highlight specific information.

<table class="table table-dark">
    <thead>
      <tr>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr class="table-dark">
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr class="table-secondary">
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td class="table-secondary">Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
    </tbody>
</table>

By using these classes, you can easily add color variations to your tables in Bootstrap 5.3. Apply the desired class to the appropriate elements within your table, such as <tr> or <td>, to achieve the desired color effect.

Striped Table

In Bootstrap 5.3, you can easily apply different colors to tables using the available utility classes. Here's an explanation of the table color options in Bootstrap 5.3

• Add the "table-striped" class: To create a striped table, apply the "table-striped" class to the <table> element. For example, your table declaration would look like this: <table> class="table table-striped">.
• Row Alternation: The "table-striped" class automatically adds alternating background colors to the table rows. By default, Bootstrap uses two background colors: a light color for even rows and a transparent background for odd rows..

By following these steps, you can create a striped table in Bootstrap 5.3. The striped pattern improves readability and helps users visually separate and differentiate rows in a table. Remember to include the necessary Bootstrap CSS and JavaScript files in your project to ensure that the Bootstrap styles and functionalities are properly applied to the table and other elements.

<table class="table table-striped">
    <thead>
      <tr>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
    </tbody>
</table>

Striped Table Columns

In Bootstrap 5.3, you can create striped tables by using the "table-striped-columns" class. A striped table alternates the background color of table columns, making it easier to read and distinguish between columns. Here's an explanation of how to create a striped table in Bootstrap 5.3

<table class="table table-striped-columns table-dark">
    <thead>
      <tr>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
    </tbody>
</table>

Hover Table

In Bootstrap 5.3, you can create a hover effect on table rows using the "table-hover" class. This class adds interactivity to your table by highlighting rows when hovering over them. Here's an explanation of how to create a hover table in Bootstrap 5.3

Add the "table-hover" class: To create a hover effect on table rows, apply the "table-hover" class to the <table> element. For example, your table declaration would look like this: <table class="table table-hover">

<table class="table table-hover">
    <thead>
      <tr>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
    </tbody>
</table>

Active Rows

Highlight a table row or cell by adding a .table-active class.

<table class="table">
  <thead>
    <tr>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
      <th class="table-active">Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr class="table-active">
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td class="table-active">Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
  </tbody>
</table>

Bordered Table

In Bootstrap 5.3, the "table-bordered" class allows you to add borders to the cells of a table, creating a bordered appearance. Here's an explanation of how to use the "table-bordered" class in Bootstrap 5.3

Add the "table-bordered" class: To create a table with borders around its cells, apply the "table-bordered" class to the <table> element. For example, your table declaration would look like this: <table class="table table-bordered">

<table class="table table-bordered">
  <thead>
    <tr>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
  </tbody>
</table>

Table Bordered with Border-color

Add .table-bordered for borders on all sides of the table and cells.

• .table
• .table-bordered
• .border-primary
• .border-secondary
• .border-danger
• .border-info
• .border-warning
• .border-dark
• .border-light
• .border-success

<table class="table table-bordered border-light table-dark">
  <thead>
    <tr>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
  </tbody>
</table>

Borderless Table

In Bootstrap 5.3, you can create a borderless table by using the "table-borderless" class. This class allows you to remove the borders around the cells of a table, resulting in a clean and borderless appearance. Here's an explanation of how to create a borderless table in Bootstrap 5.3.

Add the "table-borderless" class: To create a table without borders around its cells, apply the "table-borderless" class to the <table> element. For example, your table declaration would look like this: <table class="table table-borderless">

<table class="table table-borderless">
  <thead>
    <tr>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
  </tbody>
</table>

Compact Table

In Bootstrap 5.3, you can create a compact table by using the "table-sm" class. This class reduces the padding and font size of the table, making it more compact and suitable for displaying larger amounts of data in a limited space. Here's an explanation of how to create a compact table in Bootstrap 5.3

Add the "table-sm" class: To create a compact table, apply the "table-sm" class to the <table> element. For example, your table declaration would look like this: <table class="table table-sm">

<table class="table table-sm">
  <thead>
    <tr>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
  </tbody>
</table>

Table Group Dividers

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.

<table class="table">
  <thead>
    <tr>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
    </tr>
  </thead>
  <tbody class="table-group-divider" style="border-top-color: red">
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
  </tbody>
</table>

Nested Table

In Bootstrap 5.3, you can create nested tables by placing one table inside another. This technique allows you to organize and structure your data in a hierarchical manner. Here's an explanation of how to create nested tables in Bootstrap 5.3

<table class="table table-bordered">
  <thead>
    <tr>
      <th>Heading</th>
      <th>Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>
        <table class="table">
          <thead>
            <tr>
              <th>Heading</th>
              <th>Heading</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Data</td>
              <td>Data</td>
            </tr>
            <tr>
              <td>Data</td>
              <td>Data</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Table With Footer

In Bootstrap 5.3, you can create a table with a footer section to display additional information or summary data. The footer section appears below the table body and can be used to provide context or aggregate data. Here's an explanation of how to create a table with a footer in Bootstrap 5.3

Add the footer section: Use the <tfoot> element to define the footer section of the table. Inside the <tfoot> element, create a table row (<tr>) and populate it with the desired footer data. You can include the same number of cells as in the table body, or customize it to suit your specific requirements.

<table class="table">
  <thead>
    <tr>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
  </tbody>
  <tfoot class="table-primary">
    <tr>
      <td>Footer Data</td>
      <td>Footer Data</td>
      <td>Footer Data</td>
      <td>Footer Data</td>
      <td>Footer Data</td>
    </tr>
  </tfoot>
</table>

Table With Caption

A <caption> functions like a heading for a table. It helps users with screen readers to find a table and understand what it's about and decide if they want to read it.

You can also put the <caption> on the top of the table with .caption-top.

<table class="table">
  <caption class="caption-top">
    Table Caption
  </caption>
  <thead>
    <tr>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
      <th>Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
    </tr>
  </tbody>
</table>

Responsive Table

In Bootstrap 5.3, you can create responsive tables that adapt to different screen sizes using the "table-responsive" class. This class ensures that the table remains horizontally scrollable on smaller screens, preventing it from overflowing the container and maintaining readability. Here's an explanation of how to create a responsive table in Bootstrap 5.3.

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
    </tbody>
  </table>
</div>

Live Preview

• Previous
• Next

Bootstrap 5.3X Tutorial

---

• Bootstrap Introduction
• Install Bootstrap
• Breakpoints in Bootstrap
• Container in Bootstrap
• Grid System in Bootstrap
• Columns in Bootstrap
• Margin in Bootstrap
• Padding in Bootstrap
• Gutter in Bootstrap
• Text Color in Bootstrap
• Background Color in Bootstrap
• Border in Bootstrap
• Typography in Bootstrap
• Images in Bootstrap
• Image Gallery in Bootstrap
• Tables in Bootstrap
• Figures in Bootstrap
• Form Control in Bootstrap
• Form Checkbox and Radio in Bootstrap
• Range in Bootstrap
• Form Input Group in Bootstrap
• Floating Label in Bootstrap
• Form Layout in Bootstrap
• Form Validation in Bootstrap
• Form Select in Bootstrap
• Border Radius in Bootstrap

components

---

• Accordion in Bootstrap
• Alert in Bootstrap
• Badge in Bootstrap
• Breadcrumb in Bootstrap
• Buttons in Bootstrap
• Cards in Bootstrap
• Carousel in Bootstrap
• Collapse in Bootstrap
• Dropdown in Bootstrap
• List Group in Bootstrap
• Modal in Bootstrap
• List of Class in Bootstrap

---

Learn All in Tamil © Designed & Developed By Tutor Joes | Privacy Policy | Terms & Conditions