Development Approach
SB Admin 2 makes extensive use of Bootstrap 4 utility classes in order to reduce CSS bloat and poor page performance. Custom CSS classes are used to create custom components and custom utility classes.
Before working with this theme, you should become familiar with the Bootstrap framework, especially the utility classes. Custom utility classes and components within this theme are explained in the documentation.
View Documentation
Default Card Example
This card uses Bootstrap's default styling with no utility classes added. Global styles are the only things modifying the look and feel of this default card example.
Basic Card Example
The styling for this basic card example is determined by default Bootstrap utility classes. By using utility classes, the style of the card component can be easily modified with no need for any custom CSS!
Dropdown menus can be placed in the card header in order to extend the functionality of a basic card. In this dropdown card example, the Font Awesome vertical ellipsis icon in the card header can be clicked on in order to toggle a dropdown menu.
Collapsable Card Example
This is a collapsable card example using Bootstrap's built in collapse functionality. Click on the card header to see the card body collapse and expand!
Dropdown menus can be placed in the card header in order to extend the functionality of a basic card. In this dropdown card example, the Font Awesome vertical ellipsis icon in the card header can be clicked on in order to toggle a dropdown menu.
Grayscale
Gray 100
Gray 200
Gray 300
Gray 400
Gray 500
Gray 600
Gray 700
Gray 800
Gray 900
Primary
Success
Info
Warning
Danger
Secondary