- Shortcodes are supported only in WordPress and Joomla!™ including versions with wooCommerce and VirtuShop plug-ins.
- Colors and styles depend on current settings modified in Default Styles.

# Buttons

### Button

Button

    [button link="http://..."]Button[/button]

### Button with Icon

Button with Icon

    [button icon="icon-search"]Button with Icon[/button]

NOTE: `link` and `icon` are supported with all button styles and sizes.

### Bootstrap Button

Add `type="bootstrap"` to change a default button to a Bootstrap button. Use `style` and `size` attributes to customize it.

NOTE: `style` and `size` attributes work only for buttons with `type="bootstrap"`

### Button Styles

Supported Values: `default`, `primary`, `success`, `info`, `warning`, `danger`, `link`

Default Primary Success Info Warning Danger Link

    [button type="bootstrap" style="default"]Default[/button]

    [button type="bootstrap" style="primary"]Primary[/button]

    [button type="bootstrap" style="success"]Success[/button]

    [button type="bootstrap" style="info"]Info[/button]

    [button type="bootstrap" style="warning"]Warning[/button]

    [button type="bootstrap" style="danger"]Danger[/button]

    [button type="bootstrap" style="link"]Link[/button]

### Button Size

Supported additions to `size` attribute: `large`, `small`, `xsmall`

Large Button Large Button

Default Button Default Button

Small Button Small Button

Extra Small Button Extra Small Button

    [button type="bootstrap" style="default" size="large"]Large Button[/button]

    [button type="bootstrap" style="primary" size="large"]Large Button[/button]

    [button type="bootstrap" style="default"]Default Button[/button]

    [button type="bootstrap" style="primary"]Default Button[/button]

    [button type="bootstrap" style="default" size="small"]Small Button[/button]

    [button type="bootstrap" style="primary" size="small"]Small Button[/button]

    [button type="bootstrap" style="default" size="xsmall"]Extra Small Button[/button]

    [button type="bootstrap" style="primary" size="xsmall"]extra Small Button[/button]

# Text Groups

Used to display a group of Text, Header and Image. Embed any other shortcodes in the content, those shordcodes are supported as well.

## Basic Layouts

### Text Only

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Button

    [text_group]Cras sit amet nibh libero... [button]Button[/button] [/text_group]

### Text with Header

## Heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

    [text_group header="Heading"]Cras sit amet nibh libero...[/text_group]

### Text with Header and Image

### Heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

    [text_group header="Heading" image="http://..."]Cras sit amet nibh libero...[/text_group]

## Header Options

Specify `header_tag` to change Header. Supported Values: `h1`, `h2`, `h3`, `h4`, `h5`, `h6`. The h3 is the default value.

## Heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

    [text_group header="Heading" header_tag="h2"]Cras sit amet nibh libero...[/text_group]

## Image Options

### Image Link

Specify a link to image with the `image_link` attribute.

    [text_group image="http://" image_link="http://"]Cras sit amet nibh libero...[/text_group]

### Image Size

Specify the Image's Width and Height with the `image_width` and `image_height` attributes.

    [text_group image="http://" image_link="http://" image_width="140px" image_height="140px"]Cras sit amet nibh libero...[/text_group]

## Alternative Image Positions

Supported Values: `left`, `right`, `top`, `middle`, `bottom`. The `left` is default.

### Left and Right

### Heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

### Heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

    [text_group header="Heading" image="http://..." image_position="left"]Cras sit amet nibh libero...[/text_group]

    [text_group header="Heading" image="http://..." image_position="right"]Cras sit amet nibh libero...[/text_group]

### Top, Middle and Bottom

### Heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

### Heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

### Heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

    [text_group header="Heading" image="http://..." image_position="top"]Cras sit amet nibh libero...[/text_group]

    [text_group header="Heading" image="http://..." image_position="middle"]Cras sit amet nibh libero...[/text_group]

    [text_group header="Heading" image="http://..." image_position="bottom"]Cras sit amet nibh libero...[/text_group]

# Columns

Use to create layouts. Embed any other shortcodes in the content, those shordcodes are supported as well.

## Basic Layouts

Supported values: `one_half`, `one_third`, `two_third`, `one_fourth`, `three_fourth`.

### One Half

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

##### One Half

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

    [one_half]Cras sit amet nibh libero...[/one_half]

    [one_half]Cras sit amet nibh libero...[/one_half]

### One Third

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

##### One Third

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

##### One Third

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

    [one_third]Cras sit amet nibh libero...[/one_third]

    [one_third]Cras sit amet nibh libero...[/one_third]

    [one_third]Cras sit amet nibh libero...[/one_third]

