Bootstrap

General Buttons

<div class="button-group">
    <button type="button" class="btn waves-effect waves-light btn-primary">Primary</button>
    <button type="button" class="btn waves-effect waves-light btn-secondary">Secondary</button>
    <button type="button" class="btn waves-effect waves-light btn-success">Success</button>
    <button type="button" class="btn waves-effect waves-light btn-info">Info</button>
    <button type="button" class="btn waves-effect waves-light btn-warning">Warning</button>
    <button type="button" class="btn waves-effect waves-light btn-danger">Danger</button>
    <button type="button" class="btn waves-effect waves-light btn-light">Light</button>
    <button type="button" class="btn waves-effect waves-light btn-dark">Dark</button>
</div>

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

Light Buttons

<div class="button-group">
    <button type="button" class="btn waves-effect waves-light btn-light-primary text-primary">Primary</button>
    <button type="button" class="btn waves-effect waves-light btn-light-secondary text-secondary">Secondary</button>
    <button type="button" class="btn waves-effect waves-light btn-light-success text-success">Success</button>
    <button type="button" class="btn waves-effect waves-light btn-light-info text-info">Info</button>
    <button type="button" class="btn waves-effect waves-light btn-light-warning text-warning">Warning</button>
    <button type="button" class="btn waves-effect waves-light btn-light-danger text-danger">Danger</button>
</div>

Use `btn-light` class for light buttons

Button with outline

<div class="button-group">
    <button type="button" class="btn waves-effect waves-light btn-outline-primary">Primary</button>
    <button type="button" class="btn waves-effect waves-light btn-outline-secondary">Secondary</button>
    <button type="button" class="btn waves-effect waves-light btn-outline-success">Success</button>
    <button type="button" class="btn waves-effect waves-light btn-outline-info">Info</button>
    <button type="button" class="btn waves-effect waves-light btn-outline-warning">Warning</button>
    <button type="button" class="btn waves-effect waves-light btn-outline-danger">Danger</button>
     <button type="button" class="btn waves-effect waves-light btn-outline-light">Light</button>
      <button type="button" class="btn waves-effect waves-light btn-outline-dark">Dark</button>
</div>

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

Button Tags

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

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

Link

Rounded Buttons

<div class="button-group">
    <button type="button" class="btn waves-effect waves-light btn-rounded btn-primary">Primary</button>
    <button type="button" class="btn waves-effect waves-light btn-rounded btn-secondary">Secondary</button>
    <button type="button" class="btn waves-effect waves-light btn-rounded btn-success">Success</button>
    <button type="button" class="btn waves-effect waves-light btn-rounded btn-info">Info</button>
    <button type="button" class="btn waves-effect waves-light btn-rounded btn-warning">Warning</button>
    <button type="button" class="btn waves-effect waves-light btn-rounded btn-danger">Danger</button>
    <button type="button" class="btn waves-effect waves-light btn-rounded btn-light">Light</button>
    <button type="button" class="btn waves-effect waves-light btn-rounded btn-dark">Dark</button>
</div>

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

Rounded light Buttons

<div class="button-group">
    <button type="button" class="btn waves-effect waves-light btn-rounded btn-light-primary text-primary">Primary</button>
    <button type="button" class="btn waves-effect waves-light btn-rounded btn-light-secondary text-secondary">Secondary</button>
    <button type="button" class="btn waves-effect waves-light btn-rounded btn-light-success text-success">Success</button>
    <button type="button" class="btn waves-effect waves-light btn-rounded btn-light-info text-info">Info</button>
    <button type="button" class="btn waves-effect waves-light btn-rounded btn-light-warning text-warning">Warning</button>
    <button type="button" class="btn waves-effect waves-light btn-rounded btn-light-danger text-danger">Danger</button>
</div>

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

Rounded outlined Buttons

