Bootstrap 4 Table: Bootstrap 4 offers a versatile and easy-to-use table component that allows developers to create responsive and stylish tables for displaying data on their web pages. Bootstrap 4 provides contextual classes to add color-coded backgrounds to table rows and cells based on their content or state. These classes include .table-primary, .table-success, .table-info, .table-warning, .table-danger, and .table-active.
Bootstrap 4 Table Overview
Bootstrap 4 provides a powerful and flexible grid system for creating responsive layouts, and its table component is no exception. The Bootstrap 4 table component allows developers to create stylish and responsive tables for displaying data on their web pages. Here’s an overview of the Bootstrap 4 table component:
- Basic Structure: The basic structure of a Bootstrap 4 table consists of HTML <table> element along with various classes provided by Bootstrap to style the table. It typically includes <thead> for table headers, <tbody> for table body, <tfoot> for table footer, and <tr> for table rows.
- Responsive Design: The table-responsive class can be added to the table’s container to enable horizontal scrolling on smaller screens.
- Styling Options: Bootstrap 4 offers a variety of classes to style tables, including .table for basic table styling, .table-striped for adding zebra-striping to alternate rows, .table-bordered for adding borders to table and cells, .table-hover for adding a hover effect to table rows, and .table-sm for creating smaller, more compact tables.
- Responsive Tables: To create responsive tables, Bootstrap 4 offers the .table-responsive class, which makes the table horizontally scrollable on smaller screens. This ensures that tables remain accessible and readable on devices with limited screen space.
- Advanced Features: Bootstrap 4 also includes advanced features for tables, such as responsive tables with horizontal and vertical scrolling, table head options for sticky headers, and table sorting and filtering functionality with JavaScript plugins like DataTables.
Overall, the Bootstrap 4 table component provides developers with a powerful set of tools for creating visually appealing and responsive tables that enhance the user experience on web pages.
Bootstrap 4 Table Templates
Bootstrap 4 offers a variety of table templates that you can use to display data in a structured and visually appealing manner. Here are some examples:
1) Basic Table:
<table class=”table”>
 <thead>
 <tr>
 <th>#</th>
 <th>First Name</th>
 <th>Last Name</th>
 <th>Username</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>1</td>
 <td>John</td>
 <td>Doe</td>
 <td>@johndoe</td>
 </tr>
 <tr>
 <td>2</td>
 <td>Jane</td>
 <td>Smith</td>
 <td>@janesmith</td>
 </tr>
 <!– Additional rows –>
 </tbody>
</table>
2) Striped Rows:
<table class=”table table-striped”>
 <!– Table content –>
</table>
3) Bordered Table:
<table class=”table table-bordered”>
 <!– Table content –>
</table>
4) Hover Rows:
<table class=”table table-hover”>
 <!– Table content –>
</table>
5) Responsive Table:
<div class=”table-responsive”>
 <table class=”table”>
 <!– Table content –>
 </table>
</div>
6) Dark Table:
<table class=”table table-dark”>
 <!– Table content –>
</table>
7) Small Table:
<table class=”table table-sm”>
 <!– Table content –>
</table
Bootstrap 4 Table-Responsive
To create a responsive table using Bootstrap 4, you can use the .table-responsive class along with the standard .table class. This combination allows the table to horizontally scroll on smaller screens when necessary. Here’s an example:
<div class=”table-responsive”>
  <table class=”table”>
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>John</td>
        <td>Doe</td>
        <td>@johndoe</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jane</td>
        <td>Smith</td>
        <td>@janesmith</td>
      </tr>
      <!– Additional rows –>
    </tbody>
  </table>
</div>
In this example, the div with the class table-responsive wraps around the table element. This ensures that the table is responsive and will horizontally scroll when needed on smaller screens. You can customize the table further by adding additional Bootstrap table classes or custom CSS styles as needed.
Bootstrap 4 Table HTML
Here’s an example of how you can create a basic table using Bootstrap 4 HTML:
<!DOCTYPE html>
<html lang=”en”>
<head>
  <meta charset=”UTF-8″>
  <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
  <title>Bootstrap 4 Table Example</title>
  <!– Bootstrap CSS –>
  <link href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”container”>
  <h2>Bootstrap 4 Table Example</h2>
  <table class=”table”>
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>John</td>
        <td>Doe</td>
        <td>@johndoe</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jane</td>
        <td>Smith</td>
        <td>@janesmith</td>
      </tr>
      <!– Additional rows –>
    </tbody>
  </table>
