# Bootstrap Shortcodes for WordPress

WordPress plugin that provides shortcodes for easier use of the Bootstrap styles and components in your content.

## Requirements

This plugin won't do anything if you don't have WordPress theme built with the Bootstrap framework. This plugin does not include the Bootstrap framework.

The plugin is tested to work with `Bootstrap 3` and `WordPress 4`.

This plugin contains a `composer.json` file for those of you who manage your PHP dependencies with Composer.

## Shortcode Reference

### CSS

- Grid
- Lead body copy
- Emphasis classes
- Code
- Tables
- Buttons
- Images
- Responsive Embeds
- Responsive utilities

### Components

- Icons
- Button Groups
- Button Dropdowns
- Navs
- Breadcrumbs
- Labels
- Badges
- Jumbotron
- Page Header
- Thumbnails
- Alerts
- Progress Bars
- Media Objects
- List Groups
- Panels
- Wells

### JavaScript

- Tabs
- Tooltip
- Popover
- Collapse
- Carousel
- Modal

# Usage

### CSS

### Grid

      [row]
        [column md="6"]
          ...
        [/column]
        [column md="6"]
          ...
        [/column]
      [/row]

The container component is also supported in case your theme doesn't incude a container.

    [container]
      [row]
        [column md="6"]
          ...
        [/column]
        [column md="6"]
          ...
        [/column]
      [/row]
    [/container]

#### [container] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
fluid | Is the container fluid? (see Bootstrap documentation for details) | optional | true, false | false
xclass | Any extra classes you want to add | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

#### [row] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
xclass | Any extra classes you want to add | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

#### [column] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
xs | Size of column on extra small screens (less than 768px) | optional | 1-12 | false
sm | Size of column on small screens (greater than 768px) | optional | 1-12 | false
md | Size of column on medium screens (greater than 992px) | optional | 1-12 | false
lg | Size of column on large screens (greater than 1200px) | optional | 1-12 | false
offset_xs | Offset on extra small screens | optional | 1-12 | false
offset_sm | Offset on small screens | optional | 1-12 | false
offset_md | Offset on column on medium screens | optional | 1-12 | false
offset_lg | Offset on column on large screens | optional | 1-12 | false
pull_xs | Pull on extra small screens | optional | 1-12 | false
pull_sm | Pull on small screens | optional | 1-12 | false
pull_md | Pull on column on medium screens | optional | 1-12 | false
pull_lg | Pull on column on large screens | optional | 1-12 | false
push_xs | Push on extra small screens | optional | 1-12 | false
push_sm | Push on small screens | optional | 1-12 | false
push_md | Push on column on medium screens | optional | 1-12 | false
push_lg | Push on column on large screens | optional | 1-12 | false
xclass | Any extra classes you want to add | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

Bootstrap grid documentation.

### Lead body copy

    [lead] ... [/lead]

#### [lead] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
xclass | Any extra classes you want to add | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

Bootstrap body copy documentation

### Emphasis classes

    [emphasis type="success"] ... [/emphasis]

#### [emphasis] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
type | The type of label to display | required | muted, primary, success, info, warning, danger | muted
xclass | Any extra classes you want to add | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

Bootstrap emphasis classes documentation

### Code

    [code] ... [/code]

#### [code] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
inline | Display inline code | optional | true, false | false
scrollable | Set a max height of 350px and provide a scroll bar. Not usable with inline="true". | optional | true, false | false
xclass | Any extra classes you want to add | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

Bootstrap code documentation

### Tables

    [table-wrap bordered="true" striped="true"]

        Standard HTML table code goes here.

    [/table-wrap]

#### [table-wrap] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
bordered | Set "bordered" table style (see Bootstrap documentation) | optional | true, false | false
striped | Set "striped" table style (see Bootstrap documentation) | optional | true, false | false
hover | Set "hover" table style (see Bootstrap documentation) | optional | true, false | false
condensed | Set "condensed" table style (see Bootstrap documentation) | optional | true, false | false
responsive | Wrap the table in a div with the class "table-respsonve" (see Bootstrap documentation) | optional | true, false | false
xclass | Any extra classes you want to add | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

Bootstrap table documentation

