Bootstrap Tables

Your will discover how to use Bootstrap to make beautiful tables in this article.

To achieve basic styling for tables with horizontal dividers and small cell padding (default 8px), you can apply the Bootstrap class .table to the <table> element.

 <table class="table">
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
            </tr>
        </thead>

• Try this code

Moreover, Bootstrap provides various contextual classes like .table-primary ,.table-secondary,.table-success, .table-danger,.table-warning, .table-info,.table-light, and .table-dark.

These classes enable you to apply colors to tables, table rows, or individual cells.

For instance, by using the .table-dark contextual class, you can create a dark version of the .table with light text on dark backgrounds.

<div class="m-4">
    <table class="table table-dark">
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
            </tr>
        </thead>

• Try this code

Likewise, you have the option to utilize various other contextual classes. For example, in the following instance, the class .table-success is applied to the .table to produce a green-colored variation of the table.

<div class="m-4">
    <table class="table table-primary">
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
            </tr>
        </thead>

• Try this code

The snippets section contains examples of beautifully designed Bootstrap tables that you can explore.

Tip: These contextual classes can be used in combination with the .table base class to create colored versions of tables, such as stripped, hoverable, bordered, and compact tables, among others.

Furthermore, these contextual classes can be used to emphasize specific rows within a table. For example, you can achieve emphasized rows by applying the relevant class to the table.

<div class="m-4">
    <table class="table table-primary">
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
            </tr>
        </thead>

• Try this code

To add zebra-striping to the table rows within the <tbody>, simply add the additional class .table-striped to the .table base class. This will alternate the background colors of the rows for improved visual distinction.

<div class="m-4">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
            </tr>
        </thead>

• Try this code

By including the modifier class, boundaries may be added to the table's and the cells' entire sides.table-borderedto the.tablebase class, as demonstrated in the sample below:

<div class="m-4">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
            </tr>
        </thead>

• Try this code

Utilizing the class.table-borderlesson the.tablecomponent, your can also make tables without borders.

<div class="m-4">
    <table class="table table-borderless">
        <thead>
                  <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
            </tr>
        </thead>

• Try this code

To enable a hover state on table rows within a <tbody> element, simply add the modifier class .table-hover to the .table base class. This will allow rows to change appearance when hovered over. Take a look at the following example:

<div class="m-4">
    <table class="table table-hover">
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
            </tr>
        </thead>

• Try this code

Additionally, you can make your tables more compact and save space by using the modifier class .table-sm in combination with the .table base class. The .table-sm class reduces cell padding by half, resulting in a more compact table. Observe the example below:

<div class="m-4">
    <table class="table table-sm">
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
            </tr>
        </thead>

• Try this code

Just like light and dark tables, you can utilize the modifier classes .table-light or .table-dark on the <thead> element to render it in light or dark gray.

Example for a table with a light gray background in the head:

<div class="m-4">
    <table class="table">
        <thead class="table-light">
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
            </tr>
        </thead>
        

• Try this code

Example for a table with a dark gray background in the head:

<div class="m-4">
    <table class="table">
        <thead class="table-dark">
            <tr>
                 <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
            </tr>
        </thead>

• Try this code

For responsive design, you can create tables that allow horizontal scrolling on small devices. Simply enclose the table within a <div> element and apply the .table-responsive class to it. To control when the table should display a scrollbar based on viewport width (breakpoints), use the classes .table-responsive{-sm|-md|-lg|-xl}.

Let's examine the following example to grasp how it functions:

<div class="m-4">
    <div class="table-responsive"> 
        <table class="table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Email</th>
                    <th>Biography</th>
                </tr>
            </thead>

• Try this code

Tip: Note that text inside the cells of <thead> is always vertically aligned to the bottom, while text inside the cells of <tbody> inherits alignment from the <table> and is vertically aligned to the top by default. Use the vertical align classes to adjust text alignment as needed.

What are Bootstrap tables?

Bootstrap tables are a part of the framework's components that allow developers to create organized and structured data presentations in a tabular format on web pages. They are designed to be responsive, customizable, and easy to integrate into various projects.

How do you create a basic Bootstrap table?

To create a basic Bootstrap table, you need to use the <table> element along with the appropriate classes provided by Bootstrap. Here's an example:

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>Doe</td>
    </tr>
  </tbody>
</table>