</div>
<!– Bootstrap JS –>
<script src=”https://code.jquery.com/jquery-3.5.1.slim.min.js”></script>
<script src=”https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js”></script>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js”></script>
</body>
</html>
- <!DOCTYPE html>: This declaration specifies the document type and version of HTML being used.
- <html lang=”en”>: The opening <html> tag specifies the root element of the HTML document, with the lang attribute indicating that the language used in the document is English.
- <head>: This section contains metadata about the HTML document, such as character encoding, viewport settings, and the title of the document.
- <meta charset=”UTF-8″>: Specifies the character encoding for the document as UTF-8, which supports a wide range of characters from different languages.
- <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>: Sets the viewport properties to ensure proper rendering and scaling on different devices.
- <title>Bootstrap 4 Table Example</title>: Sets the title of the HTML document.
- Bootstrap CSS: The <link> tag includes the Bootstrap CSS file from a CDN (Content Delivery Network), providing the necessary styling for Bootstrap components.
- <body>: The <body> tag marks the start of the HTML document’s body, where the visible content is placed.
- <div class=”container”>: Creates a container element with the Bootstrap class container, which helps to center and control the layout of the content.
- <h2>Bootstrap 4 Table Example</h2>: Displays a heading indicating that it’s an example of a Bootstrap 4 table.
- <table class=”table”>: Defines a table element with the Bootstrap class table, which applies styling to the table.
- <thead>: Marks the start of the table header section, which contains the column headings.
- <tr>: Defines a table row within the table header section.
- <th>: Represents a header cell within a table row, containing column headings.
- Table data rows (<tbody>): The <tbody> tag marks the start of the table body section, which contains the actual data rows of the table.
- <tr>: Defines a table row within the table body section.
- <td>: Represents a data cell within a table row, containing actual data values.
- Bootstrap JS: The <script> tags include the Bootstrap JavaScript files and other dependencies from CDNs, which are required for certain Bootstrap components and functionality.
- Closing tags: The closing tags (</body> and </html>) mark the end of the HTML document’s body and root element, respectively.
Bootstrap 4 Table Examples With Explanations
Below are some Bootstrap 4 table examples with explanations:
Example 1: Basic Table
<!DOCTYPE html>
<html lang=”en”>
<head>
 <meta charset=”UTF-8″>
 <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
 <title>Bootstrap 4 Table Example</title>
 <link href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
 <div class=”container”>
 <h2>Basic Bootstrap 4 Table</h2>
 <table class=”table”>
 <thead>
 <tr>
 <th>ID</th>
 <th>Name</th>
 <th>Age</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>1</td>
 <td>John Doe</td>
 <td>30</td>
 </tr>
 <tr>
 <td>2</td>
 <td>Jane Smith</td>
 <td>25</td>
 </tr>
 </tbody>
 </table>
 </div>
 <script src=”https://code.jquery.com/jquery-3.5.1.slim.min.js”></script>
 <script src=”https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js”></script>
 <script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js”></script>
</body>
</html>
Explanation:
- This example demonstrates a basic Bootstrap 4 table with three columns: ID, Name, and Age.
- The <table> element has the table class to apply Bootstrap styling to the table.
- The table header (<thead>) contains column headings specified within <th> tags.
- Table body (<tbody>) contains rows (<tr>) with data cells (<td>).
- External Bootstrap CSS and JavaScript files are included from CDNs for styling and functionality.
Example 2: Striped Table
<!DOCTYPE html>
<html lang=”en”>
<head>
 <meta charset=”UTF-8″>
 <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
 <title>Bootstrap 4 Striped Table Example</title>
 <link href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
 <div class=”container”>
 <h2>Striped Bootstrap 4 Table</h2>
 <table class=”table table-striped”>
 <thead>
 <tr>
 <th>ID</th>
 <th>Name</th>
 <th>Age</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>1</td>
 <td>John Doe</td>
 <td>30</td>
 </tr>
 <tr>
 <td>2</td>
 <td>Jane Smith</td>
 <td>25</td>
 </tr>
 </tbody>
 </table>
 </div>
 <script src=”https://code.jquery.com/jquery-3.5.1.slim.min.js”></script>
 <script src=”https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js”></script>
 <script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js”></script>
