Loading...

###### Don't Miss Out! Our new update has been released.

###### Something you love is now on sale!

Buy now !

### Bootstrap Basic Tables

##### 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 | Ram Jacob | Wolfe | RamJacob@twitter | Developer | Apple Inc. | Php | IND
2 | John Deo | Gummer | JohnDeo@twitter | Designer | Hewlett packard | Html | US
3 | Elana 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

##### Bootstrap Table With Variants

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

# | Roll Number | Student Name | Standard | Grade | Percentage
--- | --- | --- | --- | --- | ---
Default | 01 | Watson Freeman | 10th | A + | 89.5%
Primary | 02 | Miley Morgan | 06th | B+ | 65.6%
Secondary | 03 | Charli Olsen | 02th | C+ | 45.2%
Success | 04 | Levi Berger | 11th | A+ | 78.3%
Danger | 05 | Ayaan Rich | 08th | B+ | 67.9%
Warning | 06 | Mae Flores | 12th | A+ | 99.4%
Info | 07 | Angel Terrell | 10th | B+ | 70.3%
Light | 08 | Logan Luna | 11th | A+ | 92.5%
Dark | 09 | Sage Cuevas | 04th | A+ | 97.6%

##### 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/2024 | 20
2 | Fay | Van Damme | London | CEO | $1420.00 | 14/02/2021 | 22
3 | Brevin | Oleveria | New York | Software Engineer | $1340.00 | 04/06/2024 | 18
4 | Regina | Ottandy | France | Pre-sale Support | $3400.00 | 10/08/2024 | 25
5 | Vani | Shah | Los Angeles | Senior Developer | $3500.00 | 23/07/2024 | 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 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

##### Striped Columns

Use `table-striped-columns` to add zebra-striping to any table column.

# | Name | Age | City | Occupation
--- | --- | --- | --- | ---
1 | Kara Mayer | 53 | New York | Software Engineer
2 | Jorge Molina | 22 | Chicago | Teacher
3 | Adele Gibbs | 28 | Miami | Financial Advisor

##### Active Tables

Highlight a table row or cell by adding a `table-active` class.

Product ID | Product Name | Category | Price
--- | --- | --- | ---
P001 | Laptop | Computers | $999
P002 | Headphones | Audio | $600
P003 | Electric Kettle | Home | $40

##### Table Borders

Add `table-bordered` for borders on all sides of the table and cells.

ISBN | Title | Author | Year Published
--- | --- | --- | ---
978-1-891830-75-4 | The Great Gatsby | F. Scott Fitzgerald | 1975
978-0-06-112008-4 | To Kill a Mockingbird | Harper Lee | 1985
978-0-452-28423-4 | 1987 | George Orwell | 1947
978-1-5011-8687-0 | Where the Crawdads Sing | Delia Owens | 2019

##### Table Without Borders

Add `table-borderless` for a table without borders.

Date | Exercise Type | Duration | Calories Burned
--- | --- | --- | ---
21-07-2024 | Running | 30 | 300
29-07-2024 | Cycling | 45 | 400
11-08-2024 | Yoga | 60 | 200
25-11-2024 | Weightlifting | 40 | 250

##### Vertical alignment

Table cells of `<thead>` are always vertical aligned to the bottom. Table cells in `<tbody>` inherit their alignment from `<table>` and are aligned to the top by default. Use the vertical align classes to re-align where needed.

Heading1 | Heading2 | Heading3 | Heading4
--- | --- | --- | ---
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.

##### Nesting

Border styles, active styles, and table variants are not inherited by nested tables.

Date | Student Name | Status | Notes
--- | --- | --- | ---
05-09-2024 | Ryder Grant | Present | On time
Course Name | Instructor | Day | Time
--- | --- | --- | ---
Data Structures | Prof. A. Smith | Monday | 10:00 AM
Database Systems | Prof. D. Johnson | Friday | 09:00 AM
11-10-2024 | Collins Ellison | Absent | Sick leave
25-11-2024 | Ocean Kelly | Present | Late by 10 minutes
18-12-2024 | Jayce Fisher | Absent | Family emergency

##### Anatomy (Table Head)

Similar to tables and dark tables, use the modifier classes `table-light` or `table-dark` to make `<thead>`s appear light or dark gray.

Version | Release Date | New Features | Bug Fixes
--- | --- | --- | ---
1.0.0 | 15-05-2024 | Improved UI | Resolved crash on startup
1.1.0 | 25-06-2024 | Added user profiles | Fixed login issues
2.1.0 | 06-06-2024 | Security features | Corrected auth errors
2.2.0 | 08-07-2024 | Multi-language support | Fixed display bugs
3.1.0 | 12-08-2024 | Added Sellers | Fixed seller details
3.2.0 | 27-09-2024 | Added dashboards | Fixed Timeline issue
4.1.0 | 28-12-2024 | Gallery placeholders | Fixed placeholder delay issue

##### Table Foot

To prevent any styles from leaking to nested tables, we use the child combinator (>) selector in our CSS. Since we need to target all the tds and ths in the thead, tbody, and tfoot, our selector would look pretty long without it.

Product ID | Product Name | Category | Price ($)
--- | --- | --- | ---
P005 | Headphones | Audio | $120
P006 | Blender | Kitchen | $80
P007 | Smartphone | Electronics | $690
P008 | Electric Kettle | Home | $40
Total Products | 04

##### Table Group Dividers

Add a thicker border, darker between table groups—`<thead>, <tbody>, and <tfoot>—with` `table-group-divider`. Customize the color by changing the border-top-color (which we don’t currently provide a utility class for at this time).

# | First | Last | Handle
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter
4 | Larry | Olson | @instagram
5 | Franklin | @linkedin

##### 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/2024 | $2315.00 | Pending | 75%
2 | Graphic Design | Strap@google.com | +91 8347855785 | Elana John | 23/08/2024 | $4125.00 | Pending | 45%
3 | WordPress | Pixelstrap@gmail.com | +91 635609347 | John Deo | 15/04/2024 | $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/2024 | On leave | 0 | 29/30
2 | Elana Robbert | 21/08/2024 | Present | 10 | 30/30
3 | John Deo | 18/08/2024 | 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