In this example, the table class from Bootstrap is applied to the <table> element to style it as a Bootstrap table. The <thead> and <tbody> elements are used to define the table header and body sections respectively, while <th> and <td> elements are used for header and data cells.

How can you make Bootstrap tables responsive?

Bootstrap provides a responsive table class table-responsive that you can apply to a parent container of the <table> element to make it horizontally scrollable on smaller screens. Here's how to use it:

<div class="table-responsive">
  <table class="table">
    <!-- table content -->
  </table>
</div>

By using this approach, the table will retain its structure and remain usable on devices with limited screen space.

How can you style alternate rows in a Bootstrap table?

Bootstrap provides classes to style alternate rows in a table, making it easier to differentiate between rows. Use the table-striped class to achieve this effect:

<table class="table table-striped">
  <!-- table content -->
</table>

The table-striped class will apply a light background color to every other row in the table, enhancing readability.

Can you explain how to add borders to Bootstrap tables?

To add borders to a Bootstrap table, you can use the table-bordered class:

<table class="table table-bordered">
  <!-- table content -->
</table>

The table-bordered class adds borders to the table and its cells, helping to visually separate the content.

How can you center-align content within cells of a Bootstrap table?

To center-align content within cells, you can use the text-center class along with the appropriate <td> or <th> elements:

<table class="table">
  <thead>
    <tr>
      <th class="text-center">#</th>
      <th class="text-center">Item</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="text-center">1</td>
      <td class="text-center">Widget</td>
    </tr>
  </tbody>
</table>

How can you make a Bootstrap table's header fixed while scrolling the table body?

To create a table with a fixed header while allowing the body to scroll, you can use the table-fixed class and wrap the <thead> element with a containing <div>. Here's an example:

<div class="table-responsive">
  <table class="table table-fixed">
    <thead>
      <tr>
        <th>#</th>
        <th>Item</th>
      </tr>
    </thead>
    <tbody>
      <!-- rows of data -->
    </tbody>
  </table>
</div>

By applying the table-fixed class and using the table-responsive container, the header will stay fixed while the body scrolls.

How can you customize the appearance of Bootstrap tables using CSS?

You can customize the appearance of Bootstrap tables by overriding the default styles with your own CSS rules. For example, you can target specific table elements and classes to change colors, fonts, borders, and more. Here's a basic example:

/* Custom styles for Bootstrap tables */
.table {
  border: 2px solid #ccc;
  font-family: Arial, sans-serif;
}

.table thead th {
  background-color: #f0f0f0;
  color: #333;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: #f5f5f5;
}

/* Add more custom styles as needed */

By applying custom CSS rules, you can tailor the table's appearance to match your design preferences.

How can you add contextual classes to rows or cells in a Bootstrap table?

Contextual classes in Bootstrap allow you to apply different background colors to table rows or cells based on their content. For example, you can use table-primary, table-success, table-info, table-warning, and table-danger classes to highlight rows or cells with different colors corresponding to these contexts. Here's an example of applying a contextual class to a row:

<table class="table">
  <tbody>
    <tr class="table-success">
      <td>1</td>
      <td>Success</td>
    </tr>
    <!-- More rows -->
  </tbody>
</table>

How can you create a hover effect on rows in a Bootstrap table?

To add a hover effect to table rows, you can use the table-hover class:

<table class="table table-hover">
  <!-- table content -->
</table>

With the table-hover class, rows will change their background color when hovered over, making the interaction more intuitive.

Can you explain how to add responsive behavior to Bootstrap tables for mobile devices?

Bootstrap provides a responsive table class table-responsive that you can use to ensure that tables adapt well on smaller screens. However, when the table content overflows horizontally, it might become unreadable. To solve this, you can also consider using horizontal scrolling with the table-responsive class:

<div class="table-responsive">
  <table class="table">
    <!-- table content -->
  </table>
</div>

By adding this structure, the table will remain within the screen's width and be horizontally scrollable when necessary.

How can you add pagination to a Bootstrap table?

Bootstrap provides built-in pagination classes to add pagination controls to tables with a large number of rows. Use the pagination class along with other pagination-related classes to enable pagination:

<div class="table-responsive">
  <table class="table">
    <!-- table content -->
  </table>
</div>
<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <!-- Add more page links -->
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

By integrating pagination controls with the table, you can improve the user experience when dealing with large datasets.