</body>
</html>
Explanation:
- This example showcases a Bootstrap 4 table with alternating background colors for rows, achieved using the table-striped class.
- The table structure and content are similar to the basic table example.
- The table-striped class adds background color to every other row, enhancing readability and visual appeal.
Example 3: Bordered Table
<!DOCTYPE html>
<html lang=”en”>
<head>
 <meta charset=”UTF-8″>
 <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
 <title>Bootstrap 4 Bordered Table Example</title>
 <link href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
 <div class=”container”>
 <h2>Bordered Bootstrap 4 Table</h2>
 <table class=”table table-bordered”>
 <thead>
 <tr>
 <th>ID</th>
 <th>Name</th>
 <th>Age</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>1</td>
 <td>John Doe</td>
 <td>30</td>
 </tr>
 <tr>
 <td>2</td>
 <td>Jane Smith</td>
 <td>25</td>
 </tr>
 </tbody>
 </table>
 </div>
 <script src=”https://code.jquery.com/jquery-3.5.1.slim.min.js”></script>
 <script src=”https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js”></script>
 <script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js”></script>
</body>
</html>
Explanation:
- This example demonstrates a Bootstrap 4 table with borders around cells and between rows, achieved using the table-bordered class.
- The table structure and content remain the same as in the previous examples.
- The table-bordered class adds borders to each cell and row of the table, providing a visually distinct appearance.
Example 4: Hoverable Rows Table
<!DOCTYPE html>
<html lang=”en”>
<head>
 <meta charset=”UTF-8″>
 <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
 <title>Bootstrap 4 Hoverable Rows Table Example</title>
 <link href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
 <div class=”container”>
 <h2>Hoverable Rows Bootstrap 4 Table</h2>
 <table class=”table table-hover”>
 <thead>
 <tr>
 <th>ID</th>
 <th>Name</th>
 <th>Age</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>1</td>
 <td>John Doe</td>
 <td>30</td>
 </tr>
 <tr>
 <td>2</td>
 <td>Jane Smith</td>
 <td>25</td>
 </tr>
 </tbody>
 </table>
 </div>
 <script src=”https://code.jquery.com/jquery-3.5.1.slim.min.js”></script>
 <script src=”https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js”></script>
 <script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js”></script>
</body>
</html>
Explanation:
- This example showcases a Bootstrap 4 table with hover effect on rows, applied using the table-hover class.
- When hovering over rows, they change background color to indicate interactivity, enhancing user experience.
Example 5: Striped Rows Table
<!DOCTYPE html>
<html lang=”en”>
<head>
 <meta charset=”UTF-8″>
 <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
 <title>Bootstrap 4 Striped Rows Table Example</title>
 <link href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
 <div class=”container”>
 <h2>Striped Rows Bootstrap 4 Table</h2>
 <table class=”table table-striped”>
 <thead>
 <tr>
 <th>ID</th>
 <th>Name</th>
 <th>Age</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>1</td>
 <td>John Doe</td>
 <td>30</td>
 </tr>
 <tr>
 <td>2</td>
 <td>Jane Smith</td>
 <td>25</td>
 </tr>
 </tbody>
 </table>
 </div>
 <script src=”https://code.jquery.com/jquery-3.5.1.slim.min.js”></script>
 <script src=”https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js”></script>
 <script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js”></script>
</body>
</html>
Explanation:
- This example features a Bootstrap 4 table with alternating background colors for rows, achieved using the table-striped class.
- The striped rows enhance readability and make it easier to distinguish between different rows of data.
Example 6: Small Table
<!DOCTYPE html>
<html lang=”en”>
<head>
 <meta charset=”UTF-8″>
 <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
 <title>Bootstrap 4 Small Table Example</title>
 <link href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
 <div class=”container”>
 <h2>Small Bootstrap 4 Table</h2>
 <table class=”table table-sm”>
 <thead>
 <tr>
 <th>ID</th>
 <th>Name</th>
 <th>Age</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>1</td>
 <td>John Doe</td>
 <td>30</td>
 </tr>
 <tr>
 <td>2</td>
 <td>Jane Smith</td>
 <td>25</td>
 </tr>
 </tbody>
 </table>
 </div>
 <script src=”https://code.jquery.com/jquery-3.5.1.slim.min.js”></script>
 <script src=”https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js”></script>
 <script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js”></script>
