The Twitter bootstrap plugin is a designed for use with PyroCMS.

It adds a selection of tags to make content styling easy from within the WYSIWYG.

It requires the inclusion of Jquery, and the Twitter bootstrap CSS and JS files.

View on GitHub Download for PyroCMS 2.2+ Download for older versions

The plugin can also be loaded right into CKEditor, to do this copy the bootstrap-ckeditor.js file to the javascript folder in your theme or module, then edit the CKEditor config in PyroCMS Settings:

 // get path of directory ckeditor
   var basePath = CKEDITOR.basePath;
   basePath = basePath.substr(0, basePath.indexOf("ckeditor/")); 
   (function() {
      CKEDITOR.plugins.addExternal('bootstrap',basePath+'../../../../../addons/shared_addons/themes/MY_THEME/js/', 'bootstrap-ckeditor.js');
   })();

This assumes you have copied the bootstrap-ckeditor.js file to your themes js folder. You need to change MY_THEME to the name of your theme.

Then you need to add bootstrap as an extra plugin edit the line

extraPlugins: 'pyroimages,pyrofiles',

to read

extraPlugins: 'pyroimages,pyrofiles,bootstrap',

Next add bootstrap to a toolbar by editing the line

['ShowBlocks', 'RemoveFormat', 'Source'']

to read

['ShowBlocks', 'RemoveFormat', 'Source', 'bootstrap']

Finally if you are using PyroCMS version 2.2 or newer you need to edit

protectedSource: /{{(\s)?.[^}]+(\s)?}}/g

to read:

protectedSource: /(?!({{\s?bootstrap:(.*)\s?}}))(?!({{\s?\/bootstrap:(.*)\s?}})){{(\s)?.[^}]+(\s)?}}/g

Alert View Twitter bootstrap docs

Wrap any text for a basic warning alert message with dismiss button.

{{ bootstrap:alert style="" }} My Content {{ /bootstrap:alert }}

Optionally add a class or id.
Possible styles: error, success, info

Align View Twitter bootstrap docs

Float an element left or right.

{{ bootstrap:align position="" }} My Content {{ /bootstrap:align }}

Optionally add a class or id.

Badge View Twitter bootstrap docs

{{ bootstrap:badge style="" }} My Content {{ /bootstrap:badge }}

Optionally add a class or id.
Possible styles: success, warning, important, info, inverse

Carousel View Twitter bootstrap docs

This plugin requires the PyroCMS galleries module to be installed
The slideshow below shows a generic plugin and component for cycling through elements like a carousel.

{{ bootstrap:carousel slug="Gallery Slug" }}

Optionally add a class for the containing div.

Collapse View Twitter bootstrap docs

Get base styles and flexible support for collapsible components, this is a simplified version of the twitter bootstrap collapse plugin designed for single elements of expanding content.

{{ bootstrap:collapse title="My Title" }} My Content  {{ /bootstrap:collapse }}

Optionally add a class and id for the button.

Emphasis View Twitter bootstrap docs

Convey meaning through colour with a handful of emphasis utility classes.

{{ bootstrap:emphasis style="" }} My Content  {{ /bootstrap:emphasis }}

Optionally add a class and id.
Possible styles: muted, warning, error, info and success

Hero View Twitter bootstrap docs

A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.

{{ bootstrap:hero }} My Content  {{ /bootstrap:hero }}

Optionally add a class and id.

Label View Twitter bootstrap docs

{{ bootstrap:label style="" }} My Content {{ /bootstrap:label }}

Optionally add a class or id.
Possible styles: success, warning, important, info, inverse

Lead View Twitter bootstrap docs

Make a paragraph stand out.

{{ bootstrap:lead }} My Content  {{ /bootstrap:lead }}

Optionally add a class and id.

Row and Span View Twitter bootstrap docs

Begin by adding a row then add as many spans as you require.

{{ bootstrap:row }} {{ bootstrap:span size="" }} My Content  {{ /bootstrap:span }}
{{ /bootstrap:row }}

Optionally add a class and id.

Togglable tabs View Twitter bootstrap docs

Add quick, dynamic tab functionality to transition through panes of local content.

{{ bootstrap:tabheaderwrap }}
    {{ bootstrap:tabheader title="Tab One" active="true" }}
    {{ bootstrap:tabheader title="Tab Two" }}
    {{ bootstrap:tabheader title="Tab Three" }}
{{ /bootstrap:tabheaderwrap }}

{{ bootstrap:tabcontentwrap }}
    {{ bootstrap:tabcontent title="Tab One" active="true" }}
        Tab one contents goes here
    {{ /bootstrap:tabcontent }}
    {{ bootstrap:tabcontent title="Tab Two" }} 
        Tab two contents goes here
    {{ /bootstrap:tabcontent }}
    {{ bootstrap:tabcontent title="Tab Three" }}
        Tab three contents goes here
    {{ /bootstrap:tabcontent  }}
{{ /bootstrap:tabcontentwrap  }}

Optionally add a class or id on any tag.

Well View Twitter bootstrap docs

Use the well as a simple effect on an element to give it an inset effect.

{{ bootstrap:well }} My Content  {{ /bootstrap:well }}

Optionally add a class and id.