### Buttons

    [button type="success" size="lg" link="#"] ... [/button]

#### [button] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
type | The type of the button | optional | default, primary, success, info, warning, danger, link | default
size | The size of the button | optional | xs, sm, lg | none
block | Whether the button should be a block-level button | optional | true, false | false
dropdown | Whether the button triggers a dropdown menu (see Button Dropdowns) | optional | true, false | false
active | Apply the "active" style | optional | true, false | false
disabled | Whether the button be disabled | optional | true, false | false
xclass | Any extra classes you want to add | optional | any text | none
link | The url you want the button to link to | optional | any valid link | none
target | Target for the link | optional | any valid target | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

Bootstrap button documentation

### Images

    [img type="circle" responsive="true"] ... [/img]

Wrap any number of HTML image tags or images inserted via the WordPress media manager.

#### [img] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
type | The effect to apply to wrapped images | optional | rounded, circle, thumbnail | false
responsive | Make the wrapped images responsive | optional | true, false | false
xclass | Any extra classes you want to add | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

Bootstrap images documentation

### Responsive Embeds

    [embed-responsive ratio="16by9"] ... [/embed-responsive]

Wrap `<iframe>`, `<embed>`, `<video>`, and `<object>` elements to make them responsive.

#### [responsive-embed] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
ratio | Maintain the aspect ratio of the embed | optional | 16by9, 4by3 | false
xclass | Any extra classes you want to add | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

Bootstrap responsive embed documentation

### Responsive Utilities

    [responsive block="lg md" hidden="sn xs"] ... [/responsive]

#### [reponsive] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
visible | Sizes at which this element is visible (separated by spaces) NOTE: as of Bootstrap 3.2 "visible" is deprecated in favor of "block", "inline", and "inline-block" (see below) | optional | xs, sm, md, lg | false
hidden | Sizes at which this element is hidden (separated by spaces) | optional | xs, sm, md, lg | false
block | Sizes at which this element is visible and displayed as a "block" element (separated by spaces) | optional | xs, sm, md, lg | false
inline | Sizes at which this element is visible and displayed as an "inline" element (separated by spaces) | optional | xs, sm, md, lg | false
inline_block | Sizes at which this element is visible and displayed as an "inline-block" element (separated by spaces) | optional | xs, sm, md, lg | false
xclass | Any extra classes you want to add | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

Bootstrap responsive utilities documentation

### Components

### Icons

    [icon type="arrow-right"]

#### [icon] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
type | The type of icon you want to display | required | See Bootstrap docs | none
xclass | Any extra classes you want to add | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

Bootstrap Glyphicons documentation

### Button Groups

#### Basic example

    [button-group size="lg" justified="" vertical=""]
        [button link="#"] ... [/button]
        [button link="#"] ... [/button]
        [button link="#"] ... [/button]
    [/button-group]

#### Button toolbar

    [button-toolbar]
        [button-group]
            [button link="#"] ... [/button]
            [button link="#"] ... [/button]
            [button link="#"] ... [/button]
        [/button-group]
        [button-group]
            [button link="#"] ... [/button]
            [button link="#"] ... [/button]
            [button link="#"] ... [/button]
        [/button-group]
        [button-group]
            [button link="#"] ... [/button]
        [/button-group]
    [/button-toolbar]

#### [button-group] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
size | The size of the button group | optional | xs, sm, lg | none
justified | Whether button group is justified | optional | true, false | false
vertical | Whether button group is vertical | optional | true, false | false
dropup | Must correspond with the use of [dropdown] | optional | true, false | false
xclass | Any extra classes you want to add | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

#### [button-toolbar] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
xclass | Any extra classes you want to add | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

Bootstrap button groups documentation

### Button Dropdowns

Button Dropdowns can be accomplished by combining the [button-group] shortcode, the "data" parameters of the [button] shortcode, and [dropdown] shortcode as follows.

#### Single button dropdowns

    [button-group]
        [button link="#" dropdown="true" data="toggle,dropdown"] ... [caret][/button]
        [dropdown]
            [dropdown-header] ... [/dropdown-header]
            [dropdown-item link="#"] ... [/dropdown-item]
            [dropdown-item link="#"] ... [/dropdown-item]
            [dropdown-item link="#"] ... [/dropdown-item]
            [divider]
            [dropdown-item link="#"] ... [/dropdown-item]
        [/dropdown]
    [/button-group]

