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>