### One Third and Two Thirds

##### One Third

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

##### Two Thirds

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

    [one_third]Cras sit amet nibh libero...[/one_third]

    [two_third]Cras sit amet nibh libero...[/two_third]

### One Fourth

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

##### One Fourth

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

##### One Fourth

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

##### One Fourth

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

    [one_fourth]Cras sit amet nibh libero...[/one_fourth]

    [one_fourth]Cras sit amet nibh libero...[/one_fourth]

    [one_fourth]Cras sit amet nibh libero...[/one_fourth]

    [one_fourth]Cras sit amet nibh libero...[/one_fourth]

### One Fourth and Three Fourths

##### One Fourth

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

##### Three Fourths

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

    [one_fourth]Cras sit amet nibh libero...[/one_fourth]

    [three_fourth]Cras sit amet nibh libero...[/three_fourth]

### Custom Layouts

Create layouts with custom width with `column`. Specify `width` to set Column Width.

- To fit columns into one row, total number of columns MUST BE equal to 24, otherwise, exceeding columns are moved to the next row.
- Mark last columns in a row with the `last` attribute.

### Example of Columns with Various Width

##### Width 5

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

##### Width 9

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

##### Width 10

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

    [column width="5"]Cras sit amet nibh libero...[/column]

    [column width="9"]Cras sit amet nibh libero...[/column]

    [column width="10" last]Cras sit amet nibh libero...[/column]

### Custom Responsive Width

By default, the `width` attribute specifies the width for laptops and other devices with higher screen resolution.

However, Column Width may be customized for each screen resolution: Desktops, Laptops, Tables, Phones.

Use `width_lg` for Desktops, `width` for Laptops, `width_sm` for Tables, `width_xs` for Phones.

    [column width_lg="6" width="8" width_sm="12" width_xs="6"]Cras sit amet nibh libero...[/column]

# Box

By default, `full_width="no"` and `content_width="yes"`.

Use `css=""` to add additional styling. If `full_width="yes"` and `content_width="no"` then both content and styles spread from the left side of a browser to the right. If `full_width="yes"` and `content_width="yes"` then content is aligned for the content and styles spread from the left side of a browser to the right.

    [box css="" full_width="yes|no" content_width="yes|no"]content with shortcodes[/box]

# Slider

By default, `wide_slides="yes"`, `wide_carousel="yes"`, `interval="3000"`.

The `image` placed on slide's background contains an image link or an id. If `link` is set, the `linktarget`, may be `''`, `'_blank'`, `'_self'`, `'_parent'`, `'_top'`. Slide may contain any content.

    [slider css="" wide_slides="yes|no" wide_carousel="yes|no" interval="3000"]

        [slide css="" image="http:// | id" link="" linktarget=""]any slide content here[/slide]

    [/slider]

# Video

By default, `autoplay="no"`, `loop="no"`, `title="yes"`, `light_control_bar="no"`, `css=""`, `show_control_bar="show"`.

    [video link="https://www.youtube.com/watch?v=o__Uir1XH3k" autoplay="yes" loop="yes" title="no" light_control_bar="yes"

            show_control_bar="show/hide/autohide" style="width: 300px"][/video]

# Google Map

By default, `address=""`, `zoom="auto"`, `map_type="auto"`, `language="auto"`, `css=""`

    [googlemap address="Manchester" zoom="10" map_type="satelite" language="en" css="height: 400px"][/googlemap]

`zoom`:

- "auto"
- From 0 to 23

`map_type`:

- "auto"
- "road"
- "satelite"

`language`:

"auto", "eu" (Basque), "ca" (Catalan), "hr" (Croatian), "cs" (Czech), "da" (Danish), "nl" (Dutch), "en" (English), "fi" (Finnish), "fr" (French), "de" (German), "gl" (Galacian), "el" (Greek), "hi" (Hindi), "id" (Indonesian), "it" (Italian), "ja" (Japanese), "no" (Norwegian), "nn" (Nyorsk), "pt" (Portuguese), "rm" (Raeto-Romance), "ru" (Russian), "sr" (Serbian), "sk" (Slovak), "sl" (Slovenian), "es" (Spanish), "sv" (Swedish), "th" (Thai), "tr" (Turkish), "uk" (Ukrainian), "vi" (Vietnamese)

# Icons

### Usage Code

icon-adjust
To use Icons just place the `<i>` tag.

    <i class="icon-adjust"></i> icon-adjust

icon-adjust
To increase icon size use font-size css attribute.

    <i class="icon-adjust" style="font-size: 22px;"></i> icon-adjust