<div class="button-group">
    <button type="button" class="btn waves-effect waves-light btn-rounded btn-outline-primary">Primary</button>
    <button type="button" class="btn waves-effect waves-light btn-rounded btn-outline-secondary">Secondary</button>
    <button type="button" class="btn waves-effect waves-light btn-rounded btn-outline-success">Success</button>
    <button type="button" class="btn waves-effect waves-light btn-rounded btn-outline-info">Info</button>
    <button type="button" class="btn waves-effect waves-light btn-rounded btn-outline-warning">Warning</button>
    <button type="button" class="btn waves-effect waves-light btn-rounded btn-outline-danger">Danger</button>
     <button type="button" class="btn waves-effect waves-light btn-rounded btn-outline-light">Light</button>
      <button type="button" class="btn waves-effect waves-light btn-rounded btn-outline-dark">Dark</button>
</div>

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

Button Sizes

<div class="button-group">
    <button type="button" class="btn waves-effect waves-light btn-lg btn-primary">Large .btn-lg </button>
    <button type="button" class="btn waves-effect waves-light btn-secondary">Normal .btn</button>
    <button type="button" class="btn waves-effect waves-light btn-sm btn-success">Small .btn-sm</button>
    <button type="button" class="btn waves-effect waves-light btn-xs btn-info">Tiny .btn-xs</button>
</div>

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

Button Sizes with rounded

<div class="button-group">
    <button type="button" class="btn waves-effect waves-light btn-lg btn-rounded btn-primary">Large .btn-lg </button>
    <button type="button" class="btn waves-effect waves-light btn-rounded btn-secondary">Normal .btn</button>
    <button type="button" class="btn waves-effect waves-light btn-rounded btn-sm btn-success">Small .btn-sm</button>
    <button type="button" class="btn waves-effect waves-light btn-rounded btn-xs btn-info">Tiny .btn-xs</button>
</div>

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

Block buttons

<div class="row justify-content-center">
    <div class="col-md-6 col-lg-4 d-grid gap-2">
        <button type="button" class="btn waves-effect waves-light btn-info">Info</button>
        <button type="button" class="btn waves-effect waves-light btn-success">Success</button>
        <button type="button" class="btn waves-effect waves-light btn-primary">Primary</button>
        <button type="button" class="btn waves-effect waves-light btn-danger">Danger</button>

    </div>
    <div class="col-md-6 col-lg-4 d-grid gap-2">
        <button type="button" class="btn waves-effect waves-light btn-secondary">Secondary</button>
        <button type="button" class="btn waves-effect waves-light btn-warning">Warning</button>
        <button type="button" class="btn waves-effect waves-light btn-light">Light</button>
        <button type="button" class="btn waves-effect waves-light btn-dark">Dark</button>

    </div>
</div>

Use a classes for `d-grid gap-2`creating a block button.

Rounded Block buttons

<div class="row justify-content-center">
    <div class="col-md-6 col-lg-4 d-grid gap-2">
        <button type="button" class="btn btn-rounded waves-effect waves-light btn-info">Info</button>
        <button type="button" class="btn btn-rounded waves-effect waves-light btn-success">Success</button>
        <button type="button" class="btn btn-rounded waves-effect waves-light btn-primary">Primary</button>
        <button type="button" class="btn btn-rounded waves-effect waves-light btn-danger">Danger</button>
    </div>
    <div class="col-md-6 col-lg-4 d-grid gap-2">
        <button type="button" class="btn btn-rounded waves-effect waves-light btn-secondary">Secondary</button>
        <button type="button" class="btn btn-rounded waves-effect waves-light btn-warning">Warning</button>
        <button type="button" class="btn btn-rounded waves-effect waves-light btn-light">Light</button>
        <button type="button" class="btn btn-rounded waves-effect waves-light btn-dark">Dark</button>
    </div>
</div>

Use a classe `rounded-pill`.

Light Block buttons

