##### Basic Table

The basic table in Bootstrap is created using the `<table>` element with the `.table` class. This class adds basic styling like borders, padding, and hover effects to make the table look clean and organized.

ID | Customer | Date | Invoice | Status
--- | --- | --- | --- | ---
#4201 | Alice Johnson | November 12, 2023 | $3,000 | Completed
#4202 | Michael Smith | November 10, 2023 | $4,750 | Failed
#4203 | Susan Lee | November 5, 2023 | $1,800 | Success
#4204 | David Brown | November 1, 2023 | $6,250 | Pending

##### Bordered Table

A bordered table in Bootstrap is created by adding the `.table-bordered` class to a `<table>`. This adds borders around all the table cells, making each row and column more distinct.

ID | Product | Price | Date Added | Stock Status | Action
--- | --- | --- | --- | --- | ---
01 | Wireless Headphones | $150 | Oct 12, 2023 | In Stock |
02 | Smartphone | $999 | Oct 10, 2023 | Out of Stock |
03 | Laptop | $1,200 | Oct 5, 2023 | In Stock |
04 | Smartwatch | $250 | Oct 12, 2023 | In Stock |

##### Borderedless Table

The Borderless Table in Bootstrap removes all table borders, providing a clean and minimal design. Use the `.table-borderless` class to apply this style to your table.

ID | Image | Product | Price | Stock Status | Price Performance | Action
--- | --- | --- | --- | --- | --- | ---
01 |  | Wireless Headphones | $150 | In Stock | 5% |
02 |  | Smartphone | $999 | Out of Stock | 3% |
03 |  | Laptop | $1,200 | In Stock | 10% |
04 |  | Smartwatch | $250 | In Stock | 8% |

##### Table Striped Column

The Striped Column Table in Bootstrap adds alternating background colors to table columns for better readability. Use the `.table-striped-columns` class to apply this effect.

ID | Coach | Email | Phone | Student | Specialty
--- | --- | --- | --- | --- | ---
01 | ###### Emily Johnson | emily.johnson@example.com | (123) 456-7890 | 5+ | Web Development
02 | ###### Michael Smith | michael.smith@example.com | (987) 654-3210 | 3+ | UI/UX
03 | ###### Alice Brown | alice.brown@example.com | (555) 123-4567 | 10+ | Full Stack
04 | ###### David Wilson | david.wilson@example.com | (444) 321-9876 | 1+ | Web Designer

##### Striped Rows

The Striped Rows Table in Bootstrap adds alternating background colors to table rows for a cleaner look. Apply the effect using the `.table-striped` class.

ID | Name | Email | Phone | Status
--- | --- | --- | --- | ---
01 | Emily Johnson | emily.johnson@example.com | (123) 456-7890 | Active
02 | Michael Smith | michael.smith@example.com | (987) 654-3210 | Pending
03 | Alice Brown | alice.brown@example.com | (555) 123-4567 | Active
04 | David Wilson | david.wilson@example.com | (444) 321-9876 | Inactive

##### Hoverable rows

The Hoverable Rows Table in Bootstrap highlights table rows when hovered. Use the `.table-hover` class to apply this effect.

ID | Contact Information | Phone | Status
--- | --- | --- | ---
01 | ###### Sarah Connor sarah.connor@example.com | (555) 765-4321 | Active
02 | ###### John Doe john.doe@example.com | (123) 987-6543 | Pending
03 | ###### Jane Smith jane.smith@example.com | (321) 654-0987 | Active
04 | ###### Chris Evans chris.evans@example.com | (987) 321-4567 | Inactive

##### Table Dark

The Table Dark example in Bootstrap uses the `.table-dark` class to apply a dark background to the table, making the text stand out with lighter colors.

ID | Customer | Date | Invoice
--- | --- | --- | ---
05 | Emily Carter | Oct 05, 2023 | $1,200
06 | David Smith | Oct 12, 2023 | $2,750
07 | Sarah Johnson | Oct 15, 2023 | $4,000
08 | Michael Brown | Oct 20, 2023 | $5,600

##### Table Primary

The Table Primary example in Bootstrap applies the `.table-primary` class to give the table a blue background, following the primary theme color for a highlighted look.

