Octoink | Bootstrap 4 Admin Dashboard Template

Basic Buttons

                                        
    <!--Default button-->
    <button class="btn btn-primary">Primary</button>

    <!--Icon button-->
    <button class="btn btn-primary btn-icon">
        <i class="fas fa-feather-alt">Primary</i>
        <span>Primary</span>
    </button>

    <!--Only icon button-->
    <button class="btn btn-primary btn-only-icon">
        <i class="fas fa-feather-alt">Primary</i>
    </button>

Invert Buttons

                                        
    <!--Default button-->
    <button class="btn btn-invert-brand">Brand</button>

    <!--Icon button-->
    <button class="btn btn-invert-brand btn-icon">
        <i class="fas fa-skull">Primary</i>
        <span>Brand</span>
    </button>

    <!--Only icon button-->
    <button class="btn btn-invert-brand btn-only-icon">
        <i class="fas fa-skull">Brand</i>
    </button>

Pill Style Buttons

Just adding .btn-pill you can get pill style button

                                        
    <button class="btn btn-success btn-pill">Pill Success</button>

Buttons Group

                                        
    <!--Default button group-->
    <div class="btn-group" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-primary">Left</button>
        <button type="button" class="btn btn-primary">Center</button>
        <button type="button" class="btn btn-primary">Right</button>
    </div>

    <!--Outline button group-->
    <div class="btn-group" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-outline-brand">Left</button>
        <button type="button" class="btn btn-outline-brand">Center</button>
        <button type="button" class="btn btn-outline-brand">Right</button>
    </div>

    <!--Invert button group-->
    <div class="btn-group" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-invert-info">Left</button>
        <button type="button" class="btn btn-invert-info">Center</button>
        <button type="button" class="btn btn-invert-info">Right</button>
    </div>

Button Icon Group

                                        
    <!--Default button icon group-->
    <div class="btn-group" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-primary btn-only-icon"><i class="fas fa-feather-alt"></i></button>
        <button type="button" class="btn btn-primary btn-only-icon"><i class="fas fa-microphone"></i></button>
        <button type="button" class="btn btn-primary btn-only-icon"><i class="fas fa-info-circle"></i></button>
    </div>

    <!--Outline button icon group-->
    <div class="btn-group" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-outline-brand btn-only-icon"><i class="fas fa-feather-alt"></i></button>
        <button type="button" class="btn btn-outline-brand btn-only-icon"><i class="fas fa-microphone"></i></button>
        <button type="button" class="btn btn-outline-brand btn-only-icon"><i class="fas fa-info-circle"></i></button>
    </div>

    <!--Invert button icon group-->
    <div class="btn-group" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-invert-info btn-only-icon"><i class="fas fa-feather-alt"></i></button>
        <button type="button" class="btn btn-invert-info btn-only-icon"><i class="fas fa-microphone"></i></button>
        <button type="button" class="btn btn-invert-info btn-only-icon"><i class="fas fa-info-circle"></i></button>
    </div>

Button Group Sizing

Just adding .btn-group-sm, .btn-group-lg you can get small and large button

                                        
    <!--Default button icon group-->
    <div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-primary btn-only-icon"><i class="fas fa-feather-alt"></i></button>
        <button type="button" class="btn btn-primary btn-only-icon"><i class="fas fa-microphone"></i></button>
        <button type="button" class="btn btn-primary btn-only-icon"><i class="fas fa-info-circle"></i></button>
    </div>

    <!--Invert button icon group-->
    <div class="btn-group btn-group-lg" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-invert-info btn-only-icon"><i class="fas fa-feather-alt"></i></button>
        <button type="button" class="btn btn-invert-info btn-only-icon"><i class="fas fa-microphone"></i></button>
        <button type="button" class="btn btn-invert-info btn-only-icon"><i class="fas fa-info-circle"></i></button>
    </div>

                                        
    <!--Default button group-->
    <div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-primary">Left</button>
        <button type="button" class="btn btn-primary">Center</button>
        <button type="button" class="btn btn-primary">Right</button>
    </div>

    <!--Invert button group-->
    <div class="btn-group btn-group-lg" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-invert-info">Left</button>
        <button type="button" class="btn btn-invert-info">Center</button>
        <button type="button" class="btn btn-invert-info">Right</button>
    </div>

Outline Buttons

                                        
    <!--Default button-->
    <button class="btn btn-outline-brand">Brand</button>

    <!--Icon button-->
    <button class="btn btn-outline-brand btn-icon">
        <i class="fas fa-award">Primary</i>
        <span>Brand</span>
    </button>

    <!--Only icon button-->
    <button class="btn btn-outline-brand btn-only-icon">
        <i class="fas fa-award">Brand</i>
    </button>

Air Style Buttons

Just adding .btn-air you can get air style button

                                        
    <button class="btn btn-brand btn-air">Air Brand</button>

Air + Pill Style Buttons

                                        
    <button class="btn btn-success btn-air btn-pill">Air Pill</button>

Buttons Group Styles

                                        
    <!--Air button group-->
    <div class="btn-group btn-group_air" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-primary">Left</button>
        <button type="button" class="btn btn-primary">Center</button>
        <button type="button" class="btn btn-primary">Right</button>
    </div>

    <!--Pill button group-->
    <div class="btn-group btn-group_pill" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-outline-brand">Left</button>
        <button type="button" class="btn btn-outline-brand">Center</button>
        <button type="button" class="btn btn-outline-brand">Right</button>
    </div>

    <!--Air + pill button group-->
    <div class="btn-group btn-group_air btn-group_pill" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-invert-info">Left</button>
        <button type="button" class="btn btn-invert-info">Center</button>
        <button type="button" class="btn btn-invert-info">Right</button>
    </div>

Buttons Sizing

Just adding .btn-sm you can get small button

                                        
    <!--Default button-->
    <button class="btn btn-brand btn-sm">Brand</button>

    <!--Icon button-->
    <button class="btn btn-outline-brand btn-sm btn-icon">
        <i class="fas fa-award"></i>
        <span>Brand</span>
    </button>

    <!--Only icon button-->
    <button class="btn btn-invert-brand btn-sm btn-only-icon">
        <i class="fas fa-award">Brand</i>
    </button>

Just adding .btn-lg you can get small button

                                        
    <!--Default button-->
    <button class="btn btn-brand btn-lg">Danger</button>

    <!--Icon button-->
    <button class="btn btn-outline-brand btn-lg btn-icon">
        <i class="fas fa-award"></i>
        <span>Danger</span>
    </button>

    <!--Only icon button-->
    <button class="btn btn-invert-brand btn-lg btn-only-icon">
        <i class="fas fa-award">Brand</i>
    </button>

Button with Icon Group

                                        
    <div class="btn-icon-group">
        <button type="button" class="btn btn-danger">Logout</button>
        <button type="button" class="btn btn-only-icon"><i class="la la-power-off"></i></button>
    </div>

Pill style button

                                        
    <div class="btn-icon-group btn-icon-group_pill">
        <button type="button" class="btn btn-danger">Logout</button>
        <button type="button" class="btn btn-only-icon"><i class="la la-power-off"></i></button>
    </div>

Air style button

                                        
    <div class="btn-icon-group">
        <button type="button" class="btn btn-danger btn-air">Logout</button>
        <button type="button" class="btn btn-only-icon"><i class="la la-power-off"></i></button>
    </div>

    <div class="btn-icon-group btn-icon-group_pill">
        <button type="button" class="btn btn-danger btn-air">Logout</button>
        <button type="button" class="btn btn-only-icon"><i class="la la-power-off"></i></button>
    </div>