<div class="row justify-content-center">
    <div class="col-md-6 d-grid gap-2">
        <button type="button" class="btn waves-effect waves-light btn-light-info text-info font-medium">Info</button>
        <button type="button" class="btn waves-effect waves-light btn-light-success text-success font-medium">Success</button>
        <button type="button" class="btn waves-effect waves-light btn-light-primary text-primary font-medium">Primary</button>
    </div>
    <div class="col-md-6 d-grid gap-2">
        <button type="button" class="btn waves-effect waves-light btn-light-secondary text-secondary font-medium">Secondary</button>
        <button type="button" class="btn waves-effect waves-light btn-light-warning text-warning font-medium">Warning</button>
        <button type="button" class="btn waves-effect waves-light btn-light-danger text-danger font-medium">Danger</button>
    </div>
</div>

Use a classes `d-grid gap-2` to quickly create a block button.

Rounded Block buttons

<div class="row justify-content-center">
    <div class="col-md-6 d-grid gap-2">
        <button type="button" class="btn btn-rounded waves-effect waves-light btn-light-info text-info font-medium">Info</button>
        <button type="button" class="btn btn-rounded waves-effect waves-light btn-light-success text-success font-medium">Success</button>
        <button type="button" class="btn btn-rounded waves-effect waves-light btn-light-primary text-primary font-medium">Primary</button>
    </div>
    <div class="col-md-6 d-grid gap-2">
        <button type="button" class="btn btn-rounded waves-effect waves-light btn-light-secondary text-secondary font-medium">Secondary</button>
        <button type="button" class="btn btn-rounded waves-effect waves-light btn-light-warning text-warning font-medium">Warning</button>
        <button type="button" class="btn btn-rounded waves-effect waves-light btn-light-danger text-danger font-medium">Danger</button>
    </div>
</div>

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

Block outline buttons

<div class="row justify-content-center">
     <div class="col-md-6 col-lg-4 d-grid gap-2">
         <button type="button" class="btn waves-effect waves-light btn-outline-info">Info</button>
         <button type="button" class="btn waves-effect waves-light btn-outline-success">Success</button>
         <button type="button" class="btn waves-effect waves-light btn-outline-primary">Primary</button>
         <button type="button" class="btn waves-effect waves-light btn-outline-danger">Danger</button>
     </div>
     <div class="col-md-6 col-lg-4 d-grid gap-2">
         <button type="button" class="btn waves-effect waves-light btn-outline-secondary">Secondary</button>
         <button type="button" class="btn waves-effect waves-light btn-outline-warning">Warning</button>
         <button type="button" class="btn waves-effect waves-light btn-outline-light">Light</button>
         <button type="button" class="btn waves-effect waves-light btn-outline-dark">Dark</button>
     </div>
 </div>

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

Rounded outline Block buttons

<div class="row justify-content-center">
    <div class="col-md-6 col-lg-4 d-grid gap-2">
        <button type="button" class="btn btn-rounded waves-effect waves-light btn-outline-info">Info</button>
        <button type="button" class="btn btn-rounded waves-effect waves-light btn-outline-success">Success</button>
        <button type="button" class="btn btn-rounded waves-effect waves-light btn-outline-primary">Primary</button>
        <button type="button" class="btn btn-rounded waves-effect waves-light btn-outline-danger">Danger</button>
    </div>
    <div class="col-md-6 col-lg-4 d-grid gap-2">
        <button type="button" class="btn btn-rounded waves-effect waves-light btn-outline-secondary">Secondary</button>
        <button type="button" class="btn btn-rounded waves-effect waves-light btn-outline-warning">Warning</button>
        <button type="button" class="btn btn-rounded waves-effect waves-light btn-outline-light">Light</button>
        <button type="button" class="btn btn-rounded waves-effect waves-light btn-outline-dark">Dark</button>
    </div>
</div>

Use a classes `rounded-pill` to quickly create a General btn.

Large Block buttons