How can you make a Bootstrap table's columns sortable?

Bootstrap does not provide built-in sorting functionality for tables. However, you can use JavaScript libraries like DataTables or Sortable to add sorting capabilities to your tables. DataTables, for example, allows you to enhance your tables with features like sorting, searching, and pagination. To use DataTables, you would need to include its script and initialize it on your table:

<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css" rel="stylesheet">
<script>
    $(document).ready(function () {
        $('#myTable').DataTable(); // Assuming your table has the ID 'myTable'
    });
</script>

How can you make a Bootstrap table's columns resizable?

Bootstrap does not provide built-in column resizing functionality. However, you can use third-party libraries like jquery-resizable-columns or react-table-resizable (for React projects) to achieve column resizing in Bootstrap tables. These libraries typically require additional JavaScript and CSS files to be included in your project.

How can you make a Bootstrap table's columns responsive for mobile devices?

By default, Bootstrap tables are responsive, meaning they will stack vertically on smaller screens. To control the visibility of specific columns on different screen sizes, you can use responsive utility classes such as d-none (hide), d-md-table-cell (display as table cell on medium screens and above), etc. For example:

<table class="table">
  <thead>
    <tr>
      <th class="d-none d-md-table-cell">#</th>
      <th>Item</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="d-none d-md-table-cell">1</td>
      <td>Widget</td>
    </tr>
  </tbody>
</table>

In this example, the d-none d-md-table-cell classes ensure that the first column (with the number) is hidden on small screens but displayed as a table cell on medium screens and above.

What are accented tables in Bootstrap?

Accented tables in Bootstrap are tables with enhanced visual styling that use contextual classes to apply different background colors to specific rows, cells, or even individual columns. These classes provide visual cues to highlight or accentuate specific data or information within the table.

How can you create an accented table in Bootstrap?

To create an accented table, you can utilize the contextual classes provided by Bootstrap. These classes include table-primary, table-secondary, table-success, table-danger, table-warning, table-info, and table-light. Apply these classes to rows, cells, or columns to add different background colors. Here's an example:

<table class="table">
  <thead>
    <tr>
      <th>Item</th>
      <th>Category</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-success">
      <td>Widget A</td>
      <td>Electronics</td>
    </tr>
    <tr class="table-warning">
      <td>Accessory B</td>
      <td>Apparel</td>
    </tr>
    <!-- More rows -->
  </tbody>
</table>

In this example, the table-success class is applied to the first row, giving it a green background, and the table-warning class is applied to the second row, giving it a yellow background.

How can you apply contextual classes to specific columns in an accented table?

You can apply contextual classes to specific columns in an accented table by assigning the class directly to the <th> or <td> elements within the column. This allows you to accentuate entire columns based on their context. Here's an example:

<table class="table">
  <thead>
    <tr>
      <th>Item</th>
      <th class="table-success">Category</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Widget A</td>
      <td class="table-success">Electronics</td>
    </tr>
    <!-- More rows -->
  </tbody>
</table>

In this example, the table-success class is applied to both the header and the corresponding cells in the "Category" column, accentuating that entire column.

Can you mix and match different contextual classes in an accented table?

Yes, you can mix and match different contextual classes in an accented table to apply different colors to various rows or columns. For instance, you can have one row with a table-success class, another row with table-danger, and specific columns with their own contextual classes. This allows you to create visually engaging and informative tables.

<table class="table">
  <thead>
    <tr>
      <th>Item</th>
      <th>Category</th>
      <th>Availability</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-success">
      <td>Widget A</td>
      <td>Electronics</td>
      <td class="table-danger">Out of stock</td>
    </tr>
    <!-- More rows -->
  </tbody>
</table>

In this example, the "Item" column has a green background, the "Availability" column has a red background, and the "Category" column retains the default styling.

Can you customize the colors of contextual classes in accented tables?

Yes, you can customize the colors of contextual classes by overriding Bootstrap's default CSS rules with your own custom styles. For example, if you want to change the color of the table-success class, you can create a custom CSS rule like this:

.table-success {
  background-color: #00cc00; /* Your custom color */
  color: white; /* Text color on the background */
}

By applying your custom CSS, you can tailor the accent colors to match your design preferences.

Can you use the table-striped class with other table styles or classes?

Yes, you can use the table-striped class in combination with other Bootstrap table styles and classes. For example, you can create a table with striped rows and bordered cells:

