Loading...

Basic Table

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 Wireless Headphones $150 In Stock 5%
02 Gabrielle Chanel Perfume Gabrielle Chanel Perfume $999 Out of Stock 3%
03 Sunglasses Luxury Sunglasses $1,200 In Stock 10%
04 Stylish Leather Backpack Stylish Leather Backpack $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
emily.johnson@example.com (123) 456-7890
Client 1
Client 2
Client 3
Web Development
02
Michael Smith
Michael Smith
michael.smith@example.com (987) 654-3210
Client 1
Client 2
3+
UI/UX
03
Alice Brown
Alice Brown
alice.brown@example.com (555) 123-4567
Client 1
Client 1
Full Stack
04
David Wilson
David Wilson
david.wilson@example.com (444) 321-9876
Client 1
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
sarah.connor@example.com
(555) 765-4321 Active
02
John Doe
John Doe
john.doe@example.com
(123) 987-6543 Pending
03
Jane Smith
Jane Smith
jane.smith@example.com
(321) 654-0987 Active
04
Chris Evans
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!

Preview Settings

Theme Layouts

Defines the admin panel's layout style, allowing you to choose from different design options.

Color Mode

Choose if app's appearance should be light or dark, or follow your computer's settings.

RTL Mode

Toggle between LTR and RTL layouts to support different language directions.

Preset Themes

Choose a preset theme from out theme library.

Sidebar Colors

Sets the sidebar color scheme. Options include light, dark, or gradient styles.

Navbar Positions Options

Sets the navbar position: sticky, static, or hidden.

Navbar Type Options

Sets the navbar style: default, dark, transparent, or glass.

Font Options

Sets the fonts for headings and body text.

Font Size Options

Sets the font size: sm, md, or lg.

Rounded Options

Sets the border radius size: xs, sm, md, lg, or xl.

Container Options

Defines the container style: fluid (full-width) or boxed (fixed width).

Loader Options

Sets the page loader visibility: hidden or visible.