#### Split button dropdowns

    [button-group]
        [button link="#"] ... [/button]
        [button dropdown="true" data="toggle,dropdown"][caret][/button]
        [dropdown]
            [dropdown-item link="#"] ... [/dropdown-item]
            [divider]
            [dropdown-item link="#"] ... [/dropdown-item]
        [/dropdown]
    [/button-group]

#### Dropup variation

    [button-group dropup="true"]
        [button link="#"] ... [/button]
        [button dropdown="true" data="toggle,dropdown"][caret][/button]
        [dropdown]
            [dropdown-item link="#"] ... [/dropdown-item]
            [divider]
            [dropdown-item link="#"] ... [/dropdown-item]
        [/dropdown]
    [/button-group]

#### [dropdown] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
xclass | Any extra classes you want to add | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

#### [dropdown-item] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
link | The url you want the dropdown-item to link to | optional | any valid link | none
disabled | Whether this menu-item is disabled | optional | true, false | false
xclass | Any extra classes you want to add | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

#### [dropdown-header] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
xclass | Any extra classes you want to add | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

#### [caret] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
xclass | Any extra classes you want to add | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

#### [divider] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
xclass | Any extra classes you want to add | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

Bootstrap button dropdowns documentation

### Navs

    [nav type="pills"]
        [nav-item link="#"] ... [/nav-item]
        [nav-item link="#"] ... [/nav-item]
        [nav-item link="#"] ... [/nav-item]
    [/nav]

#### Nav with dropdowns

    [nav type="pills"]
        [nav-item link="#" active="true"] ... [/nav-item]
        [nav-item dropdown="true" link="#"] ... [caret]
            [dropdown]
                [dropdown-item link="#"] ... [/dropdown-item]
                [dropdown-item link="#"] ... [/dropdown-item]
            [/dropdown]
        [/nav-item]
    [/nav]

