Admin Pro

Dashboard 1

General Buttons

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

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 btn-block btn-success to quickly create a General btn.

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-block btn-outline-success to quickly create a General btn.

Rounded outline Block buttons

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

Large Block buttons

Use a classes btn btn-block 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.

Button with Dropdown

Use a classes to quickly create a General btn.
                                                 <!-- Example single danger button -->
                                                    <div class="btn-group">
                                                      <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        Action
                                                      </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

Use a classes to quickly create a General btn.
<!-- 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" aria-expanded="false">
                                                        <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>

Large button dropdowns

Use a classes to create instant button

Direction of the Dropdown

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

Menu Alignment

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

Responsive Alignment

Circle buttons

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


Circle Large buttons

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


Circle xtra Large buttons

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

Social buttons

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


With Circle buttons

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


with rounded buttons

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

Different Menu Content

Dropdown Options

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

Button Toolbar with Input Group

Button Toolbar with Jutify Content Input Group

Group buttons sizing

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

Nesting

creat with below code

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

Toggle States [Button Plugin]

Add data-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.

Checkbox buttons with Click[Checked] event

Note that pre-checked buttons require you to manually add the .active class to the input's label.

Radio buttons with Click[Checked] event

Note that pre-checked buttons require you to manually add the .active class to the input's label.