<table class="table table-striped table-bordered">
  <!-- table content -->
</table>

By combining classes, you can create tables with various styles while maintaining the striped row effect.

How can you customize the background colors of striped rows?

The background colors of striped rows are determined by Bootstrap's default CSS. If you want to customize these colors, you can override the default styles with your own custom CSS. Here's an example of how you can change the colors:

/* Custom styles for striped rows */
.table-striped tbody tr:nth-of-type(odd) {
  background-color: #f5f5f5; /* Custom odd row color */
}

.table-striped tbody tr:nth-of-type(even) {
  background-color: #dcdcdc; /* Custom even row color */
}

By applying these custom styles, you can change the default alternating background colors.

How can you create a responsive table with striped rows?

To create a responsive table with striped rows, you can use the table-responsive class along with the table-striped class:

<div class="table-responsive">
  <table class="table table-striped">
    <!-- table content -->
  </table>
</div>

By wrapping the table in a <div> with the table-responsive class, you ensure that the table adapts to different screen sizes while maintaining the striped row styling.

How can you customize the border colors and styles of a bordered table?

You can customize the border colors and styles of a bordered table by overriding Bootstrap's default CSS styles with your own custom styles. For example, you can change the border color and width for cells:

/* Custom styles for bordered table */
.table-bordered {
  border: 2px solid #ddd; /* Custom border color and width */
}

.table-bordered th,
.table-bordered td {
  border: 1px solid #ddd; /* Custom border color and width */
}

By applying these custom styles, you can change the appearance of borders in your table.

What are borderless tables in Bootstrap?

Borderless tables in Bootstrap are tables where cells, rows, and the table itself have no visible borders. These tables create a clean and seamless appearance, often used to present data without distracting visual elements.

How can you create a borderless table in Bootstrap?

To create a borderless table in Bootstrap, you can use the table-borderless class. Apply this class to the <table> element, and Bootstrap will remove the default borders from cells, rows, and the table:

<table class="table table-borderless">
  <!-- table content -->
</table>

By applying the table-borderless class, the table will have no visible borders, giving it a borderless appearance.

How can you enable the hover state on table rows in Bootstrap?

To enable the hover state on table rows in Bootstrap, you can use the table-hover class. Apply this class to the <table> element, and Bootstrap will automatically add the hover effect to table rows:

<table class="table table-hover">
  <!-- table content -->
</table>

By applying the table-hover class, the table rows will change background color when hovered over.

How can you customize the appearance of the hover effect for table rows?

The appearance of the hover effect is controlled by Bootstrap's default CSS styles. However, you can customize the effect by overriding these styles with your own custom CSS. Here's an example of changing the hover background color:

/* Custom hover effect for table rows */
.table-hover tbody tr:hover {
  background-color: #f5f5f5; /* Custom hover background color */
}

By applying this custom style, you can change the background color of table rows when they are hovered over.

What are small or compact tables in Bootstrap?

Small or compact tables in Bootstrap are tables with reduced padding and font sizes, designed to fit more content in a limited space. These tables are useful when you want to present tabular data in a condensed format without sacrificing readability.

How can you create a small or compact table in Bootstrap?

To create a small or compact table in Bootstrap, you can use the table-sm class. Apply this class to the <table> element, and Bootstrap will reduce padding and font sizes to create a more compact layout:

<table class="table table-sm">
  <!-- table content -->
</table>

By applying the table-sm class, the table will have smaller cell padding and font sizes.

How can you adjust the column widths of a compact table to fit the content?

The column widths in a compact table will automatically adjust to fit the content due to Bootstrap's responsive grid system. However, you can further control column widths by using additional Bootstrap classes like col-*. Here's an example:

<table class="table table-sm">
  <thead>
    <tr>
      <th class="col">Item</th>
      <th class="col-3">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="col">Widget A</td>
      <td class="col-3">$50</td>
    </tr>
    <!-- More rows -->
  </tbody>
</table>

In this example, the col and col-3 classes are used to control the column widths for the "Item" and "Price" columns, respectively.

How can you create a compact table that spans the full width of its parent container?

To create a compact table that spans the full width of its parent container, you can use the w-100 class along with the table-sm class:

<div class="table-responsive">
  <table class="table table-sm w-100">
    <!-- table content -->
  </table>
</div>