ID | Customer | Date | Invoice
--- | --- | --- | ---
05 | Emily Carter | Oct 05, 2023 | $1,200
06 | David Smith | Oct 12, 2023 | $2,750
07 | Sarah Johnson | Oct 15, 2023 | $4,000
08 | Michael Brown | Oct 20, 2023 | $5,600

##### Active Table

The Active Table example in Bootstrap adds an active state to a specific row or cell using the `.table-active` class. This highlights the selected row or cell with a gray background.

ID | Customer | Date | Invoice
--- | --- | --- | ---
09 | Alice Green | Oct 22, 2023 | $1,500
10 | John Doe | Oct 25, 2023 | $3,200
11 | Linda White | Oct 30, 2023 | $2,800
12 | Robert Black | Nov 02, 2023 | $4,400

##### Table Small

The Table Small example in Bootstrap uses the `.table-sm` class to create a compact table. This reduces padding and makes the table more condensed, ideal for displaying data in a smaller footprint.

ID | Customer | Date | Invoice
--- | --- | --- | ---
1 | Michael Brown | Nov 05, 2023 | $2,000
2 | Sarah Johnson | Nov 10, 2023 | $1,750
3 | David Lee | Nov 12, 2023 | $3,100
4 | Emily Davis | Nov 15, 2023 | $4,500
5 | Chris Martin | Nov 20, 2023 | $2,300
6 | Amy Wilson | Nov 25, 2023 | $3,600

##### Vertical alignment

The Vertical Alignment example in Bootstrap demonstrates how to align table cell content vertically. You can use classes like `.align-top`, `.align-middle`, and `.align-bottom` to position content at the top, middle, or bottom of the cell, enhancing the table's readability and organization.

Heading 1 | Heading 2 | Heading 3 | Heading 4
--- | --- | --- | ---
This cell inherits `vertical-align: middle;` from the table | This cell inherits `vertical-align: middle;` from the table | This cell inherits `vertical-align: middle;` from the table | This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
This cell inherits `vertical-align: bottom;` from the table row | This cell inherits `vertical-align: bottom;` from the table row | This cell inherits `vertical-align: bottom;` from the table row | This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
This cell inherits `vertical-align: middle;` from the table | This cell inherits `vertical-align: middle;` from the table | This cell is aligned to the top. | This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.

##### Nested Table

The Nested Table example in Bootstrap shows how to create a table within another table. This allows you to organize complex data hierarchically. You can use the same Bootstrap table classes to style the nested table, ensuring a consistent look while presenting detailed information effectively.

Item | Description
--- | ---
Item 1 |
Sub-item | Details
--- | ---
Sub-item 1A | This sub-item focuses on the specifications of the primary item, detailing dimensions, weight, and material used.
Sub-item 1B | Here we discuss the features such as color options, warranty information, and user reviews.
Item 2 |
Sub-item | Details
--- | ---
Sub-item 2A | This sub-item covers the performance metrics of the item, including speed, efficiency, and reliability.
Sub-item 2B | Detailed analysis of user experiences, common issues, and customer support options.

##### Table Anatomy

The Table Anatomy example in Bootstrap illustrates the basic structure of a table. It includes essential elements like the table header `<thead>`, body `<tbody>`, and footer `<tfoot>`, showcasing how to organize data in a clear and readable format.

Our Vibrant Community of Users
# | Name | Role | Handle | Bio
--- | --- | --- | --- | ---
1 | Mark Otto | Developer | @mdo | Passionate about coding and open-source contributions. Enjoys hiking in his spare time.
2 | Jacob Thornton | Designer | @fat | Creative graphic designer focused on user experience. Loves coffee and art.
3 | Larry Bird | Community Manager | @twitter | Engaging with the community to create meaningful connections. Avid reader and birdwatcher.
Join our community and connect with these amazing individuals!

Theme Customization

###### Layout:

##### Vertical

##### Horizontal

##### Semi Box

###### Content Width:

##### Default

##### Box

###### Layout Direction:

##### LTR

##### RTL

###### Layout Mode:

##### Light

##### Dark

##### System

###### Sidebar Size:

##### Default

##### Medium

##### Icon

##### Icon hover

###### Sidebar Color:

##### Light

##### Dark