Many people ask about the shortcodes available in the WordPress Twitter Bootstrap plugin.
So here it is: Your exhaustive source of all supported WordPress Twitter Bootstrap shortcodes!
First up, if you’re unsure about WordPress shortcodes, check out this article on shortcodes here.
All Shortcodes have verbose help (v2.0.4.8+)
All Twitter Bootstrap shortcodes have a parameter help
, where if you set it equal to y (help='y'
), it will print a list of all parameters available in that shortcode.
Demos
The following are simple demos of all the available shortcodes in the latest version of the plugin
Demo: Twitter Bootstrap Button Shortcode – LINK
Shortcode: [TBS_BUTTON color=”warning” style=”text-decoration:none” link=”http://twitter.github.com/bootstrap/base-css.html#buttons” title=”A nice link title”]My Lovely Twitter Button[/TBS_BUTTON]
HTML
<a style="text-decoration:none" href="http://twitter.github.com/bootstrap/base-css.html#buttons" title="A nice link title">My Lovely Twitter Button</a>
Result
[TBS_BUTTON color=”warning” style=”text-decoration:none” link=”http://twitter.github.com/bootstrap/base-css.html#buttons” title=”A nice link title”]My Lovely Twitter Button[/TBS_BUTTON]
Demo: Twitter Bootstrap Button Shortcode – BUTTON
Shortcode: [TBS_BUTTON color=”success” type=”submit” value=”y”]My Lovely Twitter Button[/TBS_BUTTON]
HTML
<button type="submit" value="0" value="y">My Lovely Twitter Button</button>
Result
[TBS_BUTTON color=”success” type=”submit” value=”y”]My Lovely Twitter Button[/TBS_BUTTON]
Demo: Twitter Bootstrap Icon Shortcode
Shortcode: [TBS_ICON class=”icon-globe”/]
HTML
<i class="icon-globe"></i>
Result
[TBS_ICON class=”icon-globe”/]
Demo: Twitter Bootstrap Badge Shortcode
Shortcode: [TBS_BADGE color=”info”]My Lovely Twitter Badge[/TBS_BADGE]
HTML
<span class="badge badge-info">My Lovely Twitter Badge</span>
Result
[TBS_BADGE color=”info”]My Lovely Twitter Badge[/TBS_BADGE]
Demo: Twitter Bootstrap Label Shortcode
Shortcode: [TBS_LABEL color=”important”]My Lovely Twitter Label[/TBS_LABEL]
HTML
<span class="label label-important">My Lovely Twitter Label</span>
Result
[TBS_LABEL color=”important”]My Lovely Twitter Label[/TBS_LABEL]
Demo: Twitter Bootstrap Alert Shortcode
Shortcode: [TBS_ALERT color=”success” heading=”Bold Alert Heading Text”]My Lovely Twitter Alert[/TBS_ALERT]
HTML
<div class="alert alert-success"><h4 class="alert-heading">Bold Alert Heading Text</h4>My Lovely Twitter Alert</div>
Result
[TBS_ALERT color=”success” heading=”Bold Alert Heading Text”]My Lovely Twitter Alert[/TBS_ALERT]
Demo: Twitter Bootstrap Tooltip Shortcode
Shortcode: [TBS_TOOLTIP placement=”top” title=”Watch me appear when you hover” style=”border: 1px solid #ddd; padding: 3px;”]Twitter Bootstrap Tooltip[/TBS_TOOLTIP]
HTML
<span rel="tooltip" data-placement="top" data-original-title="Watch me appear when you hover" style="border: 1px solid #ddd; padding: 3px;">Twitter Bootstrap Tooltip</span>
Result
[TBS_TOOLTIP placement=”top” title=”Watch me appear when you hover” style=”border: 1px solid #ddd; padding: 3px;”]Twitter Bootstrap Tooltip[/TBS_TOOLTIP]
Demo: Twitter Bootstrap Popover Shortcode
Shortcode: [TBS_POPOVER placement=”top” title=”Super Popover Title” content=”The message within the Popover” style=”border: 1px solid #ddd; padding: 3px;”]Twitter Bootstrap Popover[/TBS_POPOVER]
HTML
<span rel="popover" data-placement="top" data-content="The message within the Popover" data-original-title="Super Popover Title" style="border: 1px solid #ddd; padding: 3px;">Twitter Bootstrap Popover</span>
Result
[TBS_POPOVER placement=”top” title=”Super Popover Title” content=”The message within the Popover” style=”border: 1px solid #ddd; padding: 3px;”]Twitter Bootstrap Popover[/TBS_POPOVER]
Demo: Twitter Bootstrap Collapse Shortcode
There are 2 shortcodes needed to achieve the Twitter Bootstrap Collapse component. You need to nest these shortcodes – i.e. you place one inside the other. The parent shortcode is: [TBS_COLLAPSE]
The shortcode that goes inside this is: [TBS_COLLAPSE_GROUP]
(Perhaps the naming convention here is backwards, but it more closely follows Twitter Bootstrap naming conventions so you can correlate with the documentation easier)
Shortcode: [TBS_COLLAPSE accordion=’y’]
[TBS_COLLAPSE_GROUP title=”Click Me Title #1″ open=’n’]The hidden content for title #1[/TBS_COLLAPSE_GROUP]
[TBS_COLLAPSE_GROUP title=”Click Me Title #2″ open=’n’]The content for title #2. Because open=’y’ when the page loads, I show automatically.[/TBS_COLLAPSE_GROUP]
[/TBS_COLLAPSE]
HTML
<div class="accordion " id="TbsCollapseId-1183281165"> <div class="accordion-group "> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#TbsCollapseId-1183281165" href="http://www.icontrolwp.com/wordpress-twitter-bootstrap-css-plugin-home/wordpress-twitter-bootstrap-demo-page/#TbsCollapseGroupId-2045358930">Click Me Title #1 </a> </div> <div id="TbsCollapseGroupId-2045358930" class="accordion-body collapse "> <div class="accordion-inner">The hidden content for title #1 </div> </div> </div> <div class="accordion-group "> <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#TbsCollapseId-1183281165" href="http://www.icontrolwp.com/wordpress-twitter-bootstrap-css-plugin-home/wordpress-twitter-bootstrap-demo-page/#TbsCollapseGroupId-501279187">Click Me Title #2 </a> </div> <div id="TbsCollapseGroupId-501279187" class="accordion-body collapse in"> <div class="accordion-inner">The content for title #2. Because open=’y’ when the page loads, I show automatically. </div> </div> </div> </div>
Result
[TBS_COLLAPSE accordion=’y’]
[TBS_COLLAPSE_GROUP title=”Click Me Title #1″ open=’n’]The hidden content for title #1[/TBS_COLLAPSE_GROUP]
[TBS_COLLAPSE_GROUP title=”Click Me Title #2″ open=’y’]The content for title #2. Because open=’y’ when the page loads, I show automatically.[/TBS_COLLAPSE_GROUP]
[/TBS_COLLAPSE]
Demo: Twitter Bootstrap Progress Bar Shortcode
Shortcode: [TBS_PROGRESS_BAR width=”80%” striped=”y” active=”y” color=”danger” ]This is progress![/TBS_PROGRESS_BAR]
HTML
<div class="progress progress-danger progress-striped active"> <div class="bar" style="width: 80%;">This is progress!</div> </div>
Result
[TBS_PROGRESS_BAR width=”80%” striped=”y” active=”y” color=”danger” ]This is progress![/TBS_PROGRESS_BAR]
Demo: Twitter Bootstrap Thumbnails (currently in beta)
Shortcode: [TBS_THUMBNAILS]
[TBS_THUMBNAIL span=”4″ href=”http://google.com” src=”//www.google.com/nexus/images/home-hero-landing-n10.png”]This is a lovely thumbnail caption
Look, I’m a bold paragraph![/TBS_THUMBNAIL]
[/TBS_THUMBNAILS]
HTML
<ul class="thumbnails"> <li class="span4"> <div class="thumbnail"> <a href="http://google.com"> <img src="//www.google.com/nexus/images/home-hero-landing-n10.png" data-src="//www.google.com/nexus/images/home-hero-landing-n10.png"> </a> <div class="caption"> This is a lovely thumbnail caption<br> <strong>Look, I’m a bold paragraph</strong>! </div> </div> </li> </ul>
Result
[TBS_THUMBNAILS]
[TBS_THUMBNAIL span=”4″ href=”http://google.com” src=”//www.google.com/nexus/images/home-hero-landing-n10.png” style=”background-image:none;”]This is a lovely thumbnail caption
Look, I’m a bold paragraph![/TBS_THUMBNAIL]
[/TBS_THUMBNAILS]