Bootstrap Table Examples
Rumman Ansari
Software Engineer
2019-07-19
5608
Share
☰ Table of Contents
Only Important Code
Firstname
Lastname
Email
Default
Defaultson
def@somemail.com
Primary
Lara
lara@example.com
Success
Sara
sara@example.com
Danger
Jara
jara@example.com
Info
Dara
dara@example.com
Warning
Kara
kara@example.com
Full Code For The Above Example
Bootstrap Example
Contextual Classes
Contextual classes can be used to color the table, table rows or table cells. The classes that can be used are: .table-primary, .table-success, .table-info, .table-warning, .table-danger, .table-active, .table-secondary, .table-light and .table-dark:
Firstname
Lastname
Email
Default
Defaultson
def@somemail.com
Primary
Lara
lara@example.com
Success
Sara
sara@example.com
Danger
Jara
jara@example.com
Info
Dara
dara@example.com
Warning
Kara
kara@example.com
Active
Mara
mara@example.com
Secondary
Fara
fara@example.com
Light
Para
para@example.com
Dark
Nuri
nuri@example.com
See Live Preview of the above code
Only Important Code
Firstname
Lastname
Email
Mom
Doe
mom@example.com
Dad
Moe
dad@example.com
Bro
Dooley
bro@example.com
Full Code For The Above Example
Bootstrap Example
Borderless Table
The .table-borderless class removes borders from the table:
Firstname
Lastname
Email
Mom
Doe
mom@example.com
Dad
Moe
dad@example.com
Bro
Dooley
bro@example.com
See Live Preview of the above code
Only Important Code
Firstname
Lastname
Email
Susy
Gala
susy@example.com
Kagney
Karter
kagney@example.com
Audreytd>
Bitoni
audreytd@example.com
Full Code For The Above Example
Bootstrap Example
Black/Dark Table
The .table-dark class adds a black background to the table:
Firstname
Lastname
Email
Susy
Gala
susy@example.com
Kagney
Karter
kagney@example.com
Audreytd>
Bitoni
audreytd@example.com
See Live Preview of the above code
Only Important Code
Firstname
Lastname
Email
Sharuk
Mondak
sharuk@example.com
Sabit
Hossain
sabit@example.com
Sohel
kobir
sohel@example.com
Full Code For The Above Example
Bootstrap Example
Small Table
The .table-sm class makes the table smaller by cutting cell padding in half:
Firstname
Lastname
Email
Sharuk
Mondak
sharuk@example.com
Sabit
Hossain
sabit@example.com
Sohel
kobir
sohel@example.com
See Live Preview of the above code
Only Important Code
Firstname
Lastname
Email
Hello
Sheikh
hello@example.com
Firstname
Lastname
Email
Hello
Khan
hello@example.com
Full Code For The Above Example
Bootstrap Example
Table Head Colors
The .thead-dark class adds a black background to table headers, and the .thead-light class adds a grey background to table headers:
Firstname
Lastname
Email
Hello
Sheikh
hello@example.com
Hi
Khan
hi@example.com
July
Dooley
july@example.com
Firstname
Lastname
Email
Hello
Khan
hello@example.com
Hi
Bibi
hi@example.com
July
Marli
july@example.com
See Live Preview of the above code