Default Buttons
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. Read bootstrap documentaion for more details.
Default Outline Buttons
For outline button add classes .btn-outline-*. Read bootstrap documentaion for more details.
Default Icon Buttons
For Icon Buttons add <i class="mdi mdi-*"></i> inside <button class="btn"> . Get classes for material icon here.
Outline Icon Buttons
For Icon Buttons add <i class="mdi mdi-*"></i> inside <button class="btn btn-outline-*"> . Get classes for material icon here.
Large Buttons
Add .btn-lg or for additional sizes. Read bootstrap documentaion for more details.
Large Outline Buttons
Add .btn-lg btn-outline-* or for additional sizes. Read bootstrap documentaion for more details.
Small Buttons
Add .btn-sm or for additional sizes. Read bootstrap documentaion for more details.
Small Outline Buttons
Add .btn-sm btn-outline-* or for additional sizes. Read bootstrap documentaion for more details.
Disable Buttons
Make buttons look inactive by adding the disabled boolean attribute to any <button> element. Read bootstrap documentaion for more details.
Disable Outline Buttons
Make buttons look inactive by adding the disabled boolean attribute to any <button>
element. Read bootstrap documentaion for more details.
Active Buttons
Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. Read bootstrap documentaion for more details.
Active Outline Buttons
For Active Outline Buttons add class .active to <div class="btn btn-outline-*">
Block Buttons
Create block level buttons—those that span the full width of a parent—by adding .btn-block . Read bootstrap documentaion for more details.
Block Outline Buttons
Create block level outline buttons—those that span the full width of a parent—by adding .btn-block .btn-outline-*. Read Bootstrap documentaion for more details.
Square Buttons
For Square Buttons add class .btn-square to <button class="btn btn-*">
Square Outline Buttons
For Square Buttons add class .btn-square to <button class="btn btn-outline-primary">
Square Icon Buttons
For Square Icon Buttons add <i class="mdi mdi-*"></i> inside <button class="btn btn-square btn-*"> . Get classes for material icon here.
Outline Square Icon Buttons
For Outline Square Icon Buttons add <i class="mdi mdi-*"></i> inside <button class="btn btn-square btn-outline-*"> . Get classes for material icon here.
Large Square Buttons
For Large Square Buttons add class .btn-lg to <button class="btn btn-square btn-*">
Large Outline Square Buttons
For Large Outline Square Buttons add class .btn-lg to <button class="btn btn-square btn-outline-*">
Small Buttons
For Small Square Buttons add class .btn-sm to <button class="btn btn-square btn-*">
Small Outline Buttons
For Small Outline Square Buttons add class .btn-sm to <button class="btn btn-square btn-outline-*">
Disable Square Buttons
For Disable Square Buttons add class .disabled to <button class="btn btn-square btn-*">
Disable Square Outline Buttons
For Disable Outline Square Buttons add class .disabled to <button class="btn btn-square btn-outline-*">
Active Buttons
For Active Square Buttons add class .active to <button class="btn btn-square btn-*">
Active Outline Buttons
For Active Outline Square Buttons add class .active to <button class="btn btn-square btn-outline-*">
Square Block Buttons
For Square Block Buttons add class .btn-block to <button class="btn btn-square btn-*">
Block Square Outline Buttons
For Block Square Outline Buttons add class .btn-block to <button class="btn btn-square btn-outline-*">
Pill Buttons
For Pill Buttons add class .btn-pill to <button class="btn btn-*">
Pill Outline Buttons
For Pill Buttons add class .btn-pill to <button class="btn btn-outline-primary">
Pill Icon Buttons
For Pill Square Icon Buttons add <i class="mdi mdi-*"></i> inside <button class="btn btn-pill"> . Get classes for material icon here.
Pill Outline Icon Buttons
For Pill Square Icon Buttons add <i class="mdi mdi-*"></i> inside <button class="btn btn-pill btn-outline-*"> . Get classes for material icon here.
Large Pill Buttons
For Large Pill Buttons add class .btn-lg to <button class="btn btn-pill btn-*">
Large Pill Outline Buttons
For Large Pill Outline Square Buttons add class .btn-lg to <button class="btn btn-pill btn-outline-*">
Small Pill Buttons
For Small Pill Buttons add class .btn-sm to <button class="btn btn-pill btn-*">
Small Pill Outline Buttons
For Small Pill Outline Buttons add class .btn-sm to <button class="btn btn-pill btn-outline-*">
Disable Buttons
For Disable Pill Buttons add class .disabled to <button class="btn btn-pill btn-*">
Disable Outline Buttons
For Disable Outline Pill Buttons add class .disabled to <button class="btn btn-pill btn-outline-*">
Active Buttons
For Active Pill Buttons add class .active to <button class="btn btn-pill btn-*">
Active Outline Buttons
For Active Outline Pill Buttons add class .active to <button class="btn btn-pill btn-outline-*">
Block Pill Buttons
For Block Pill Buttons add class .btn-block to <button class="btn btn-pill btn-*">
Block Pill Outline Buttons
For Block Pill Outline Buttons add class .btn-block to <button class="btn btn-pillbtn-outline-primary">