• ENG
  • 2

    Cart

  • 4

    Notification View all

    • 30-04-2024Today
      Alice Goodwin

      Fashion should be fun. It shouldn't be labelled intellectual.

    • 28-06-20241 hour ago
      Herry Venter

      I am convinced that there can be luxury in simplicity.

    • 04-08-2024Today
      Loain Deo

      I feel that things happen for open new opportunities.

    • 12-11-2024Yesterday
      Fenter Jessy

      Sometimes the simplest things are the most profound.

  • Bookmark

  • 15

  • user
    Ava Davis

    Admin

Bootstrap Basic Tables

  2. Bootstrap Tables
  3. Bootstrap Basic

Basic Table With Border Bottom Color

use a classtable-*.border-bottom-*class for Border bottom color

IdFirst NameLast NameUsernameDesignationCompanyLanguageCountry
1profileRam JacobWolfeRamJacob@twitterDeveloperApple Inc.PhpIND
2profileJohn DeoGummerJohnDeo@twitter DesignerHewlett packard HtmlUS
3profileElana JohnCazale ElanaJohn@twitterDesignerMicrosoftPugUK
4Meryl StreepRobertsMerylStreep@twitterDeveloperTata Ltd. ReactIDN
5Emma StoneStoneEmmaStone@twitter DeveloperWipro Ltd. VueIRN
6Eliana JonsJonsElianaJons@twitter DeveloperInfo Ltd. VueIRN
7Ram JacobOttandyElianaJons@twitter DeveloperInfo Ltd. VueIRN

Inverse Table

use a class.table-inverseinside table element.

IdFirst NameLast NameOfficePositionSalaryJoin Date Age
1StephanLaitenTokyoAccountant$2100.00 21/01/2022 20
2Fay Van Damme London CEO$1420.00 14/02/2022 22
3Brevin OleveriaNew York Software Engineer $1340.00 04/06/2022 18
4ReginaOttandy France Pre-sale Support $3400.00 10/08/2022 25
5VaniShah Los Angeles Senior Developer $3500.00 23/07/2022 28

Hoverable Rows With Horizontal Border

Hoverable row use a classtable-hover-*.table-border-horizontal-*.border-solid-*class.

IdStatusSignal Name SecurityStageScheduleTeam Lead
1
No Signal		Astrid: NE Shared managedMediumTriaged0.33 Chase Nguyen
2
Offline		Cosmo: prod shared ares HugeTriaged0.39Brie Furman
3
Online		Phoenix: prod shared lyra-lists MinorNo Triaged3.12 Jeremy Lake
4
No Signal		Astrid: NE Shared managedNegligibleTriaged13.18Angelica Howards
5OnlineAstrid: NE Shared managedMediumNo Triaged5.33 Diane Okuma

Inverse Table with Primary background

use a class.bg-info, .bg-success, .bg-warning and .bg-danger classes.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

IdFirst NameLast NameCompanyCredit Volume UsernameRole Country
1Ram Jacob WolfeApple Inc. $3500.00 RamJacob@twitter DeveloperIND
2John Deo Gummer Hewlett packard $2400.00JohnDeo@twitter DesignerUS
3Elana John WolfeMicrosoft $2560.00 ElanaJohn@twitter DesignerUK
4Meryl Streep RobertsTata Ltd. $1870.00MerylStreep@twitter DeveloperIND
5Emma Stone StoneWipro Ltd. $4580.00 EmmaStone@twitter DeveloperIRN
6Eliana Jons JonsInfo Ltd. $4580.00 ElianaJons@twitter DeveloperIRN

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
IdEmployee Name EmailExperienceSexContact No. Age
1Elana Robbert ElanaRob@gmail.com 1 Year Male +91 9789887777 28
2Stiphen Deo Stiphen@yahoo.com 6 Month Female+91 9874563210 22
3Genelia Ottre Genelia@gmail.com 2 Days Male +91 8794562135 24

Table head options

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

IdFirst NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter

Striped Row with Inverse Table

use a class.table-stripedto add zebra-striping to any table row within the This styling

IdDessertCaloriesFatPrice
1KitKat5182620
2Donut4522580
3Eclair2621610

Breckpoint 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 is about and decide if they want to read it.

IdNameOrder Id PriceQuantityTotal
1Iphone X Grey C12345$12550 1$1255
2Titan Watch A14725 $1202$250
3Apple Airpods B54213$210 1$210

Responsive Tables With Light Background

A.table-responsive-*.table-light-*inside table element.

IdTaskEmailPhoneAssignDatePrice StatusProgress
1Web Development Pixel@efo.com +91 7874226671 Mark Jecno 12/07/2022 $2315.00 Pending75%
2Graphic Design Strap@google.com +91 8347855785 Elana John 23/08/2022 $4125.00 Pending 45%
3WordPressPixelstrap@gmail.com +91 635609347 John Deo15/04/2022 $6123.00 Done100%

Sizing Tables

Example of Extra large table Add.table-xl-*.table-lg-*.table-de-*.table-sm -*to create a table.

IdEmployee NameDateStatusHoursPerformance
1Mark Jecno 22/08/2022 On leave 029/30
2Elana Robbert 21/08/2022 Present1030/30
3John Deo 18/08/2022On leave 828/30

Custom Table Color With Hover And Stripped

Use classtable-hover, table-striped table-*table-info,table-success,table-success,table-info,table-danger,table-primary,table-secondary,table-light,table-activeinside table element.

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

Dashed Border

Dashed border use class.table-dashed-*.table-dotted-*.table-Double-*for Dotted border & Double border.

Id ClassnameTypeHoursTrainerSpots
1Crit CardioGym9:00 AM - 11:00 AM Aaron Chapman 10
2Zumba DanceDance8:00 AM - 9:00 AM Donna Wilson 12
3Like a butterfly Boxing9:00 AM - 10:00 AM Randy Porter 13
4Pilates Reformer Gym7:00 AM - 8:30 AM Aaron Chapman 15
5Mind & Body Yoga8:00 AM - 9:00 AM Adam Stewart 20