</body>
</html>
Explanation:
- This example demonstrates a Bootstrap 4 table with reduced padding and font size, achieved using the table-sm class.
- The smaller table size is beneficial when space is limited or when you want to display more compact data.
Uses of Bootstrap 4 Table
Bootstrap 4 tables are versatile components that can be used for various purposes in web development. Here are some common uses of Bootstrap 4 tables:
1) Displaying Tabular Data:
The primary use of Bootstrap 4 tables is to display tabular data in a structured format. Tables are useful for presenting information such as lists, grids, charts, statistics, and other data sets.
2) Creating Data Tables:
Bootstrap 4 tables provide a convenient way to create data tables with sortable columns, pagination, and search functionality. Data tables are commonly used in web applications to present large datasets in a user-friendly manner.
3) Building Pricing Tables:
Bootstrap 4 tables can be used to create pricing tables for products or services. Pricing tables typically display different pricing plans or packages side by side, making it easy for users to compare features and prices.
4) Designing Dashboard Widgets:
Tables can be used to design dashboard widgets or components for web dashboards. These widgets may display real-time data, analytics, charts, or other information relevant to the dashboard’s purpose.
5) Creating Responsive Layouts:
Bootstrap 4 tables come with built-in support for responsive design, allowing them to adapt to different screen sizes and devices. This makes them suitable for use in responsive web layouts and mobile-friendly applications.
6) Building Admin Panels:
Tables are commonly used in admin panels and back-end interfaces to display lists of users, orders, products, or other entities. Admin panels often include features like sorting, filtering, and pagination to manage large datasets efficiently.
7) Implementing Forms and Surveys:
Tables can be used to create forms or surveys with multiple input fields arranged in rows and columns. This is useful for collecting structured data from users, such as feedback, responses, or registration information.
8) Developing E-commerce Websites:
Bootstrap 4 tables are used extensively in e-commerce websites to display product listings, product specifications, customer reviews, and order details. Tables help organize product information and make it easy for shoppers to compare different products.
Overall, Bootstrap 4 tables are versatile components that play a crucial role in organizing and presenting data in web applications and websites. They provide developers with a flexible and customizable solution for displaying various types of content in a structured format.
For Latest Tech Related Information, Join Our Official Free Telegram Group : PW Skills Telegram Group
Bootstrap 4 Table FAQ's
What is a Bootstrap 4 table?
A Bootstrap 4 table is a component provided by the Bootstrap framework for creating structured data tables in web pages. It allows developers to display tabular data in a visually appealing and responsive manner.
What are some common Bootstrap 4 table classes and their purposes?
.table: Applies basic table styling to the table.
.table-striped: Adds zebra-striping to the table rows for improved readability.
.table-bordered: Adds borders to all sides of the table and its cells.
.table-hover: Adds a hover effect to table rows when hovered over.
.table-sm: Reduces the size of the table and its components for a compact look.
.table-responsive: Makes the table horizontally scrollable on smaller screens to ensure responsiveness.
Can I customize the appearance of a Bootstrap 4 table?
Yes, you can customize the appearance of a Bootstrap 4 table using CSS. You can override Bootstrap's default styles or add your own custom styles to achieve the desired look and feel.
How can I add borders to specific parts of a Bootstrap 4 table?
You can add borders to specific parts of a Bootstrap 4 table by applying appropriate border-related classes to the table, rows, or cells. For example, you can use .table-bordered to add borders to all sides of the table and cells, or you can use .border, .border-top, .border-bottom, etc., classes for more specific border styling.
Are Bootstrap 4 tables mobile-friendly?
Yes, Bootstrap 4 tables are designed to be mobile-friendly and responsive by default. They automatically adapt to different screen sizes and devices, ensuring optimal readability and usability across various platforms.