#### [nav] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
type | The type of nav | required | tabs, pills | tabs
stacked | Whether the nav is stacked (should be used with "pills" type | optional | true, false | false
justified | Whether the nav is justified | optional | true, false | false
xclass | Any extra classes you want to add | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

#### [nav-item] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
link | The url you want the dropdown-item to link to | optional | any valid link | none
active | Whether the item has the "active" style applied | optional | true, false | false
disabled | Whether the item is disabled | optional | true, false | false
xclass | Any extra classes you want to add | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

Bootstrap button navs documentation

### Breadcrumbs

    [breadcrumb]
        [breadcrumb-item link="#"] ... [/breadcrumb-item]
        [breadcrumb-item link="#"] ... [/breadcrumb-item]
        [breadcrumb-item link="#"] ... [/breadcrumb-item]
    [/breadcrumb]

#### [breadcrumb] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
xclass | Any extra classes you want to add | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

#### [breadcrumb-item] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
link | The url you want the breadcrumb-item to link to | optional | any valid link | none
xclass | Any extra classes you want to add | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

Bootstrap breadcrumbs documentation

### Labels

    [label type="success"] ... [/label]

#### [label] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
type | The type of label to display | optional | default, primary, success, info, warning, danger | default
xclass | Any extra classes you want to add | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

Bootstrap label documentation

### Badges

    [badge right="true"] ... [/badge]

#### [badge] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
right | Whether the badge should align to the right of its container | optional | true, false | false
xclass | Any extra classes you want to add | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

Bootstrap badges documentation

### Jumbotron

    [jumbotron title="My Jumbotron"] ... [/jumbotron]

#### [jumbotron] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
title | The jumbotron title | optional | Any text | none
xclass | Any extra classes you want to add | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

Bootstrap jumbotron documentation

### Page Header

    [page-header] ... [/page-header]

Automatically inserts H1 tag if not present

#### [page-header] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
xclass | Any extra classes you want to add | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

Bootstrap page-header documentation

### Thumbnails

    [thumbnail] ... [/thumbnail]
    [thumbnail] ... [/thumbnail]
    [thumbnail] ... [/thumbnail]

#### [thumbnail] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
has_content | Set to "true" if this thumbnail contains more than just an image or linked image as in Bootstrap's thumbnail documentation. | optional | true, false | false
xclass | Any extra classes you want to add | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

Bootstrap thumbnails documentation

### Alerts

    [alert type="success"] ... [/alert]

#### [alert] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
type | The type of the alert | required | success, info, warning, danger | success
dismissable | If the alert should be dismissable | optional | true, false | false
xclass | Any extra classes you want to add | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

Bootstrap alert documentation

### Progress Bars

    [progress striped="true"]
        [progress-bar percent="50"]
        [progress-bar percent="25" type="success"]
    [/progress]

#### [progress] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
striped | Whether enclosed progress bars will be striped | optional | true, false | false
animated | Whether enclosed progress bars will be animated | optional | true, false | false
xclass | Any extra classes you want to add | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

#### [progress-bar] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
percent | The percentage amount to show in the progress bar | required | any number between 0 and 100 | false
label | Whether to show the percentage as a text label inside the bar | optional | true, false | false
type | The type of the progress bar | optional | default, primary, success, info, warning, danger | default
xclass | Any extra classes you want to add | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

Bootstrap progress bars documentation

### Media Objects

    [media]
      [media-object media="left"]
        ...
      [/media-object]
      [media-body title="Testing"]
        ...
      [/media-body]
    [/media]

#### [media] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
xclass | Any extra classes you want to add | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

#### [media-object] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
media | Whether the image pulls to the left or right | optional | left, right | right
pull | Whether the image pulls to the left or right Deprecated, use only if your theme uses Bootstrap 3.2 or earlier | optional | left, right | right
xclass | Any extra classes you want to add | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

#### [media-body] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
title | The object title | required | Any text | none
xclass | Any extra classes you want to add | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

NOTE: media-object should contain an image, or linked image, inserted using the WordPress TinyMCE editor

Bootstrap media objects documentation

### List Groups

#### Basic Example

    [list-group]
      [list-group-item]
        ...
      [/list-group-item]
      [list-group-item]
        ...
      [/list-group-item]
      [list-group-item]
        ...
      [/list-group-item]
    [/list-group]

#### Linked Items

    [list-group linked="true"]
      [list-group-item link="#" active="true"]
        ...
      [/list-group-item]
      [list-group-item link="#"]
        ...
      [/list-group-item]
      [list-group-item link="#"]
        ...
      [/list-group-item]
    [/list-group]

#### Custom Content

    [list-group linked="true"]
      [list-group-item link="#" active="true"]
        [list-group-item-heading]...[/list-group-item-heading]
        [list-group-item-text]...[/list-group-item-text]
      [/list-group-item]
      [list-group-item link="#"]
        [list-group-item-heading]...[/list-group-item-heading]
        [list-group-item-text]...[/list-group-item-text]
      [/list-group-item]
      [list-group-item link="#"]
        [list-group-item-heading]...[/list-group-item-heading]
        [list-group-item-text]...[/list-group-item-text]
      [/list-group-item]
    [/list-group]

#### [list-group] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
linked | Whether this is a linked list group, or a standard one | optional | true, false | false
xclass | Any extra classes you want to add | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

#### [list-group-item] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
link | The url you want the list item to link to Must correspond with the "linked" parameter in [list-group] | optional | any text | false
type | The type of the list-group-item | optional | primary, success, info, warning, danger, link | none
active | Whether the item has the "active" style applied | optional | true, false | false
target | Target for the link | optional | any valid target | none
xclass | Any extra classes you want to add | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

#### [list-group-item-heading] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
xclass | Any extra classes you want to add | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

#### [list-group-item-text] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
xclass | Any extra classes you want to add | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

Bootstrap list groups documentation

### Panels

    [panel type="info" heading="Panel Title" footer="Footer text"] ... [/panel]

#### [panel] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
type | The type of the panel | optional | default, primary, success, info, warning, danger, link | default
heading | The panel heading | optional | any text | none
title | Whether the panel heading should have a title tag around it | optional | true, false | false
footer | The panel footer text if desired | optional | any text | none
xclass | Any extra classes you want to add | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

Bootstrap panels documentation

### Wells

    [well size="sm"] ... [/well]

#### [well] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
size | Modifies the amount of padding inside the well | optional | sm, lg | normal
xclass | Any extra classes you want to add | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

Bootstrap wells documentation

### Javascript

### Tabs

    [tabs type="tabs"]
      [tab title="Home" active="true"]
        ...
      [/tab]
      [tab title="Profile"]
        ...
      [/tab]
      [tab title="Messages"]
        ...
      [/tab]
    [/tabs]

#### [tabs] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
type | The type of nav | required | tabs, pills | tabs
xclass | Any extra classes you want to add | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

#### [tab] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
title | The title of the tab | required | any text | false
active | Whether this tab should be "active" or selected | optional | true, false | false
fade | Whether to use the "fade" effect when showing this tab | optional | true, false | false
xclass | Any extra classes you want to add | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

Bootstrap tabs documentation

### Tooltip

    [tooltip title="I'm the title" placement="right"] ... [/tooltip]

#### [tooltip] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
title | The text of the tooltip | required | any text | none
placement | The placement of the tooltip | optional | left, top, bottom, right | top
animation | apply a CSS fade transition to the tooltip | optional | any text | none
html | Insert HTML into the tooltip | optional | true, false | false

Bootstrap tooltip documentation

### Popover

    [popover title="I'm the title" text="And here's some amazing content. It's very engaging. right?" placement="right"] ... [/popover]

#### [popover] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
title | The title of the popover | optional | any text | none
text | The text of the popover | required | any text | none
placement | The placement of the popover | optional | left, top, bottom, right | top
animation | apply a CSS fade transition to the tooltip | optional | any text | none
html | Insert HTML into the tooltip | optional | true, false | false

Bootstrap popover documentation

### Collapse

#### Single Collapse

      [collapse title="Collapse 1" active="true"]
        ...
      [/collapse]

#### Set of Collapsibles

    [collapsibles]
      [collapse title="Collapse 1" active="true"]
        ...
      [/collapse]
      [collapse title="Collapse 2"]
        ...
      [/collapse]
      [collapse title="Collapse 3"]
        ...
      [/collapse]
    [/collapsibles]

#### [collapsibles] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
xclass | Any extra classes you want to add | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

#### [collapse] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
title | The title of the collapsible, visible when collapsed | required | any text | false
type | The type of the panel | optional | default, primary, success, info, warning, danger, link | default
active | Whether the tab is expanded at load time | optional | true, false | false
xclass | Any extra classes you want to add | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

Bootstrap collapse documentation

### Carousel

    [carousel]
        [carousel-item active="true"] ... [/carousel-item]
        [carousel-item] ... [/carousel-item]
        [carousel-item] ... [/carousel-item]
    [/carousel]

[carousel-item] wraps an HTML image tag or image inserted via the WordPress editor.

#### [carousel] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
interval | The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle. | optional | any number (in ms) or "false" | 5000
wrap | Whether the carousel should cycle continuously or have hard stops. | optional | true, false | false
xclass | Any extra classes you want to add | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

#### [carousel-item] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
active | Whether the item has the "active" style applied. One item MUST be set as active. | optional | true, false | false
caption | This carousel slide's caption | optional | Any text | none
xclass | Any extra classes you want to add | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

Bootstrap carousel documentation

### Modal

    [modal text="This is my modal" title="Modal Title Goes Here" xclass="btn btn-primary btn-lg"]
        ...
        [modal-footer]
            [button type="primary" link="#" data="dismiss,modal"]Dismiss[/button]
        [/modal-footer]
    [/modal]

#### [modal] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
text | Text of the modal trigger link | required | any text | none
title | Title of the modal popup | required | any text | none
size | Optional modal size | optional | lg, sm | none
xclass | Any extra classes you want to add to the trigger link | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

#### [modal-footer] parameters

Parameter | Description | Required | Values | Default
--- | --- | --- | --- | ---
xclass | Any extra classes you want to add | optional | any text | none
data | Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at Button Dropdowns). | optional | any text | none

Bootstrap modal documentation