Bootstrap Shortcodes for WordPress

This is a plugin for WordPress that adds shortcodes for easier use of the Bootstrap elements in your content.

Requirements

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

The plugin is tested to work with Bootstrap version 3.0.0 and WordPress 3.6.

Installation

To install this plugin, just download it, and drop the folder in the wp-content/plugins/. Then login to WordPress and activate the plugin.

Supported shortcodes

The plugin doesn't support all Bootstrap elements yet, but most of them.

CSS

• Grid
• Lead body copy
• Emphasis classes
• Code
• Tables
• Buttons
• Responsive utilities

Components

• Icons
• Button Groups
• Labels
• Badges
• Jumbotron
• Thumbnails
• Alerts
• Media Objects
• List Groups
• Panels
• Wells

JavaScript

• Tabs
• Tooltip
• Popover
• Collapse (Accordion)
• Modal

Usage

CSS

Grid

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

[row] parameters

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

Bootstrap grid documentation.

Lead body copy

[lead] … [/lead]

[lead] parameters

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

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

Bootstrap code documentation

Tables

[table type="striped" cols="#,First Name, Last Name, Username" data="1, Filip, Stefansson, filipstefansson, 2, Victor, Meyer, Pudge, 3, Måns, Ketola-Backe, mossboll"]

[table] parameters

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
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 below).	optional	any text	none

Bootstrap button documentation

Responsive Utilities

[responsive visible="sm xs" hidden="lg"] … [/responsive]

[reponsive] parameters

Parameter	Description	Required	Values	Default
visible	Sizes at which this element is visible (separated by spaces)	optional	xs, sm, md, lg	false
hidden	Sizes at which this element is hidden (separated by spaces)	optional	xs, sm, md, lg	false

Bootstrap emphasis classes documentation

Components

Icons

[icon type="arrow"]

[icon] parameters

Parameter	Description	Required	Values	Default
type	The type of icon you want to display	required	See Bootstrap docs	none

Bootstrap Glyphicons documentation

Button Groups

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

[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

Bootstrap button groups 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

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

Bootstrap badges documentation

Jumbotron

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

[jumbotron] parameters

Parameter	Description	Required	Values	Default
title	The jumbotron title	optional	Any text	none

Bootstrap jumbotron documentation

Thumbnails

[thumbnail] … [/thumbnail]
[thumbnail] … [/thumbnail]
[thumbnail] … [/thumbnail]

[thumbnail] parameters

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
strong	Text to display in bold at the beginning	optional	any text	false

Bootstrap alert documentation

Media Objects

[media]
  [media-object pull="right"]
    …
  [/media-object]
  [media-body title="Testing"]
    …
  [/media-body]
[/media]

[media] parameters

None

[media-object] parameters

Parameter	Description	Required	Values	Default
pull	Whether the image pulls to the left or right	optional	left, right	right

[media-body] parameters

Parameter	Description	Required	Values	Default
title	The object title	required	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

[list-group]
  [list-group-item]
    …
  [/list-group-item]
  [list-group-item]
    …
  [/list-group-item]
  [list-group-item]
    …
  [/list-group-item]
[/list-group]

[list-group] parameters

None

Bootstrap list groups documentation

Panels

[panel type="info" title="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
title	The panel title	required	any text	none
footer	The panel footer text if desired	optional	any text	none

Bootstrap panels documentation

Wells

[well size="small"] … [/well]

[well] parameters

Parameter	Description	Required	Values	Default
size	Modifies the amount of padding inside the well	optional	sm, lg	normal

Bootstrap wells documentation

Javascript

Tabs

[tabs]
  [tab title="Home"]
    …
  [/tab]
  [tab title="Profile"]
    …
  [/tab]
  [tab title="Messages"]
    …
  [/tab]
[/tabs]

[tabs] parameters

None

[tab] parameters

Parameter	Description	Required	Values	Default
title	The title of the tab	required	any text	false

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" content="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
content	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 (Accordion)

[collapsibles]
  [collapse title="Collapse 1" state="active"]
    …
  [/collapse]
  [collapse title="Copllapse 2"]
    …
  [/collapse]
  [collapse title="Copllapse 3"]
    …
  [/collapse]
[/collapsibles]

[collapsibles] parameters

None

[collapse] parameters

Parameter	Description	Required	Values	Default
title	The title of the collapsible, visible when collapsed	required	any text	false
active	Whether the tab is expanded at load time	optional	active	false

Bootstrap collapse documentation

Modal

[modal text="This is my modal" title="Modal Title Goes Here" xclass="btn btn-primary btn-large"]
    …
    [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
xclass	Any extra classes you want to add to the trigger link	optional	any text	none

[modal-footer] parameters

None

Bootstrap modal documentation