<div class="row justify-content-center">
    <div class="col-md-6 col-lg-4 d-grid gap-2">
        <button type="button" class="btn btn-lg waves-effect waves-light btn-outline-info">Info</button>
        <button type="button" class="btn btn-lg waves-effect waves-light btn-outline-success">Success</button>
        <button type="button" class="btn btn-lg waves-effect waves-light btn-outline-primary">Primary</button>
        <button type="button" class="btn btn-lg waves-effect waves-light btn-outline-danger">Danger</button>
    </div>
    <div class="col-md-6 col-lg-4 d-grid gap-2">
        <button type="button" class="btn btn-lg waves-effect waves-light btn-outline-secondary">Secondary</button>
        <button type="button" class="btn btn-lg waves-effect waves-light btn-outline-warning">Warning</button>
        <button type="button" class="btn btn-lg waves-effect waves-light btn-outline-light">Light</button>
        <button type="button" class="btn btn-lg waves-effect waves-light btn-outline-dark">Dark</button>
    </div>
</div>

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

Button with icon

Rounded Button with icon

Outline Button with icon

Rounded Outline Button with icon

Light Button with icon

Rounded Light Button with icon

Small Circle Buttons

Small Light Circle Buttons

Circle Buttons

Light Circle Buttons

Circle Large buttons

Light Circle Large Buttons

Circle Extra Large buttons

Light Circle Extra Large Buttons

Group buttons

<div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-light-primary text-primary font-medium">Left</button>
    <button type="button" class="btn btn-light-primary text-primary font-medium">Middle</button>
    <button type="button" class="btn btn-light-primary text-primary font-medium">Right</button>
</div>
<div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-light-secondary text-secondary font-medium"><i data-feather="align-left" class="feather-sm fill-white"></i></button>
    <button type="button" class="btn btn-light-secondary text-secondary font-medium"><i data-feather="align-justify" class="feather-sm fill-white"></i></button>
    <button type="button" class="btn btn-light-secondary text-secondary font-medium"><i data-feather="align-right" class="feather-sm fill-white"></i></button>
</div>
<div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-light-success text-success">
        <i data-feather="skip-back" class="fill-white feather-sm"></i>
    </button>
    <button type="button" class="btn btn-light-success text-success">
        <i data-feather="play" class="fill-white feather-sm"></i>
    </button>
    <button type="button" class="btn btn-light-success text-success">
        <i data-feather="skip-forward" class="fill-white feather-sm"></i>
    </button>
</div>

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

Group buttons sizing

<div class="btn-group btn-group-lg" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-light-primary text-primary font-medium">Left</button>
    <button type="button" class="btn btn-light-primary text-primary font-medium">Middle</button>
    <button type="button" class="btn btn-light-primary text-primary font-medium">Right</button>
</div>
<div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-light-secondary text-secondary font-medium"><i data-feather="align-left" class="feather-sm fill-white"></i></button>
    <button type="button" class="btn btn-light-secondary text-secondary font-medium"><i data-feather="align-justify" class="feather-sm fill-white"></i></button>
    <button type="button" class="btn btn-light-secondary text-secondary font-medium"><i data-feather="align-right" class="feather-sm fill-white"></i></button>
</div>
<div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-light-success text-success">
        <i data-feather="skip-back" class="fill-white feather-sm"></i>
    </button>
    <button type="button" class="btn btn-light-success text-success">
        <i data-feather="play" class="fill-white feather-sm"></i>
    </button>
    <button type="button" class="btn btn-light-success text-success">
        <i data-feather="skip-forward" class="fill-white feather-sm"></i>
    </button>
</div>

Wrap a series of buttons with `.btn` in `.btn-group-lg , *-sm`

Button toolbar pagination

