### Boomerang - Style Builder

#### Layout options

I prefer it:
Predefined body backgrounds
Section title:
Color:

#### Header options

Header:
Top header color:
Nav shadow
Dropdown arrow:

#### Color options

Predefined colors Red Violet Blue Green Yellow Orange

#### Special New

Predefined schemes Black and white Dark Flat
Reset all applied styles

## Components and widgets

- Accordion
- Alerts
- Badges
- Blocks
  - Default Blocks
  - Inverse Blocks
  - Hero Blocks
  - Large Blocks + Arrow
  - Small Blocks + Arrow
  - Icon Blocks
  - Product Blocks
  - Property Blocks
- Buttons
  - Boomerang Buttons
  - Bootstrap Buttons
- Callouts
- Carousels
- Pagination
- Progress Bars
- Range Sliders
- Rating Stars
- Ribbons
- Tabs
- Typography
  - General
  - Lists
  - Testimonials

### 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

Default Button Default Button Default Button Default Button

Alternate Button Alternate Button Alternate Button Alternate Button

Light Button Light Button Light Button Light Button

Dark Button Dark Button Dark Button Dark Button

    <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

Icon Button Icon Button Icon Button Icon Button

Icon Button Icon Button Icon Button Icon Button

Icon Button Icon Button Icon Button Icon Button

Icon Button Icon Button Icon Button Icon Button

    <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

Icon Button Icon Button Icon Button Icon Button

Icon Button Icon Button Icon Button Icon Button

Icon Button Icon Button Icon Button Icon Button

Icon Button Icon Button Icon Button Icon Button

    <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

Default Button Default Button Default Button Default Button

Alternate Button Alternate Button Alternate Button Alternate Button

White Button White Button White Button White Button

Light Button Light Button Light Button Light Button

Dark Button Dark Button Dark Button Dark Button

    <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>