Wrapkit

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

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.

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

Vertical buttons

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

71 Amsteroum Avenue Cronish Night, NY 35098

Phone

Reception : +205 123 4567
Office : +207 235 7890

Social