Bootstrap Basic Tables

Bootstrap Basic Tables

TodayTomorrowYesterday
Basic Table with Border Bottom Color

Use table class to any table, and border-bottom-* class for Border bottom color .

Id First Name Last Name Username Designation Company Language Country
1 profileRam Jacob Wolfe RamJacob@twitter Developer Apple Inc. Php IND
2 profileJohn Deo Gummer JohnDeo@twitter Designer Hewlett packard Html US
3 profileElana John Cazale ElanaJohn@twitter Designer Microsoft Pug UK
4 Meryl Streep Roberts MerylStreep@twitter Developer Tata Ltd. React IDN
5 Emma Stone Stone EmmaStone@twitter Developer Wipro Ltd. Vue IRN
6 Eliana Jons Jons ElianaJons@twitter Developer Info Ltd. Vue IRN
Inverse Table

Use table-inverse class inside table element.

Id First Name Last Name Office Position Salary Join Date Age
1 Stephan Laiten Tokyo Accountant $2100.00 21/01/2025 20
2 Fay Van Damme London CEO $1420.00 14/02/2021 22
3 Brevin Oleveria New York Software Engineer $1340.00 04/06/2025 18
4 Regina Ottandy France Pre-sale Support $3400.00 10/08/2025 25
5 Vani Shah Los Angeles Senior Developer $3500.00 23/07/2025 28
Hoverable Rows with Horizontal Border

Hoverable row use a class table-hover and for horizontal border use a class table-border-horizontal , solid border use a class border-solid, table classes.

Id Status Signal Name Security Stage Schedule Team Lead
1 No Signal Astrid: NE Shared managed Medium Triaged 0.33 Chase Nguyen
2 Offline Cosmo: prod shared ares Huge Triaged 0.39 Brie Furman
3 Online Phoenix: prod shared lyra-lists Minor No Triaged 3.12 Jeremy Lake
4 No Signal Astrid: NE Shared managed Negligible Triaged 13.18 Angelica Howards
5 Online Astrid: NE Shared managed Medium No Triaged 5.33 Diane Okuma
Inverse Table with Primary Background

Use bg-info, bg-success, bg-warning and bg-danger classes with light text on dark backgrounds inside table element.
To set the light background color use bg-[color] class where [color] is the value of your selected color from stack color palette. So for teal color background class will be bg-teal.

Id First Name Last Name Company Credit Volume Username Role Country
1 Ram Jacob Wolfe Apple Inc. $3500.00 RamJacob@twitter Developer IND
2 John Deo Gummer Hewlett packard $2400.00 JohnDeo@twitter Designer US
3 Elana John Wolfe Microsoft $2560.00 ElanaJohn@twitter Designer UK
4 Meryl Streep Roberts Tata Ltd. $1870.00 MerylStreep@twitter Developer IND
5 Emma Stone Stone Wipro Ltd. $4580.00 EmmaStone@twitter Developer IRN
6 Eliana Jons Jons Info Ltd. $4580.00 ElianaJons@twitter Developer IRN
Caption

A <caption> functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.

List of users
Id Employee Name Email Experience Sex Contact No. Age
1 Elana Robbert ElanaRob@gmail.com 1 Year Male +91 9789887777 28
2 Stiphen Deo Stiphen@yahoo.com 6 Month Female +91 9874563210 22
3 Genelia Ottre Genelia@gmail.com 2 Days Male +91 8794562135 24
Table Head Options

Similar to tables , use the modifier classes table-[color] to make thead appear in any color.

Id First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Striped Row with Inverse Table

Use table-striped to add zebra-striping to any table row within the . This styling doesn't work in IE8 and below as :nth-child CSS selector isn't supported.

Id Dessert Calories Fat Price
1 KitKat 518 26 20
2 Donut 452 25 80
3 Eclair 262 16 10
Breakpoint Specific

Use table-responsive"❴-sm|-md|-lg|-xl|-xxl❵" functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.

Id Name Order Id Price Quantity Total
1 Iphone X Grey C12345 $12550 1 $12550
2 Titan Watch A14725 $120 2 $250
3 Apple Airpods B54213 $210 1 $210
Responsive Tables with Light Background

A table-responsive , light-card inside table element.

Id Task Email Phone Assign Date Price Status Progress
1 Web Development Pixel@efo.com +91 7874226671 Mark Jecno 12/07/2025 $2315.00 Pending 75%
2 Graphic Design Strap@google.com +91 8347855785 Elana John 23/08/2025 $4125.00 Pending 45%
3 WordPress Pixelstrap@gmail.com +91 635609347 John Deo 15/04/2025 $6123.00 Done 100%
Sizing Tables

Example of extra large table, Add table-xl class to the table , Large table Add table-lg , Default table Add table-de , Small table Add table-sm , Extra Small table Add table-xs to create a table.

Id Employee Name Date Status Hours Performance
1 Mark Jecno 22/08/2025 On leave 0 29/30
2 Elana Robbert 21/08/2025 Present 10 30/30
3 John Deo 18/08/2025 On leave 8 28/30
Custom Table Color with Hover and Stripped

Use class table-hover, table-striped table-*table-info , table-success , table-success , table-info , table-danger , table-primary , table-secondary , table-light , table-active inside table element.

Id Film Title Released Studio Budget Domestic Gross
1 Frozen 2013 Disney $150,000,000 $400,953,009
2 Minions 2015 Universal $74,000,000 $336,045,770
3 Zootopia 2016 Disney $150,000,000 $341,268,248
4 Finding Dory 2016 Disney Pixar $175,000,000 $486,295,561
5 Toy Story 3 2010 Disney Pixar $200,000,000 $415,004,880
Dashed Border

Use table-dashed class for dash border for dotted border use class table-dotted for double border use class table-double.

Id Classname Type Hours Trainer Spots
1 Crit Cardio Gym 9:00 AM - 11:00 AM Aaron Chapman 10
2 Zumba Dance Dance 8:00 AM - 9:00 AM Donna Wilson 12
3 Like a butterfly Boxing 9:00 AM - 10:00 AM Randy Porter 13
4 Pilates Reformer Gym 7:00 AM - 8:30 AM Aaron Chapman 15
5 Mind & Body Yoga 8:00 AM - 9:00 AM Adam Stewart 20