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

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

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

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 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.