• 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-lgor 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-smor 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 disabledboolean attribute to any <button> element. Read bootstrap documentaion for more details.

    Disable Outline Buttons

    Make buttons look inactive by adding the disabledboolean 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">