<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-light-info text-info font-medium disabled">1</button>
        <button type="button" class="btn btn-info">2</button>
        <button type="button" class="btn btn-light-info text-info font-medium">3</button>
        <button type="button" class="btn btn-light-info text-info font-medium">4</button>
    </div>
    <div class="btn-group me-2" role="group" aria-label="Second group">
        <button type="button" class="btn btn-light-info text-info font-medium">5</button>
        <button type="button" class="btn btn-light-info text-info font-medium">6</button>
        <button type="button" class="btn btn-light-info text-info font-medium">7</button>
    </div>
    <div class="btn-group" role="group" aria-label="Third group">
        <button type="button" class="btn btn-light-info text-info font-medium">8</button>
    </div>
</div>

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

Button Toolbar with Input Group

<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-light-secondary text-secondary">
        <i data-feather="printer" class="feather-sm fill-white"></i>
    </button>
    <button type="button" class="btn btn-light-secondary text-secondary">
        <i data-feather="trash-2" class="feather-sm fill-white"></i>
    </button>
    <button type="button" class="btn btn-light-secondary text-secondary">
        <i data-feather="save" class="feather-sm fill-white"></i>
    </button>
    <button type="button" class="btn btn-light-secondary text-secondary">
        <i data-feather="settings" class="feather-sm fill-white"></i>
    </button>
  </div>
  <div class="input-group">
      <div class="input-group-text" id="btnGroupAddon"><i data-feather="mail" class="feather-sm"></i></div>
    <input type="text" class="form-control" placeholder="Subscribe Now" aria-label="Input group example" aria-describedby="btnGroupAddon">
  </div>
</div>

Button Toolbar with Jutify Content Input Group

<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-light-secondary text-secondary">
        <i data-feather="printer" class="feather-sm fill-white"></i>
    </button>
    <button type="button" class="btn btn-light-secondary text-secondary">
        <i data-feather="trash-2" class="feather-sm fill-white"></i>
    </button>
    <button type="button" class="btn btn-light-secondary text-secondary">
        <i data-feather="save" class="feather-sm fill-white"></i>
    </button>
    <button type="button" class="btn btn-light-secondary text-secondary">
        <i data-feather="settings" class="feather-sm fill-white"></i>
    </button>
  </div>
  <div class="input-group">
      <div class="input-group-text" id="btnGroupAddon2">
            <i data-feather="mail" class="feather-sm"></i>
        </div>
        <input type="text" class="form-control" placeholder="Subscribe Now" aria-label="Input group example" aria-describedby="btnGroupAddon2">
  </div>
</div>

Button with js elements

<div>
<button type="button" class="btn btn-light-success text-success font-medium" data-bs-toggle="button" aria-pressed="false">
    <i class="ri-settings-2-line fs-5 align-middle text" aria-hidden="true"></i>
    <span class="text">Upload</span>
    <i class="ri-check-line fs-5 align-middle text-active" aria-hidden="true"></i>
    <span class="text-active">Success</span>
</button>
<button type="button" class="btn btn-light-info text-info" data-bs-toggle="button" data-more="#sh" aria-pressed="false">
    <i data-feather="plus" class="text" aria-hidden="true"></i>
    <i data-feather="minus" class="text-active" aria-hidden="true"></i>
</button>
<button type="button" class="btn btn-light-secondary text-secondary" data-bs-toggle="button" aria-pressed="true">
    <i class="ri-heart-fill text fs-4" aria-hidden="true"></i>
    <i class="ri-heart-fill text-active text-danger fs-4" aria-hidden="true"></i>
</button>
<button type="button" class="btn btn-light-secondary text-secondary" data-bs-toggle="button" aria-pressed="true">
    <i class="ri-thumb-up-fill fs-4 text" aria-hidden="true"> 20</i>
    <i class="ri-thumb-up-fill fs-4 text-active text-danger" aria-hidden="true"> 21</i>
</button>
</div>

Button with Checkbox

