Bootstrap 3 Shortcodes for WordPress
WordPress plugin that provides shortcodes for easier use of the Bootstrap styles and components in your content.
Bootstrap 3 Shortcodes for WordPress creates a simple, out of the way button just above the WordPress TinyMCE editor (next to the "Add Media" button) which pops up the plugin's documentation and shortcode examples for reference and handy "Insert Example" links to send the example shortcodes straight to the editor. There are no additional TinyMCE buttons to clutter up your screen, just great, easy to use shortcodes!
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.5
and requires PHP 5.3 or later.
Shortcode Reference
CSS
Components
JavaScript
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 include a container.
[container]
[row]
[column md="6"]
...
[/column]
[column md="6"]
...
[/column]
[/row]
[/container]
The container-fluid component is supported as a discrete shortcode for cases where you want to wrap a container.
[container-fluid]
[container]
[row]
[column md="6"]
...
[/column]
[column md="6"]
...
[/column]
[/row]
[/container]
[/container-fluid]
[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 |
[container-fluid] 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 |
[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
[button type="success" size="lg" link="#"] ... [/button]
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
Basic example
[button-group size="lg" justified="" vertical=""]
[button link="#"] ... [/button]
[button link="#"] ... [/button]
[button link="#"] ... [/button]
[/button-group]
[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]
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 |
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 can be accomplished by combining the [button-group] shortcode, the "data" parameters of the [button] shortcode, and [dropdown] shortcode as follows.
[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]
[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 |
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]
Automatically inserts H1 tag if not present
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]
[media-object media="left"]
...
[/media-object]
[media-body title="Testing"]
...
[/media-body]
[/media]
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 |
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 title="I'm the title" placement="right"] ... [/tooltip]
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 |
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