Button Styling

Button styles

Normal buttons

.btn applies to <button>, <a> and <input>


Bold buttons

.btn-bold applies to .btn.


Round buttons

.btn-round applies to .btn


Outline buttons

.btn-outline applies to .btn


Label buttons

.btn-label applies to .btn

Submit Left Warning Remove

Flat buttons

.btn-flat applies to .btn


Pure buttons

.btn-pure applies to .btn


Square buttons

.btn-square applies to .btn


Float buttons

.btn-float applies to .btn


Multiline buttons

.btn-multiline applies to .btn


Extra colors

Apart from defualt Bootstrap colors, WrapAdmin supports following colors as well.



Social colors

Button sizes

Consistent width

.btn-w-xs, .btn-w-sm, .btn-w-md, .btn-w-lg and .btn-w-xl applies to .btn. Also, feel free to use .w-* utility classes.


Available heights

.btn-lg, .btn-sm and .btn-xs applies to .btn


Block buttons

.btn-block applies to .btn

Toggle buttons

Single button

Multi select

Single select

Button group

Default

Round

Justified

Vertical

Sizing




Toolbar

Nesting

Dropdown buttons

Button FAB Styling

Directions

Default

Each page shouldn't have more than one floating action button.


<div class="fab">
  <button class="btn btn-float btn-primary" data-toggle="button">
    <i class="fab-icon-default ti-plus"></i>
    <i class="fab-icon-active ti-close"></i>
  </button>

  <ul class="fab-buttons">
    <li><a class="btn btn-float btn-sm btn-info" href="#">1</a></li>
    <li><a class="btn btn-float btn-sm btn-info" href="#">2</a></li>
    <li><a class="btn btn-float btn-sm btn-info" href="#">3</a></li>
  </ul>
</div>

Bottom

.fab-dir-bottom applies to .fab.


Right

.fab-dir-right applies to .fab.


Left

.fab-dir-left applies to .fab.

Variations

Fixed positioning

To place your FAB in bottom right side of the page, apply .fab-fixed to your .fab. Please note that you can only have one fixed FAB.

<div class="fab fab-fixed">
    ...
</div>

Single action

Your FAB do not necessarily include sub actions. Following code demonstrate a FAB with single action and fixed to bottom right side of the page.

<div class="fab">
  <button class="btn btn-float btn-primary"><i class="ti-plus"></i></button>
</div>