Elite Admin

Buttons

General Buttons

Use a classes btn btn-success to quickly create a General btn.

Button Tags

The .btn classes are designed to be used with the .<button> element.
Link

Button with outline

Use a classes btn btn-outline-success to quickly create a General btn.

Rounded Buttons

Use a classes btn btn-rounded btn-success to quickly create a General btn.

Rounded outlined Buttons

Use a classes btn btn-rounded btn-outline-success to quickly create a General btn.

Button Sizes

Use a classes btn btn-lg btn-success to quickly create a General btn.

Button Sizes with rounded

Use a classes btn btn-lg btn-rounded btn-success to create a btn.

Block buttons

Use a classes btn w-100 btn-success to quickly create a General btn.

Rounded Block buttons

Use a classes btn w-100 btn-success to quickly create a General btn.

Block outline buttons

Use a classes btn w-100 btn-outline-success to quickly create a General btn.

Rounded outline Block buttons

Use a classes btn w-100 btn-outline-success to quickly create a General btn.

Large Block buttons

Use a classes btn w-100 btn-lg btn-success to quickly create a General btn.

Button with icon

Use a classes btn btn-success & i class ="fa fa-heart" to quickly create a General btn.

Group buttons

Wrap a series of buttons with .btn in .btn-group

Button toolbar pagination

Wrap a series of buttons with .btn in .btn-group
<div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-secondary">Left</button>
    <button type="button" class="btn btn-secondary">Middle</button>
    <button type="button" class="btn btn-secondary">Right</button>
</div>
<div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-info"><i class="fa fa-align-left"></i></button>
    <button type="button" class="btn btn-info"><i class="fa fa-align-justify"></i></button>
    <button type="button" class="btn btn-info"><i class="fa fa-align-right"></i></button>
</div>
<div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-success"><i class="fa fa-fast-backward"></i></button>
    <button type="button" class="btn btn-success"><i class="fa fa-play"></i></button>
    <button type="button" class="btn btn-success"><i class="fa fa-fast-forward"></i></button>
</div>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group me-2" role="group" aria-label="First group">
        <button type="button" class="btn btn-secondary disabled">1</button>
        <button type="button" class="btn btn-info">2</button>
        <button type="button" class="btn btn-secondary">3</button>
        <button type="button" class="btn btn-secondary">4</button>
    </div>
    <div class="btn-group me-2" role="group" aria-label="Second group">
        <button type="button" class="btn btn-secondary">5</button>
        <button type="button" class="btn btn-secondary">6</button>
        <button type="button" class="btn btn-secondary">7</button>
    </div>
    <div class="btn-group" role="group" aria-label="Third group">
        <button type="button" class="btn btn-secondary">8</button>
    </div>
</div>

Button Toolbar with Input Group

Button Toolbar with Jutify Content Input Group

<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group me-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary"><i class="ti-move"></i></button>
    <button type="button" class="btn btn-secondary"><i class="ti-fullscreen"></i></button>
    <button type="button" class="btn btn-secondary"><i class="ti-target"></i></button>
    <button type="button" class="btn btn-secondary"><i class="ti-trash"></i></button>
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon"><i class="ti-email"></i></div>
    </div>
    <input type="text" class="form-control" placeholder="Subscribe Now" aria-label="Input group example" aria-describedby="btnGroupAddon">
  </div>
</div>
<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary"><i class="ti-move"></i></button>
    <button type="button" class="btn btn-secondary"><i class="ti-fullscreen"></i></button>
    <button type="button" class="btn btn-secondary"><i class="ti-target"></i></button>
    <button type="button" class="btn btn-secondary"><i class="ti-trash"></i></button>
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon2"><i class="ti-email"></i></div>
    </div>
    <input type="text" class="form-control" placeholder="Subscribe Now" aria-label="Input group example" aria-describedby="btnGroupAddon2">
  </div>
</div>

Group buttons sizing

Wrap a series of buttons with .btn in .btn-group

Nesting

creat with below code
<div class="btn-group btn-group-lg" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-secondary">Left</button>
    <button type="button" class="btn btn-secondary">Middle</button>
    <button type="button" class="btn btn-secondary">Right</button>
</div>
<div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-info"><i class="fa fa-align-left"></i></button>
    <button type="button" class="btn btn-info"><i class="fa fa-align-justify"></i></button>
    <button type="button" class="btn btn-info"><i class="fa fa-align-right"></i></button>
</div>
<div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-success"><i class="fa fa-fast-backward"></i></button>
    <button type="button" class="btn btn-success"><i class="fa fa-play"></i></button>
    <button type="button" class="btn btn-success"><i class="fa fa-fast-forward"></i></button>
</div>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <div class="btn-group" role="group">
        <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
        </button>
        <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
            <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
            <a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
        </div>
    </div>
</div>

Vertical buttons

creat vertical button with class of .btn-group-vertical

Button with js elements

There are a few easy ways to quickly get started with Bootstrap, each one ...


Button with checkbox



Button with Radiobutton

Direction of the Dropdown

Trigger dropdown menus above elements by adding .dropup to the parent element.

Menu Alignment

Add .dropdown-menu-end to a .dropdown-menu to right align the dropdown menu.

Responsive Alignment

Different Menu Content

Dropdown Options

Toggle States [Button Plugin]

Add data-bs-toggle="button" to toggle a button’s active state. If you’re pre-toggling a button, you must manually add the .active class and aria-pressed="true" to the button.

Button with Checkbox

Button with Radio