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:
| Housing Associations | Admin Board | |
|---|---|---|
Register A Company |
Tenants |
Block Level Buttons |
| Primary | Joe | joe@example.com |
| Success | Doe | john@example.com |
| Danger | Moe | mary@example.com |
| Info | Dooley | july@example.com |
| Warning | Refs | bo@example.com |
| Active | Activeson | act@example.com |
| Secondary | Secondson | sec@example.com |
| Light | Angie | angie@example.com |
| Dark | Bo | bo@example.com |
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 Joe joe@example.com Success Doe john@example.com Danger Moe mary@example.com Info Dooley july@example.com Warning Refs bo@example.com Active Activeson act@example.com Secondary Secondson sec@example.com Light Angie angie@example.com Dark Bo bo@example.com
Auto Layout Columns
In Bootstrap 5, there is an easy way to create equal width columns: just use the .col-size class on a specified number of col elements. Bootstrap will recognize how many columns there are, and each column will get the same width.
Two columns: 50% width on all screens, except for extra small (100% width on screens less than 576px wide)
1 of 2
2 of 2
Four columns: 25% width on all screens, except for extra small (100% width on screens less than 576px wide)
1 of 4
2 of 4
3 of 4
4 of 4