<div class="btn-group" data-bs-toggle="buttons">
    <label class="btn btn-light-info text-info font-medium active">
        <div class="form-check mr-sm-2">
            <input type="checkbox" class="form-check-input" id="checkbox0" checked>
            <label class="form-check-label" for="checkbox0">Checked</label>
        </div>
    </label>
    <label class="btn btn-light-info text-info font-medium">
        <div class="form-check mr-sm-2">
            <input type="checkbox" class="form-check-input" id="checkbox1">
            <label class="form-check-label" for="checkbox1">Checkbox 2</label>
        </div>
    </label>
    <label class="btn btn-light-info text-info font-medium">
        <div class="form-check mr-sm-2">
            <input type="checkbox" class="form-check-input" id="checkbox2">
            <label class="form-check-label" for="checkbox2">Checkbox 3</label>
        </div>
    </label>
</div>

1Checked

2Checkbox 2

3Checkbox 3

Button with Radio

<div class="btn-group" data-bs-toggle="buttons">
    <label class="btn btn-light-info text-info font-medium active">
        <div class="form-check">
            <input type="radio" id="customRadio4" name="customRadio" class="form-check-input" checked>
            <label class="form-check-label" for="customRadio4">Radio 1</label>
        </div>
    </label>
    <label class="btn btn-light-info text-info font-medium">
        <div class="form-check">
            <input type="radio" id="customRadio5" name="customRadio" class="form-check-input">
            <label class="form-check-label" for="customRadio5">Radio 2</label>
        </div>
    </label>
    <label class="btn btn-light-info text-info font-medium">
        <div class="form-check">
            <input type="radio" id="customRadio6" name="customRadio" class="form-check-input">
            <label class="form-check-label" for="customRadio6">Radio 3</label>
        </div>
    </label>
</div>

1Radio 1

2Radio 2

3Radio 3

Nesting Dropdown

Nesting buttons with small size

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
    <button type="button" class="btn btn-light-secondary btn-sm text-secondary font-medium">1</button>
    <button type="button" class="btn btn-light-secondary btn-sm text-secondary font-medium">2</button>
    <div class="btn-group btn-group-sm" role="group">
        <button id="btnGroupDrop1" type="button" class="btn btn-light-secondary text-secondary font-medium 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="#">Dropdown link</a>
            <a class="dropdown-item" href="#">Dropdown link</a>
        </div>
    </div>
</div>
<h4 class="card-title mt-4">Nesting buttons with regular size</h4>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
    <button type="button" class="btn btn-light-secondary text-secondary font-medium">1</button>
    <button type="button" class="btn btn-light-secondary text-secondary font-medium">2</button>
    <div class="btn-group" role="group">
        <button id="btnGroupDrop1" type="button" class="btn btn-light-secondary text-secondary font-medium 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="#">Dropdown link</a>
            <a class="dropdown-item" href="#">Dropdown link</a>
        </div>
    </div>
</div>
<h4 class="card-title mt-4">Nesting buttons with large size</h4>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
    <button type="button" class="btn btn-light-secondary btn-lg text-secondary font-medium">1</button>
    <button type="button" class="btn btn-light-secondary btn-lg text-secondary font-medium">2</button>
    <div class="btn-group btn-group-lg" role="group">
        <button id="btnGroupDrop1" type="button" class="btn btn-light-secondary text-secondary font-medium 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="#">Dropdown link</a>
            <a class="dropdown-item" href="#">Dropdown link</a>
        </div>
    </div>
</div>

Nesting buttons with regular size

Nesting buttons with large size

Nesting Buttons with vertical align

