Fiva - Bootstrap 4 Admin Dashboard Template

Single Button Dropdowns

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true">
        Dropdown button
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
    </div>
</div>

Single Link Dropdowns

<div class="dropdown show">
    <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true">
        Dropdown link
    </a>

    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
    </div>
</div>

Multiple Color Dropdowns

<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true">
        Primary
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div>

<div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true">
        Secondary
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div>

<div class="btn-group">
    <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true">
        Success
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div>

<div class="btn-group">
    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true">
        Info
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div>

<div class="btn-group">
    <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true">
        Warning
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div>

<div class="btn-group">
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true">
        Danger
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div>

Split Button Dropdowns

<!-- Example split danger button -->
<div class="btn-group">
    <button type="button" class="btn btn-danger">Action</button>
    <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true">
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div>

Sizing Dropdowns

<!-- Large button groups (default and split) -->
<div class="btn-group">
    <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true">
        Large button
    </button>
    <div class="dropdown-menu">
        ...
    </div>
</div>
<div class="btn-group">
    <button class="btn btn-secondary btn-lg" type="button">
        Large split button
    </button>
    <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true">
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
        ...
    </div>
</div>

<!-- Small button groups (default and split) -->
<div class="btn-group">
    <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true">
        Small button
    </button>
    <div class="dropdown-menu">
        ...
    </div>
</div>
<div class="btn-group">
    <button class="btn btn-secondary btn-sm" type="button">
        Small split button
    </button>
    <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true">
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
        ...
    </div>
</div>

Dropup Dropdowns

<!-- Default dropup button -->
<div class="btn-group dropup">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true">
        Dropup
    </button>
    <div class="dropdown-menu">
        <!-- Dropdown menu links -->
    </div>
</div>

<!-- Split dropup button -->
<div class="btn-group dropup">
    <button type="button" class="btn btn-secondary">
        Split dropup
    </button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true">
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
        <!-- Dropdown menu links -->
    </div>
</div>

Dropright Dropdowns

<!-- Default dropup button -->
<div class="btn-group dropright">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true">
    Dropright
    </button>
    <div class="dropdown-menu">
        <!-- Dropdown menu links -->
    </div>
</div>

<!-- Split dropup button -->
<div class="btn-group dropright">
    <button type="button" class="btn btn-success">
        Split Dropright
    </button>
    <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true">
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
        <!-- Dropdown menu links -->
    </div>
</div>

Dropleft Dropdowns

<!-- Default dropup button -->
<div class="btn-group dropleft">
    <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true">
    Dropleft
    </button>
    <div class="dropdown-menu">
        <!-- Dropdown menu links -->
    </div>
</div>

<!-- Split dropup button -->
<div class="btn-group dropleft">
    <button type="button" class="btn btn-danger">
        Split Dropleft
    </button>
    <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true">
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
        <!-- Dropdown menu links -->
    </div>
</div>

Menu Headers Dropdowns

<div class="dropdown show">
    <a class="btn btn-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true">
        Dropdown link
    </a>

    <div class="dropdown-menu">
        <h6 class="dropdown-header">Dropdown header</h6>
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
    </div>
</div>

Menu Forms Dropdowns

<div class="dropdown show">
    <a class="btn btn-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true">
        Dropdown link
    </a>

    <div class="dropdown-menu">
        <form class="px-4 py-3">
            <div class="form-group">
                <label>Email address</label>
                <input type="email" class="form-control" placeholder="[email protected]">
            </div>
            <div class="form-group">
            <label>Password</label>
                <input type="password" class="form-control" placeholder="Password">
            </div>
            <div class="form-check">
                <input type="checkbox" class="form-check-input" id="dropdownCheck">
                <label class="form-check-label" for="dropdownCheck">
                    Remember me
                </label>
            </div>
            <button type="submit" class="btn btn-primary mt-2 d-block w-100">Sign in</button>
        </form>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">New around here? Sign up</a>
        <a class="dropdown-item" href="#">Forgot password?</a>
    </div>
</div>

Active Menu Items Dropdowns

<div class="dropdown show">
    <a class="btn btn-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true">
        Dropdown link
    </a>

    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Regular link</a>
        <a class="dropdown-item active" href="#">Active link</a>
        <a class="dropdown-item" href="#">Another link</a>
    </div>
</div>

Disabled Menu Items Dropdowns

<div class="dropdown show">
    <a class="btn btn-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true">
        Dropdown link
    </a>

    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Regular link</a>
        <a class="dropdown-item disabled" href="#">Disabled link</a>
        <a class="dropdown-item" href="#">Another link</a>
    </div>
</div>