Bootstrap Basic Tables

  2. Bootstrap Tables
  3. Bootstrap Basic Tables

Basic Table With Border Bottom Color

Use a classtable 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 a class table-inverse inside table element.
Id First Name Last Name Office Position Salary Join Date Age
1 Stephan Laiten Tokyo Accountant $2100.00 21/01/2023 20
2 Fay Van Damme London CEO $1420.00 14/02/2023 22
3 Brevin Oleveria New York Software Engineer $1340.00 04/06/2023 18
4 Regina Ottandy France Pre-sale Support $3400.00 10/08/2023 25
5 Vani Shah Los Angeles Senior Developer $3500.00 23/07/2023 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 .tableclass.
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 a class .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 theadappear 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

Breckpoint Specific

Use .table-responsive.custom-scrollbar"❴-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.custom-scrollbar ,.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/2023 $2315.00 Pending 75%
2 Graphic Design Strap@google.com +91 8347855785 Elana John 23/08/2023 $4125.00 Pending 45%
3 WordPress Pixelstrap@gmail.com +91 635609347 John Deo 15/04/2023 $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-xsto create a table.
Id Employee Name Date Status Hours Performance
1 Mark Jecno 22/08/2023 On leave 0 29/30
2 Elana Robbert 21/08/2023 Present 10 30/30
3 John Deo 18/08/2023 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

Dashed border use class .table-dashed , 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