Basic Tables

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
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	Product	Price	Stock Status	Price Performance	Action
01	Wireless Headphones	$150	In Stock	5%	Edit View Delete
02	Smartphone	$999	Out of Stock	3%	Edit View Delete
03	Laptop	$1,200	In Stock	10%	Edit View Delete
04	Smartwatch	$250	In Stock	8%	Edit View Delete

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!

Modern Family House

$375,000

Cozy Studio Apartment

$1,890

Downtown Office Space

$2,200

Luxury Beachfront Villa

$1,250,000

Alex Morgan

Basic Table

Bordered Table

Borderedless Table

Table Striped Column

Emily Johnson

Michael Smith

Alice Brown

David Wilson

Striped Rows

Hoverable rows

Sarah Connor

John Doe

Jane Smith

Chris Evans

Table Dark

Table Primary

Active Table

Table Small

Vertical alignment

Nested Table

Table Anatomy

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

Primary Color