In this example, the w-100 class is used to make the table occupy the full width of its parent container while maintaining the compact layout.

How can you combine a compact table with other Bootstrap utilities like spacing or alignment classes?

You can combine a compact table with other Bootstrap utilities like spacing or alignment classes to control the overall layout. For instance, to add padding and center align the table:

<table class="table table-sm p-4 text-center">
  <!-- table content -->
</table>

In this example, the p-4 class adds padding and the text-center class centers the table content within its parent container.

Can you use Bootstrap classes to set the colors of the table head?

Bootstrap provides contextual classes that can be used to style the table head. These classes are typically used for styling the text and background color. For example:

<table class="table">
  <thead>
    <tr>
      <th class="bg-primary text-white">Header 1</th>
      <th class="bg-danger text-white">Header 2</th>
    </tr>
  </thead>
  <tbody>
    <!-- table content -->
  </tbody>
</table>

In this example, the bg-primary class sets the background color to the primary theme color, and the text-white class sets the font color to white.

How can you set different colors for individual headers within the table head?

You can set different colors for individual headers by applying inline styles or Bootstrap classes directly to the <th> elements within the <thead> section. Here's an example:

<table class="table">
  <thead>
    <tr>
      <th style="background-color: blue; color: white;">Header 1</th>
      <th class="bg-danger text-white">Header 2</th>
    </tr>
  </thead>
  <tbody>
    <!-- table content -->
  </tbody>
</table>

In this example, the first header has an inline style with a blue background and white text, while the second header uses Bootstrap's bg-danger and text-white classes for styling.

What are responsive tables in Bootstrap?

Responsive tables in Bootstrap are tables that adapt their layout to different screen sizes, ensuring that the table content remains easily readable and usable on various devices, including mobile phones, tablets, and desktops.

How can you create a responsive table in Bootstrap?

To create a responsive table in Bootstrap, you can use the table-responsive class. Wrap your table within a <div> element with this class:

<div class="table-responsive">
  <table class="table">
    <!-- table content -->
  </table>
</div>

By using the table-responsive class, the table will become responsive and adjust its layout based on the screen width.

Can you apply additional styling to responsive tables in Bootstrap?

Yes, you can apply additional styling to responsive tables. For example, you can use the table-striped, table-bordered, or other Bootstrap classes along with the table-responsive class to style the table according to your design needs.

<div class="table-responsive">
  <table class="table table-striped table-bordered">
    <!-- table content -->
  </table>
</div>

This combination will create a responsive table with striped rows, borders, and other styles.

How does Bootstrap's responsive table work?

Bootstrap's responsive table works by applying CSS rules that make the table scroll horizontally on smaller screens. The table-responsive class adds an overflow property to the <div> container, allowing users to scroll horizontally when the table content exceeds the screen width.

Bootstrap's approach to responsive tables equips designers and developers with powerful tools to present tabular data in a user-friendly and adaptable manner across varying screen sizes and devices. This responsiveness extends to a range of table styling options and the ability to customize tables to suit the specific needs of your project.

Bootstrap enables the creation of grid tables that are not only functional but also visually appealing, making tabular data more accessible to users. The framework offers an array of table properties to ensure that data can be presented effectively. The commitment to providing mobile-friendly tables ensures that your data remains accessible to users on all devices, while maintaining table responsiveness to changing screen sizes.

You can further enhance your tables by styling table rows, creating a visually engaging presentation of data. The framework supports responsive data tables, ensuring that tabular data displays seamlessly adapt to varying screen sizes, thanks to the use of responsive table classes. This flexibility allows you to create tables for multiple devices with a tabular data layout that embraces responsive design principles.

In addition to responsiveness, Bootstrap offers the ability to introduce style and differentiation to your tables, allowing for stylish table borders and the inclusion of stripes in tables. This combination creates an appealing and distinct visual presentation of data.

Bootstrap's extensive options for color themes, custom color schemes, font customization, and text appearance adjustments allow you to create visually appealing tables that are not only functional but also aesthetically pleasing. The framework empowers you to control fonts and colors with precision, ensuring a consistent and engaging presentation of data.

In conclusion, Bootstrap's responsive tables, combined with flexible table styling, color customization, and font adjustments, provide a comprehensive toolkit for designers and developers to create visually appealing and user-friendly tabular data presentations that adapt seamlessly to various devices and screen sizes.