Bootstrap Table Examples: Styling and Usage Guide
☰Fullscreen
Table of Content:
Only Important Code
Firstname Lastname 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
See Live Preview of the above codeBootstrap 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 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
Only Important Code
Firstname Lastname Mom Doe mom@example.com Dad Moe dad@example.com Bro Dooley bro@example.com
Full Code For The Above Example
See Live Preview of the above codeBootstrap Example Borderless Table
The .table-borderless class removes borders from the table:
Firstname Lastname Mom Doe mom@example.com Dad Moe dad@example.com Bro Dooley bro@example.com
Only Important Code
Firstname Lastname Susy Gala susy@example.com Kagney Karter kagney@example.com Audreytd> Bitoni audreytd@example.com
Full Code For The Above Example
See Live Preview of the above codeBootstrap Example Black/Dark Table
The .table-dark class adds a black background to the table:
Firstname Lastname Susy Gala susy@example.com Kagney Karter kagney@example.com Audreytd> Bitoni audreytd@example.com
Only Important Code
Firstname Lastname Sharuk Mondak sharuk@example.com Sabit Hossain sabit@example.com Sohel kobir sohel@example.com
Full Code For The Above Example
See Live Preview of the above codeBootstrap Example Small Table
The .table-sm class makes the table smaller by cutting cell padding in half:
Firstname Lastname Sharuk Mondak sharuk@example.com Sabit Hossain sabit@example.com Sohel kobir sohel@example.com
Only Important Code
Firstname Lastname Hello Sheikh hello@example.com
Firstname Lastname Hello Khan hello@example.com
Full Code For The Above Example
See Live Preview of the above codeBootstrap 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 Hello Sheikh hello@example.com Hi Khan hi@example.com July Dooley july@example.com
Firstname Lastname Hello Khan hello@example.com Hi Bibi hi@example.com July Marli july@example.com