icon-adjust
Use BillionWebFont icons with Bootstrap components.

    <a class="btn btn-default btn-lg active"role="button" href="#">
      <i class="icon-adjust" ></i> icon-adjust
    </a>

### Common Icons

icon-adjust
icon-adn
icon-asterisk
icon-ban
icon-bar-chart
icon-barcode
icon-bell
icon-bolt
icon-bookmark
icon-bookmark-alt
icon-brain
icon-bug
icon-calendar
icon-calendar-day
icon-calendar-day-alt
icon-calendar-simple
icon-certificate
icon-cloud
icon-cloud-download
icon-cloud-upload
icon-code
icon-cog
icon-cogs
icon-comment
icon-comment-alt
icon-comments
icon-comments-alt
icon-compress
icon-credit-card
icon-crop
icon-delete
icon-delete-circle-alt
icon-downturn
icon-earth
icon-eject
icon-envelope
icon-envelope-alt
icon-exchange
icon-exclamation-sign
icon-expand
icon-eye-close
icon-eye-open
icon-female
icon-film
icon-filter
icon-filter-alt
icon-find-contact
icon-flag
icon-flag-alt
icon-folder
icon-folder-alt
icon-folder-open
icon-globe
icon-globe-alt
icon-globe-outline
icon-group
icon-growth
icon-h-sign
icon-happy
icon-hdd
icon-heart
icon-heart-circle
icon-heart-empty
icon-image
icon-image-alt
icon-inbox
icon-info-sign
icon-lines
icon-male
icon-map-marker
icon-phone
icon-phone-square
icon-pie-chart
icon-power
icon-qrcode
icon-question-circle
icon-random
icon-remove-sign
icon-reply
icon-reply-all
icon-retweet
icon-rss
icon-scales
icon-screenshot
icon-search
icon-search-alt
icon-search-circle
icon-search-glare
icon-search-thick
icon-search-thin
icon-share
icon-share-alt
icon-sign-in
icon-sign-out
icon-signal
icon-sitemap
icon-star
icon-star-alt
icon-star-half
icon-star-thin
icon-tablet
icon-tag
icon-tags
icon-tasks
icon-terminal
icon-thumbs-down
icon-thumbs-up
icon-tick
icon-tick-circle
icon-tick-circle-alt
icon-unhappy
icon-upload
icon-upload-circle
icon-upload-circle-alt
icon-user
icon-user-alt
icon-user-business
icon-user-medical
icon-warning
icon-zoom-in
icon-zoom-out

### Object Icons

icon-ambulance
icon-anchor
icon-aperture
icon-beaker
icon-beer
icon-book
icon-book-open
icon-briefcase
icon-briefcase-simple
icon-building
icon-bullhorn
icon-camera
icon-coffee
icon-cup
icon-dialer
icon-drop
icon-fighter
icon-fire
icon-food
icon-gift
icon-glass
icon-headphones
icon-help
icon-home
icon-home-alt
icon-hospital
icon-house
icon-leaf
icon-leaf-thin
icon-legal
icon-lemon
icon-lightbulb
icon-lock
icon-magic
icon-magnet
icon-medkit
icon-mobile
icon-moon
icon-music
icon-plane
icon-plane-alt
icon-plane-takeoff
icon-pushpin
icon-road
icon-sandwich
icon-stethoscope
icon-suitcase
icon-time
icon-time-alt
icon-trash-can
icon-truck
icon-umbrella
icon-video
icon-wrench

### eCommerce Icons

icon-bag
icon-basket
icon-basket-simple
icon-booth
icon-dollar
icon-euro
icon-gbp
icon-inr
icon-money
icon-product-view-mode
icon-rubl
icon-shopping-cart
icon-shopping-cart-buggy
icon-shopping-cart-simple
icon-shopping-cart-solid
icon-shopping-cart-trolley
icon-shopping-cart-wire
icon-won
icon-yen

### Directional Icons

