Skip to content

cintolas/bootstrap-shortcodes

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Components

JavaScript

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

About

WordPress shortcodes for easier use of Bootstrap elements in your content.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published