Bits

Buttons

Circle Buttons

Use Font Awesome Icons (included with this theme package) along with the circle buttons as shown in the examples below!

.btn-circle
.btn-circle .btn-sm
.btn-circle .btn-lg
Brand Buttons

Google and Facebook buttons are available featuring each company's respective brand color. They are used on the user login and registration pages.

You can create more custom buttons by adding a new color variable in the _variables.scss file and then using the Bootstrap button variant mixin to create a new style, as demonstrated in the _buttons.scss file.

.btn-google .btn-facebook
Split Buttons with Icon

Works with any button colors, just use the .btn-icon-split class and the markup in the examples below. The examples below also use the .text-white-50 helper class on the icons for additional styling, but it is not required.

Split Button Primary
Split Button Success
Split Button Info
Split Button Warning
Split Button Danger
Split Button Secondary
Split Button Light

Also works with small and large button classes!

Split Button Small
Split Button Large

Bits

Charts

Chart.js is a third party plugin that is used to generate the charts in this theme. The charts below have been customized - for further customization options, please visit the official Chart.js documentation.

Dashboard

Generate Report
Earnings Overview
Revenue Sources
Direct Social Referral
Area Chart

Styling for the area chart can be found in the /js/demo/chart-area-demo.js file.
Bar Chart

Styling for the bar chart can be found in the /js/demo/chart-bar-demo.js file.
Donut Chart

Styling for the donut chart can be found in the /js/demo/chart-pie-demo.js file.
Earnings (Monthly)
$40,000
Earnings (Annual)
$215,000
Tasks
50%
Pending Requests
18
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 created by using 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 Card Example
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!
Projects

Server Migration 20%

Sales Tracking 40%

Customer Database 60%

Payout Details 80%

Account Setup Complete!

Primary
#4e73df
Success
#1cc88a
Info
#36b9cc
Warning
#f6c23e
Danger
#e74a3b
Secondary
#858796
Light
#f8f9fc
Dark
#5a5c69
Illustrations
...

Add some quality, svg illustrations to your project courtesy of unDraw, a constantly updated collection of beautiful svg images that you can use completely free and without attribution!

Browse Illustrations on unDraw →
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.

Tables

DataTables is a third party plugin that is used to generate the demo table below. For more information about DataTables, please visit the official DataTables documentation.

DataTables Example
Name Position Office Age Start date Salary
Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060

Color Utilities

Bootstrap's default utility classes can be found on the official Bootstrap Documentation page. The custom utilities below were created to extend this theme past the default utility classes built into Bootstrap's framework.

Custom Text Color Utilities

.text-gray-100

.text-gray-200

.text-gray-300

.text-gray-400

.text-gray-500

.text-gray-600

.text-gray-700

.text-gray-800

.text-gray-900

Custom Font Size Utilities

.text-xs

.text-lg

Custom Background Gradient Utilities
.bg-gradient-primary
.bg-gradient-secondary
.bg-gradient-success
.bg-gradient-info
.bg-gradient-warning
.bg-gradient-danger
.bg-gradient-light
.bg-gradient-dark
Custom Grayscale Background Utilities
.bg-gray-100
.bg-gray-200
.bg-gray-300
.bg-gray-400
.bg-gray-500
.bg-gray-600
.bg-gray-700
.bg-gray-800
.bg-gray-900

Border Utilities

Bootstrap's default utility classes can be found on the official Bootstrap Documentation page. The custom utilities below were created to extend this theme past the default utility classes built into Bootstrap's framework.

.border-left-primary
.border-left-secondary
.border-left-success
.border-left-info
.border-left-warning
.border-left-danger
.border-left-dark
.border-bottom-primary
.border-bottom-secondary
.border-bottom-success
.border-bottom-info
.border-bottom-warning
.border-bottom-danger
.border-bottom-dark

Animation Utilities

Bootstrap's default utility classes can be found on the official Bootstrap Documentation page. The custom utilities below were created to extend this theme past the default utility classes built into Bootstrap's framework.

Grow In Animation Utilty
.animated--grow-in
Navbar Dropdown Example:

Note: This utility animates the CSS transform property, meaning it will override any existing transforms on an element being animated! In this theme, the grow in animation is only being used on dropdowns within the navbar.

Fade In Animation Utilty
.animated--fade-in
Navbar Dropdown Example:
Dropdown Button Example:

Note: This utility animates the CSS opacity property, meaning it will override any existing opacity on an element being animated!

Other Utilities

Bootstrap's default utility classes can be found on the official Bootstrap Documentation page. The custom utilities below were created to extend this theme past the default utility classes built into Bootstrap's framework.

Overflow Hidden Utilty
Use .o-hidden to set the overflow property of any element to hidden.
Progress Small Utility
Normal Progress Bar
Small Progress Bar
Use the .progress-sm class along with .progress
Dropdown - No Arrow
Add the .no-arrow class alongside the .dropdown
Rotation Utilities
.rotate-15

.rotate-n-15