• More Theme Elements
• Alerts
• Animations
• Avatars
• Badges
• Button Groups
• Buttons
• Cards
• Carousels
• Collapse / Accordions
• Colours Utils
• Cookie Banners
• Counters
• Call To Action Blocks
• Dividers
• Dropdowns
• Forms
• Forms Input Groups
• Icons
  • Icon Utils/Overview
  • Icons: Bootstrap
  • Icons: Flags
  • Icons: Font Awesome
  • Icons: Ionicons
  • Icons: Linearicons
  • Icons: Line Awesome
• List Groups
• Modals
• Modals Onload
• Navs
• Tabbable Navs
• Overlays
• Progress Bars
• Select Picker
• Shadows
• Social Media Branding
• Spacers
• Spinners
• Tables
• Toasts
• Tooltips & Popovers
• Type Effect
• Typography
• Utilities
• Video Blocks
• Page Titles

Button styles you can use on a , button , input elements.

Styles

Default

Secondary Primary Info Success Warning Danger Dark Light Link
green red blue purple pink orange brown slate olive teal charcoal

Outlined

Secondary Primary Info Success Warning Danger Dark green red blue purple pink orange brown slate olive teal charcoal

Rounded

Secondary Primary Info Success Warning Danger Dark Light Green Red Blue Purple Pink Orange Brown Slate Olive Teal Charcoal

Invert

Inverts the default & hover states, useful if using a background colour the same as the button.

Secondary Primary Info Success Warning Danger Dark Light Green Red Blue Purple Pink Orange Brown Slate Olive Teal Charcoal

Washed

Washed state.

Secondary Primary Info Success Warning Danger Dark Light Green Red Blue Purple Pink Orange Brown Slate Olive Teal Charcoal

Shadow

Colour shadow.

Secondary Primary Info Success Warning Danger Dark Light Green Red Blue Purple Pink Orange Brown Slate Olive Teal Charcoal

Hover shadow

Colour shadow on hover.

Secondary Primary Info Success Warning Danger Dark Light Green Red Blue Purple Pink Orange Brown Slate Olive Teal Charcoal

---

Sizes

Small

Secondary Primary Info Success Warning Danger Dark Link
green red blue purple pink orange brown slate olive teal charcoal

---

Secondary Primary Info Success Warning Danger Dark green red blue purple pink orange brown slate olive teal charcoal

---

Secondary Primary Info Success Warning Danger Dark Light Green Red Blue Purple Pink Orange Brown Slate Olive Teal Charcoal

---

Secondary Primary Info Success Warning Danger Dark Light Green Red Blue Purple Pink Orange Brown Slate Olive Teal Charcoal

Medium (default)

Secondary Primary Info Success Warning Danger Dark Link
green red blue purple pink orange brown slate olive teal charcoal

---

Secondary Primary Info Success Warning Danger Dark green red blue purple pink orange brown slate olive teal charcoal

---

Secondary Primary Info Success Warning Danger Dark Light Green Red Blue Purple Pink Orange Brown Slate Olive Teal Charcoal

---

Secondary Primary Info Success Warning Danger Dark Light Green Red Blue Purple Pink Orange Brown Slate Olive Teal Charcoal

Large

Secondary Primary Info Success Warning Danger Dark Link
green red blue purple pink orange brown slate olive teal charcoal

---

Secondary Primary Info Success Warning Danger Dark

---

Secondary Primary Info Success Warning Danger Dark Light Green Red Blue Purple Pink Orange Brown Slate Olive Teal Charcoal

---

Secondary Primary Info Success Warning Danger Dark Light Green Red Blue Purple Pink Orange Brown Slate Olive Teal Charcoal

Block level (full width)

Using .d-block and .w-* classes.

Secondary Primary Info Success Warning Danger Dark Light Green Red Blue Purple Pink Orange Brown Slate Olive Teal Charcoal

---

Button borders

Control button border widths using the .border-w-(2-5) classes, works mainly with outline button style.

.border-w-2

Secondary Primary Info Success Warning Danger Dark Light Green Red Blue Purple Pink Orange Brown Slate Olive Teal Charcoal

.border-w-3

Secondary Primary Info Success Warning Danger Dark Light Green Red Blue Purple Pink Orange Brown Slate Olive Teal Charcoal

.border-w-4

Secondary Primary Info Success Warning Danger Dark Light Green Red Blue Purple Pink Orange Brown Slate Olive Teal Charcoal

.border-w-5

Secondary Primary Info Success Warning Danger Dark Light Green Red Blue Purple Pink Orange Brown Slate Olive Teal Charcoal

---

Icon buttons

Add the class .btn-icon to fix the width & height of a button so it can be used to display a single icon. Works with all icons defined on elements-icons.htm.

Default

Outlined

Rounded

Sizes

small:

---

Default:

---

Large:

---

Extra Large:

---

States

Active

Secondary link Primary link Info link Success link Warning link Danger link Dark link Light link Green link Red link Blue link Purple link Pink link Orange link Brown link Slate link Olive link Teal link Charcoal link

Outline buttons

Secondary link Primary link Info link Success link Warning link Danger link Dark link Light link Green link Red link Blue link Purple link Pink link Orange link Brown link Slate link Olive link Teal link Charcoal link

Disabled

This can be applied as .disabled class for links or a disabled attribute for buttons.

Secondary btn Primary btn Info btn Success btn Warning btn Danger btn Dark btn Light btn Green btn Red btn Blue btn Purple btn Pink btn Orange btn Brown btn Slate btn Olive btn Teal btn Charcoal btn

Outline buttons

Secondary btn Primary btn Info btn Success btn Warning btn Danger btn Dark btn Light btn Green btn Red btn Blue btn Purple btn Pink btn Orange btn Brown btn Slate btn Olive btn Teal btn Charcoal btn

Toggle State

Add data-bs-toggle="button" to allow the buttons active state to be toggle on click, works on button & can be used on checkboxes and radion form elements.

Single toggle

---

---

---

Button with dropdowns

By wrapping .btn elements with a .dropdown element you can easily add dropdown menus for buttons.

button element

a element

Styles

The standard button styles can be applied to the buttons with dropdowns as well.

Split button dropdowns

Split button dropdowns allow you to have an "action" button and a dropdown button within the same visual button by adding 2 buttons within a button group and adding .dropdown-toggle-split class to the second button.

Sizing

The .btn-lg and .btn-sm classes can be applied to buttons within split buttons and dropdown buttons.

Dropup buttons

Dropup buttons are exactly the same and can uses all the same options expect the menu "drops up" and appears above the button rather than below.

Simple add the class .dropup to the wrapper .btn-group element.