1. Home
  2. Buttons

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>
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link

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>
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link

Large button dropdowns

Use a classes to create instant button
Action Another action Something else here
Action Another action Something else here

Animated Drop downs

Give class to the button animated flipInX, flipInY, lightSpeedIn, slideInUp use any animations class
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link

Animated Drop downs with icon

Give class to the button animated flipInX, flipInY, lightSpeedIn, slideInUp use any animations class
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link

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.

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

Group buttons sizing

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

Nesting

creat with below code
Dropdown link Dropdown link

Vertical buttons

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

Button with js elements

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


Button with checkbox



Button with Radiobutton

Service Panel

Sticky Toolbar

The sticky toolbar below will float on the bottom of the screen a specified number of pixels above the bottom of the viewport. Once it reaches where it is supposed to be anchored in the code and container, it will act like a normal element. This is using position:sticky and the number pf pixels desired offset from the bottom of the viewport.

If you want something to scroll and not have a default placement to anchor to, you would use position:fixed along with declared values for top, left, right, and bottom. The example of this is the top navbar.

Special note: the parent container defines how/when it will appear. If the parent container is .page-wrapper it will scroll the whole page. However, if you only want it inside a specific container, you would place it inside that container.

Scroll down to "Sticky Toolbar"