Optional sidebar menu
Social media
Contact information
Address

5th Avenue, New York - United States

Email

[email protected]

Phone

+10 724 1234 567

Boomerang - Style Builder

Layout options


Header options


Color options

Red Violet Blue Green Yellow Orange

Special

Black and white Dark Flat

Components and widgets

Boomerang - Standard buttons

Boomerang buttons are highly customizable. We created a lot of CSS classes for our buttons that will help you get exactly what you want.
Class name Info Example
btn The main class that has to be on every button. Any other class will be applied next to this one Boomerang
btn btn-base Standard button with the main template background Boomerang
btn btn-alt Standard button with the second main template background Boomerang
btn btn-light Standard button with a light background Boomerang
btn btn-dark Standard button with a dark template background Boomerang
btn btn-lg btn-base Makes the button large Boomerang
btn btn-sm btn-alt Makes the button smaller Boomerang
btn btn-xs btn-dark Makes the button extra small Boomerang
btn btn-block btn-base Make the button full width Boomerang




<a href="#" class="btn btn-base">Default Button</a>
<a href="#" class="btn btn-alt">Alternate Button</a>
<a href="#" class="btn btn-light">Light Button</a>
<a href="#" class="btn btn-dark">Dark Button</a>

Left aligned icon buttons

Boomerang buttons use Font Awesome icons. Check this link to get the icon you want. After that, get the icon class name and apply it next to btn-icon class as bellow
Class name Info Example
btn btn-icon btn-base fa-paw Icon button with the main template background Boomerang
btn btn-icon btn-alt fa-paw Icon button with the second main background Boomerang
btn btn-icon btn-light fa-paw Icon button with a light background Boomerang
btn btn-icon btn-dark fa-paw Icon button with a dark background Boomerang
btn btn-lg btn-icon btn-base fa-paw Large icon button with the main color background Boomerang
btn btn-sm btn-icon btn-alt fa-paw Small icon button with the second main color background Boomerang
btn btn-xs btn-icon btn-dark fa-paw Extra small icon button with a dark background Boomerang
btn btn-block btn-icon btn-base fa-paw Makes the button full width Boomerang




<a href="#" class="btn btn-dark btn-icon fa-heart">
    <span>Default Icon Button</span>
</a>
<a href="#" class="btn btn-alt btn-icon fa-heart">
    <span>Alternate Icon Button</span>
</a>
<a href="#" class="btn btn-light btn-icon fa-heart">
    <span>Light Icon Button</span>
</a>
<a href="#" class="btn btn-dark btn-icon fa-heart">
    <span>Dark Icon Button</span>
</a>

Right aligned icon buttons

Boomerang buttons use Font Awesome icons. Check this link to get the icon you want. After that, get the icon class name and apply it next to btn-icon class as bellow
To use the right aligned icon buttons use .btn-icon-right next to btn-icon. More detail in the buttons table
Class name Info Example
btn btn-icon btn-icon-right btn-base fa-paw Icon button with the main template background Boomerang
btn btn-icon btn-icon-right btn-alt fa-paw Icon button with the second main background Boomerang
btn btn-icon btn-icon-right btn-light fa-paw Icon button with a light background Boomerang
btn btn-icon btn-icon-right btn-dark fa-paw Icon button with a dark background Boomerang
btn btn-lg btn-icon btn-icon-right btn-base fa-paw Large icon button with the main color background Boomerang
btn btn-sm btn-icon btn-icon-right btn-alt fa-paw Small icon button with the second main color background Boomerang
btn btn-xs btn-icon btn-icon-right btn-dark fa-paw Extra small icon button with a dark background Boomerang
btn btn-block btn-icon btn-icon-right btn-base fa-paw Makes the button full width Boomerang




<a href="#" class="btn btn-dark btn-icon btn-icon-right fa-heart">
    <span>Default Icon Button</span>
</a>
<a href="#" class="btn btn-alt btn-icon btn-icon-right fa-heart">
    <span>Alternate Icon Button</span>
</a>
<a href="#" class="btn btn-light btn-icon btn-icon-right fa-heart">
    <span>Light Icon Button</span>
</a>
<a href="#" class="btn btn-dark btn-icon btn-icon-right fa-heart">
    <span>Dark Icon Button</span>
</a>

Bordered buttons

Class name Info Example
btn btn-b-white Bordered button with white color Boomerang
btn btn-b-base Bordered button with the main template color Boomerang
btn btn-b-alt Bordered button with the second main template color Boomerang
btn btn-b-dark Bordered button with a dark color Boomerang
btn btn-b-light Bordered button with a light color Boomerang
btn btn-lg btn-b-base Large bordered button with the main template color Boomerang
btn btn-sm btn-b-alt Small bordered button with second main template color Boomerang
btn btn-xs btn-b-dark Extra small bordered button with a dark color Boomerang
btn btn-block btn-b-base Make the button full width Boomerang





<a href="#" class="btn btn-b-base">Default Bordered Button</a>
<a href="#" class="btn btn-b-alt">Alternate Bordered Button</a>
<a href="#" class="btn btn-b-light">Light Bordered Button</a>
<a href="#" class="btn btn-b-dark">Dark Bordered Button</a>