<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
     <button type="button" class="btn btn-light-secondary text-secondary font-medium">Button</button>
     <button type="button" class="btn btn-light-secondary text-secondary font-medium">Button</button>
     <button type="button" class="btn btn-light-secondary text-secondary font-medium">Button</button>
     <button type="button" class="btn btn-light-secondary text-secondary font-medium">Button</button>
     <button type="button" class="btn btn-light-secondary text-secondary font-medium">Button</button>
     <button type="button" class="btn btn-light-secondary text-secondary font-medium">Button</button>
 </div>
 <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
     <button type="button" class="btn btn-light-secondary text-secondary font-medium">Button</button>
     <div class="btn-group" role="group">
         <button id="btnGroupVerticalDrop1" type="button" class="btn btn-light-secondary text-secondary font-medium dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             Dropdown
         </button>
         <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
             <a class="dropdown-item" href="#">Dropdown link</a>
             <a class="dropdown-item" href="#">Dropdown link</a>
         </div>
     </div>
     <button type="button" class="btn btn-light-secondary text-secondary font-medium">Button</button>
     <div class="btn-group" role="group">
         <button id="btnGroupVerticalDrop2" type="button" class="btn btn-light-secondary text-secondary font-medium dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             Dropdown
         </button>
         <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
             <a class="dropdown-item" href="#">Dropdown link</a>
             <a class="dropdown-item" href="#">Dropdown link</a>
         </div>
     </div>
     <div class="btn-group" role="group">
         <button id="btnGroupVerticalDrop3" type="button" class="btn btn-light-secondary text-secondary font-medium dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             Dropdown
         </button>
         <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">
             <a class="dropdown-item" href="#">Dropdown link</a>
             <a class="dropdown-item" href="#">Dropdown link</a>
         </div>
     </div>
     <div class="btn-group" role="group">
         <button id="btnGroupVerticalDrop4" type="button" class="btn btn-light-secondary text-secondary font-medium dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             Dropdown
         </button>
         <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4">
             <a class="dropdown-item" href="#">Dropdown link</a>
             <a class="dropdown-item" href="#">Dropdown link</a>
         </div>
     </div>
 </div>

Accordion Item #1

Accordion Item #2

Accordion Item #3

Luanch Admin

Event today

Settings

Pavan kumar

Pavan kumar

Sonu Nigam

Arijit Sinh

Pavan kumar

Buttons

$58,256

General Buttons

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

Light Buttons

Use btn-light class for light buttons

Button with outline

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

Button Tags

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

Rounded Buttons

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

Rounded light Buttons

Use a classes btn btn-rounded btn-light-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 for d-grid gap-2creating a block button.

Rounded Block buttons

Use a classe rounded-pill.

Light Block buttons

Use a classes d-grid gap-2 to quickly create a block button.

Rounded Block buttons

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

Block outline buttons

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

Rounded outline Block buttons

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

Large Block buttons

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

Button with icon

Rounded Button with icon

Outline Button with icon

Rounded Outline Button with icon

Light Button with icon

Rounded Light Button with icon

Small Circle Buttons

Small Light Circle Buttons

Circle Buttons

Light Circle Buttons

Circle Large buttons

Light Circle Large Buttons

Circle Extra Large buttons

Light Circle Extra Large Buttons

Group buttons

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

Group buttons sizing

Wrap a series of buttons with .btn in .btn-group-lg , *-sm

Button toolbar pagination

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

Button Toolbar with Input Group

Button Toolbar with Jutify Content Input Group

Button with js elements

Button with Checkbox

Button with Radio

Nesting Dropdown

Nesting buttons with small size

Nesting buttons with regular size

Nesting buttons with large size

Nesting Buttons with vertical align

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

Social Buttons

Circle buttons

Rounded buttons

Pavan kumar

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

Use `btn-light` class for light buttons

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

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

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

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

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

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

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

Use a classes for `d-grid gap-2`creating a block button.

Use a classe `rounded-pill`.

Use a classes `d-grid gap-2` to quickly create a block button.

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

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

Use a classes `rounded-pill` to quickly create a General btn.

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

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

Wrap a series of buttons with `.btn` in `.btn-group-lg , *-sm`

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

create vertical button with class of `.btn-group-vertical`