icon-arrow-angle-down
icon-arrow-angle-left
icon-arrow-angle-right
icon-arrow-angle-up
icon-arrow-basic-down
icon-arrow-basic-left
icon-arrow-basic-right
icon-arrow-basic-up
icon-arrow-circle-alt-down
icon-arrow-circle-alt-left
icon-arrow-circle-alt-right
icon-arrow-circle-alt-up
icon-arrow-double-down
icon-arrow-double-left
icon-arrow-double-right
icon-arrow-double-up
icon-arrow-long-down
icon-arrow-long-left
icon-arrow-long-right
icon-arrow-long-up
icon-arrow-pointer-down
icon-arrow-pointer-left
icon-arrow-pointer-right
icon-arrow-pointer-up
icon-arrow-small-down
icon-arrow-small-left
icon-arrow-small-right
icon-arrow-small-up
icon-arrow-square-down
icon-arrow-square-left
icon-arrow-square-right
icon-arrow-square-up
icon-arrow-tall-down
icon-arrow-tall-left
icon-arrow-tall-right
icon-arrow-tall-up
icon-arrow-thick-down
icon-arrow-thick-left
icon-arrow-thick-right
icon-arrow-thick-up
icon-arrow-thin-down
icon-arrow-thin-left
icon-arrow-thin-right
icon-arrow-thin-up
icon-arrows
icon-arrows-alt
icon-arrows-horizontal
icon-arrows-vertical
icon-caret-down
icon-caret-left
icon-caret-right
icon-caret-up
icon-chevron-down
icon-chevron-left
icon-chevron-right
icon-chevron-up
icon-circle-arrow-down
icon-circle-arrow-left
icon-circle-arrow-right
icon-circle-arrow-up
icon-double-chevron-down
icon-double-chevron-left
icon-double-chevron-right
icon-double-chevron-up
icon-hand-down
icon-hand-left
icon-hand-right
icon-hand-up

### Bullet Icons

icon-angle-double
icon-angle-small
icon-arrow-fancy
icon-arrow-line
icon-box
icon-box-alt
icon-box-small
icon-box-small-alt
icon-curve-bottom
icon-curve-top
icon-fancy-circle-alt
icon-four-boxes
icon-four-boxes-alt
icon-four-rhombs
icon-heartlet
icon-label
icon-mark
icon-node-circle
icon-node-square
icon-pointer-basic
icon-rhomb
icon-round
icon-round-alt
icon-round-small
icon-round-small-alt
icon-starlet
icon-starlet-alt
icon-stripes
icon-stripes-thick
icon-ticklet
icon-ticklet-circle
icon-ticklet-circle-alt
icon-ticklet-thick
icon-triangle
icon-triangle-circle
icon-triangle-circle-alt

### Application Icons

icon-align-center
icon-align-justify
icon-align-left
icon-align-right
icon-backward
icon-bold
icon-check
icon-check-empty
icon-circle
icon-circle-alt
icon-copy
icon-cut
icon-edit
icon-edit-alt
icon-ellipsis
icon-external-link
icon-fast-backward
icon-fast-forward
icon-file
icon-file-alt
icon-font
icon-forward
icon-fullscreen
icon-grid
icon-grid-small
icon-indent-left
icon-indent-right
icon-italic
icon-list
icon-list-adv
icon-list-details
icon-list-details-small
icon-minus
icon-minus-circle
icon-minus-square
icon-minus-square-alt
icon-paste
icon-pause
icon-pencil
icon-play
icon-play-circle
icon-plus
icon-plus-circle
icon-plus-square
icon-plus-square-alt
icon-print
icon-properties
icon-quote-left
icon-quote-right
icon-repeat
icon-restore
icon-save
icon-sign-blank
icon-sort
icon-sort-alpha
icon-sort-alpha-asc
icon-sort-alpha-desc
icon-sort-amount-asc
icon-sort-amount-desc
icon-sort-asc
icon-sort-desc
icon-sort-numeric
icon-sort-numeric-asc
icon-sort-numeric-desc
icon-spinner
icon-step-backward
icon-step-forward
icon-strikethrough
icon-superscript
icon-text-height
icon-text-width
icon-typeface
icon-undo
icon-volume-down
icon-volume-off
icon-volume-up

### Brand Icons

icon-android
icon-apple
icon-bitbucket
icon-bitbucket-alt
icon-bitcoin
icon-css3
icon-delicious
icon-dribbble
icon-dropbox
icon-facebook
icon-facebook-alt
icon-facebook-square
icon-flickr
icon-github
icon-github-alt
icon-github-square
icon-google-plus
icon-google-plus-square
icon-html5
icon-instagram
icon-linkedin
icon-linkedin-square
icon-linux
icon-maxcdn
icon-picasa
icon-pinterest
icon-pinterest-square
icon-renminbi
icon-renren
icon-skype
icon-stackexchange
icon-trello-square
icon-tumblr
icon-tumblr-square
icon-twitter
icon-twitter-square
icon-vimeo
icon-vk
icon-weibo
icon-windows
icon-xing
icon-xing-square
icon-yahoo
icon-youtube
icon-youtube-play
icon-youtube-square

- All brand icons are trademarks of their respective owners. The use of these trademarks does not indicate endorsement of the trademark holder by BillionWebFont,
  nor vice versa.
- Read BillionWebFonts License.