Index of /wp-content/plugins/bootstrap-3-shortcodes/includes/help/

<h1 id="bootstrap-3-shortcodes-for-wordpress">Bootstrap 3 Shortcodes for WordPress</h1> <p><img src="https://img.shields.io/wordpress/plugin/r/bootstrap-3-shortcodes.svg" alt="WordPress Rating"> <img src="https://img.shields.io/wordpress/plugin/dt/bootstrap-3-shortcodes.svg" alt="WordPress Downloads"></p> <p>WordPress plugin that provides shortcodes for easier use of the Bootstrap styles and components in your content.</p> <p><strong>Bootstrap 3 Shortcodes for WordPress</strong> creates a simple, out of the way button just above the WordPress TinyMCE editor (next to the &quot;Add Media&quot; button) which pops up the plugin&#39;s documentation and shortcode examples for reference and handy &quot;Insert Example&quot; 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!</p> <h2 id="requirements">Requirements</h2> <p><img src="https://img.shields.io/wordpress/v/bootstrap-3-shortcodes.svg" alt="Tested in WordPress"> <img src="https://img.shields.io/badge/PHP-5.3%2B-blue.svg" alt="PHP 5.3+"> <img src="https://img.shields.io/badge/Bootstrap-3.3.x-6f5499.svg" alt="Bootstrap"></p> <p>This plugin won&#39;t do anything if you don&#39;t have WordPress theme built with the <a href="http://getbootstrap.com/">Bootstrap</a> framework. <strong>This plugin does not include the Bootstrap framework</strong>.</p> <p>The plugin is tested to work with <code>Bootstrap 3</code> and <code>WordPress 4.5</code> and <strong>requires PHP 5.3 or later</strong>.</p> <h2 id="shortcode-reference">Shortcode Reference</h2> <h3 id="css">CSS</h3> <ul> <li><a href="#grid">Grid</a></li> <li><a href="#lead-body-copy">Lead body copy</a></li> <li><a href="#emphasis-classes">Emphasis classes</a></li> <li><a href="#code">Code</a></li> <li><a href="#tables">Tables</a></li> <li><a href="#buttons">Buttons</a></li> <li><a href="#images">Images</a></li> <li><a href="#responsive-embeds">Responsive Embeds</a></li> <li><a href="#responsive-utilities">Responsive utilities</a></li> </ul> <h3 id="components">Components</h3> <ul> <li><a href="#icons">Icons</a></li> <li><a href="#button-groups">Button Groups</a></li> <li><a href="#button-dropdowns">Button Dropdowns</a></li> <li><a href="#navs">Navs</a></li> <li><a href="#breadcrumbs">Breadcrumbs</a></li> <li><a href="#labels">Labels</a></li> <li><a href="#badges">Badges</a></li> <li><a href="#jumbotron">Jumbotron</a></li> <li><a href="#page-header">Page Header</a></li> <li><a href="#thumbnails">Thumbnails</a></li> <li><a href="#alerts">Alerts</a></li> <li><a href="#progress-bars">Progress Bars</a></li> <li><a href="#media-objects">Media Objects</a></li> <li><a href="#list-groups">List Groups</a></li> <li><a href="#panels">Panels</a></li> <li><a href="#wells">Wells</a></li> </ul> <h3 id="javascript">JavaScript</h3> <ul> <li><a href="#tabs">Tabs</a></li> <li><a href="#tooltip">Tooltip</a></li> <li><a href="#popover">Popover</a></li> <li><a href="#collapse">Collapse</a></li> <li><a href="#carousel">Carousel</a></li> <li><a href="#modal">Modal</a></li> </ul> <h1 id="usage">Usage</h1> <h3 id="css">CSS</h3> <h3 id="grid">Grid</h3> <pre><code>[row] [column md=&quot;6&quot;] ... [/column] [column md=&quot;6&quot;] ... [/column] [/row] </code></pre><p>The container component is also supported in case your theme doesn&#39;t include a container.</p> <pre><code>[container] [row] [column md=&quot;6&quot;] ... [/column] [column md=&quot;6&quot;] ... [/column] [/row] [/container] </code></pre><p>The container-fluid component is supported as a discrete shortcode for cases where you want to wrap a container.</p> <pre><code>[container-fluid] [container] [row] [column md=&quot;6&quot;] ... [/column] [column md=&quot;6&quot;] ... [/column] [/row] [/container] [/container-fluid] </code></pre><h4 id="-container-parameters">[container] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>fluid</td> <td>Is the container fluid? (see Bootstrap documentation for details)</td> <td>optional</td> <td>true, false</td> <td>false</td> </tr> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <h4 id="-container-fluid-parameters">[container-fluid] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <h4 id="-row-parameters">[row] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <h4 id="-column-parameters">[column] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>xs</td> <td>Size of column on extra small screens (less than 768px)</td> <td>optional</td> <td>1-12</td> <td>false</td> </tr> <tr> <td>sm</td> <td>Size of column on small screens (greater than 768px)</td> <td>optional</td> <td>1-12</td> <td>false</td> </tr> <tr> <td>md</td> <td>Size of column on medium screens (greater than 992px)</td> <td>optional</td> <td>1-12</td> <td>false</td> </tr> <tr> <td>lg</td> <td>Size of column on large screens (greater than 1200px)</td> <td>optional</td> <td>1-12</td> <td>false</td> </tr> <tr> <td>offset_xs</td> <td>Offset on extra small screens</td> <td>optional</td> <td>1-12</td> <td>false</td> </tr> <tr> <td>offset_sm</td> <td>Offset on small screens</td> <td>optional</td> <td>1-12</td> <td>false</td> </tr> <tr> <td>offset_md</td> <td>Offset on column on medium screens</td> <td>optional</td> <td>1-12</td> <td>false</td> </tr> <tr> <td>offset_lg</td> <td>Offset on column on large screens</td> <td>optional</td> <td>1-12</td> <td>false</td> </tr> <tr> <td>pull_xs</td> <td>Pull on extra small screens</td> <td>optional</td> <td>1-12</td> <td>false</td> </tr> <tr> <td>pull_sm</td> <td>Pull on small screens</td> <td>optional</td> <td>1-12</td> <td>false</td> </tr> <tr> <td>pull_md</td> <td>Pull on column on medium screens</td> <td>optional</td> <td>1-12</td> <td>false</td> </tr> <tr> <td>pull_lg</td> <td>Pull on column on large screens</td> <td>optional</td> <td>1-12</td> <td>false</td> </tr> <tr> <td>push_xs</td> <td>Push on extra small screens</td> <td>optional</td> <td>1-12</td> <td>false</td> </tr> <tr> <td>push_sm</td> <td>Push on small screens</td> <td>optional</td> <td>1-12</td> <td>false</td> </tr> <tr> <td>push_md</td> <td>Push on column on medium screens</td> <td>optional</td> <td>1-12</td> <td>false</td> </tr> <tr> <td>push_lg</td> <td>Push on column on large screens</td> <td>optional</td> <td>1-12</td> <td>false</td> </tr> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <p><a href="http://getbootstrap.com/css/#grid">Bootstrap grid documentation</a>.</p> <hr> <h3 id="lead-body-copy">Lead body copy</h3> <pre><code>[lead] ... [/lead] </code></pre><h4 id="-lead-parameters">[lead] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <p><a href="http://getbootstrap.com/css/#type-body-copy">Bootstrap body copy documentation</a></p> <hr> <h3 id="emphasis-classes">Emphasis classes</h3> <pre><code>[emphasis type=&quot;success&quot;] ... [/emphasis] </code></pre><h4 id="-emphasis-parameters">[emphasis] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>type</td> <td>The type of label to display</td> <td>required</td> <td>muted, primary, success, info, warning, danger</td> <td>muted</td> </tr> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <p><a href="http://getbootstrap.com/css/#type-emphasis">Bootstrap emphasis classes documentation</a></p> <hr> <h3 id="code">Code</h3> <pre><code>[code] ... [/code] </code></pre><h4 id="-code-parameters">[code] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>inline</td> <td>Display inline code</td> <td>optional</td> <td>true, false</td> <td>false</td> </tr> <tr> <td>scrollable</td> <td>Set a max height of 350px and provide a scroll bar. Not usable with inline=&quot;true&quot;.</td> <td>optional</td> <td>true, false</td> <td>false</td> </tr> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <p><a href="http://getbootstrap.com/css/#code">Bootstrap code documentation</a></p> <hr> <h3 id="tables">Tables</h3> <pre><code>[table-wrap bordered=&quot;true&quot; striped=&quot;true&quot;] Standard HTML table code goes here. [/table-wrap] </code></pre><h4 id="-table-wrap-parameters">[table-wrap] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>bordered</td> <td>Set &quot;bordered&quot; table style (see Bootstrap documentation)</td> <td>optional</td> <td>true, false</td> <td>false</td> </tr> <tr> <td>striped</td> <td>Set &quot;striped&quot; table style (see Bootstrap documentation)</td> <td>optional</td> <td>true, false</td> <td>false</td> </tr> <tr> <td>hover</td> <td>Set &quot;hover&quot; table style (see Bootstrap documentation)</td> <td>optional</td> <td>true, false</td> <td>false</td> </tr> <tr> <td>condensed</td> <td>Set &quot;condensed&quot; table style (see Bootstrap documentation)</td> <td>optional</td> <td>true, false</td> <td>false</td> </tr> <tr> <td>responsive</td> <td>Wrap the table in a div with the class &quot;table-respsonve&quot; (see Bootstrap documentation)</td> <td>optional</td> <td>true, false</td> <td>false</td> </tr> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <p><a href="http://getbootstrap.com/css/#tables">Bootstrap table documentation</a></p> <hr> <h3 id="buttons">Buttons</h3> <pre><code>[button type=&quot;success&quot; size=&quot;lg&quot; link=&quot;#&quot;] ... [/button] </code></pre><h4 id="-button-parameters">[button] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>type</td> <td>The type of the button</td> <td>optional</td> <td>default, primary, success, info, warning, danger, link</td> <td>default</td> </tr> <tr> <td>size</td> <td>The size of the button</td> <td>optional</td> <td>xs, sm, lg</td> <td>none</td> </tr> <tr> <td>block</td> <td>Whether the button should be a block-level button</td> <td>optional</td> <td>true, false</td> <td>false</td> </tr> <tr> <td>dropdown</td> <td>Whether the button triggers a dropdown menu (see <a href="#button-dropdowns">Button Dropdowns</a>)</td> <td>optional</td> <td>true, false</td> <td>false</td> </tr> <tr> <td>active</td> <td>Apply the &quot;active&quot; style</td> <td>optional</td> <td>true, false</td> <td>false</td> </tr> <tr> <td>disabled</td> <td>Whether the button be disabled</td> <td>optional</td> <td>true, false</td> <td>false</td> </tr> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>link</td> <td>The url you want the button to link to</td> <td>optional</td> <td>any valid link</td> <td>none</td> </tr> <tr> <td>target</td> <td>Target for the link</td> <td>optional</td> <td>any valid target</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <p><a href="http://getbootstrap.com/css/#buttons">Bootstrap button documentation</a></p> <hr> <h3 id="images">Images</h3> <pre><code>[img type=&quot;circle&quot; responsive=&quot;true&quot;] ... [/img] </code></pre><p>Wrap any number of HTML image tags or images inserted via the WordPress media manager.</p> <h4 id="-img-parameters">[img] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>type</td> <td>The effect to apply to wrapped images</td> <td>optional</td> <td>rounded, circle, thumbnail</td> <td>false</td> </tr> <tr> <td>responsive</td> <td>Make the wrapped images responsive</td> <td>optional</td> <td>true, false</td> <td>false</td> </tr> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <p><a href="http://getbootstrap.com/css/#images">Bootstrap images documentation</a></p> <hr> <h3 id="responsive-embeds">Responsive Embeds</h3> <pre><code>[embed-responsive ratio=&quot;16by9&quot;] ... [/embed-responsive] </code></pre><p>Wrap <code>&lt;iframe&gt;</code>, <code>&lt;embed&gt;</code>, <code>&lt;video&gt;</code>, and <code>&lt;object&gt;</code> elements to make them responsive.</p> <h4 id="-responsive-embed-parameters">[responsive-embed] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>ratio</td> <td>Maintain the aspect ratio of the embed</td> <td>optional</td> <td>16by9, 4by3</td> <td>false</td> </tr> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <p><a href="http://getbootstrap.com/components/#responsive-embed">Bootstrap responsive embed documentation</a></p> <hr> <h3 id="responsive-utilities">Responsive Utilities</h3> <pre><code>[responsive block=&quot;lg md&quot; hidden=&quot;sn xs&quot;] ... [/responsive] </code></pre><h4 id="-reponsive-parameters">[reponsive] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>visible</td> <td>Sizes at which this element is visible (separated by spaces) <strong>NOTE: as of Bootstrap 3.2 &quot;visible&quot; is deprecated in favor of &quot;block&quot;, &quot;inline&quot;, and &quot;inline-block&quot; (see below)</strong></td> <td>optional</td> <td>xs, sm, md, lg</td> <td>false</td> </tr> <tr> <td>hidden</td> <td>Sizes at which this element is hidden (separated by spaces)</td> <td>optional</td> <td>xs, sm, md, lg</td> <td>false</td> </tr> <tr> <td>block</td> <td>Sizes at which this element is visible and displayed as a &quot;block&quot; element (separated by spaces)</td> <td>optional</td> <td>xs, sm, md, lg</td> <td>false</td> </tr> <tr> <td>inline</td> <td>Sizes at which this element is visible and displayed as an &quot;inline&quot; element (separated by spaces)</td> <td>optional</td> <td>xs, sm, md, lg</td> <td>false</td> </tr> <tr> <td>inline_block</td> <td>Sizes at which this element is visible and displayed as an &quot;inline-block&quot; element (separated by spaces)</td> <td>optional</td> <td>xs, sm, md, lg</td> <td>false</td> </tr> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <p><a href="http://getbootstrap.com/css/#responsive-utilities">Bootstrap responsive utilities documentation</a></p> <hr> <h3 id="components">Components</h3> <h3 id="icons">Icons</h3> <pre><code>[icon type=&quot;arrow-right&quot;] </code></pre><h4 id="-icon-parameters">[icon] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>type</td> <td>The type of icon you want to display</td> <td>required</td> <td>See Bootstrap docs</td> <td>none</td> </tr> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <p><a href="http://getbootstrap.com/components/#glyphicons">Bootstrap Glyphicons documentation</a></p> <hr> <h3 id="button-groups">Button Groups</h3> <h4 id="basic-example">Basic example</h4> <pre><code>[button-group size=&quot;lg&quot; justified=&quot;&quot; vertical=&quot;&quot;] [button link=&quot;#&quot;] ... [/button] [button link=&quot;#&quot;] ... [/button] [button link=&quot;#&quot;] ... [/button] [/button-group] </code></pre><h4 id="button-toolbar">Button toolbar</h4> <pre><code>[button-toolbar] [button-group] [button link=&quot;#&quot;] ... [/button] [button link=&quot;#&quot;] ... [/button] [button link=&quot;#&quot;] ... [/button] [/button-group] [button-group] [button link=&quot;#&quot;] ... [/button] [button link=&quot;#&quot;] ... [/button] [button link=&quot;#&quot;] ... [/button] [/button-group] [button-group] [button link=&quot;#&quot;] ... [/button] [/button-group] [/button-toolbar] </code></pre><h4 id="-button-group-parameters">[button-group] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>size</td> <td>The size of the button group</td> <td>optional</td> <td>xs, sm, lg</td> <td>none</td> </tr> <tr> <td>justified</td> <td>Whether button group is justified</td> <td>optional</td> <td>true, false</td> <td>false</td> </tr> <tr> <td>vertical</td> <td>Whether button group is vertical</td> <td>optional</td> <td>true, false</td> <td>false</td> </tr> <tr> <td>dropup</td> <td><strong>Must correspond with the use of [dropdown]</strong></td> <td>optional</td> <td>true, false</td> <td>false</td> </tr> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <h4 id="-button-toolbar-parameters">[button-toolbar] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <p><a href="http://getbootstrap.com/css/#btn-groups">Bootstrap button groups documentation</a></p> <hr> <h3 id="button-dropdowns">Button Dropdowns</h3> <p>Button Dropdowns can be accomplished by combining the [button-group] shortcode, the &quot;data&quot; parameters of the [button] shortcode, and [dropdown] shortcode as follows.</p> <h4 id="single-button-dropdowns">Single button dropdowns</h4> <pre><code>[button-group] [button link=&quot;#&quot; dropdown=&quot;true&quot; data=&quot;toggle,dropdown&quot;] ... [caret][/button] [dropdown] [dropdown-header] ... [/dropdown-header] [dropdown-item link=&quot;#&quot;] ... [/dropdown-item] [dropdown-item link=&quot;#&quot;] ... [/dropdown-item] [dropdown-item link=&quot;#&quot;] ... [/dropdown-item] [divider] [dropdown-item link=&quot;#&quot;] ... [/dropdown-item] [/dropdown] [/button-group] </code></pre><h4 id="split-button-dropdowns">Split button dropdowns</h4> <pre><code>[button-group] [button link=&quot;#&quot;] ... [/button] [button dropdown=&quot;true&quot; data=&quot;toggle,dropdown&quot;][caret][/button] [dropdown] [dropdown-item link=&quot;#&quot;] ... [/dropdown-item] [divider] [dropdown-item link=&quot;#&quot;] ... [/dropdown-item] [/dropdown] [/button-group] </code></pre><h4 id="dropup-variation">Dropup variation</h4> <pre><code>[button-group dropup=&quot;true&quot;] [button link=&quot;#&quot;] ... [/button] [button dropdown=&quot;true&quot; data=&quot;toggle,dropdown&quot;][caret][/button] [dropdown] [dropdown-item link=&quot;#&quot;] ... [/dropdown-item] [divider] [dropdown-item link=&quot;#&quot;] ... [/dropdown-item] [/dropdown] [/button-group] </code></pre><h4 id="-dropdown-parameters">[dropdown] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <h4 id="-dropdown-item-parameters">[dropdown-item] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>link</td> <td>The url you want the dropdown-item to link to</td> <td>optional</td> <td>any valid link</td> <td>none</td> </tr> <tr> <td>disabled</td> <td>Whether this menu-item is disabled</td> <td>optional</td> <td>true, false</td> <td>false</td> </tr> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <h4 id="-dropdown-header-parameters">[dropdown-header] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <h4 id="-caret-parameters">[caret] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <h4 id="-divider-parameters">[divider] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <p><a href="http://getbootstrap.com/components/#btn-dropdowns">Bootstrap button dropdowns documentation</a></p> <hr> <h3 id="navs">Navs</h3> <pre><code>[nav type=&quot;pills&quot;] [nav-item link=&quot;#&quot;] ... [/nav-item] [nav-item link=&quot;#&quot;] ... [/nav-item] [nav-item link=&quot;#&quot;] ... [/nav-item] [/nav] </code></pre><h4 id="nav-with-dropdowns">Nav with dropdowns</h4> <pre><code>[nav type=&quot;pills&quot;] [nav-item link=&quot;#&quot; active=&quot;true&quot;] ... [/nav-item] [nav-item dropdown=&quot;true&quot; link=&quot;#&quot;] ... [caret] [dropdown] [dropdown-item link=&quot;#&quot;] ... [/dropdown-item] [dropdown-item link=&quot;#&quot;] ... [/dropdown-item] [/dropdown] [/nav-item] [/nav] </code></pre><h4 id="-nav-parameters">[nav] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>type</td> <td>The type of nav</td> <td>required</td> <td>tabs, pills</td> <td>tabs</td> </tr> <tr> <td>stacked</td> <td>Whether the nav is stacked (should be used with &quot;pills&quot; type</td> <td>optional</td> <td>true, false</td> <td>false</td> </tr> <tr> <td>justified</td> <td>Whether the nav is justified</td> <td>optional</td> <td>true, false</td> <td>false</td> </tr> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <h4 id="-nav-item-parameters">[nav-item] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>link</td> <td>The url you want the dropdown-item to link to</td> <td>optional</td> <td>any valid link</td> <td>none</td> </tr> <tr> <td>active</td> <td>Whether the item has the &quot;active&quot; style applied</td> <td>optional</td> <td>true, false</td> <td>false</td> </tr> <tr> <td>disabled</td> <td>Whether the item is disabled</td> <td>optional</td> <td>true, false</td> <td>false</td> </tr> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <p><a href="http://getbootstrap.com/components/#nav">Bootstrap button navs documentation</a></p> <hr> <h3 id="breadcrumbs">Breadcrumbs</h3> <pre><code>[breadcrumb] [breadcrumb-item link=&quot;#&quot;] ... [/breadcrumb-item] [breadcrumb-item link=&quot;#&quot;] ... [/breadcrumb-item] [breadcrumb-item link=&quot;#&quot;] ... [/breadcrumb-item] [/breadcrumb] </code></pre><h4 id="-breadcrumb-parameters">[breadcrumb] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <h4 id="-breadcrumb-item-parameters">[breadcrumb-item] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>link</td> <td>The url you want the breadcrumb-item to link to</td> <td>optional</td> <td>any valid link</td> <td>none</td> </tr> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <p><a href="http://getbootstrap.com/components/#breadcrumbs">Bootstrap breadcrumbs documentation</a></p> <hr> <h3 id="labels">Labels</h3> <pre><code>[label type=&quot;success&quot;] ... [/label] </code></pre><h4 id="-label-parameters">[label] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>type</td> <td>The type of label to display</td> <td>optional</td> <td>default, primary, success, info, warning, danger</td> <td>default</td> </tr> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <p><a href="http://getbootstrap.com/components/#labels">Bootstrap label documentation</a></p> <hr> <h3 id="badges">Badges</h3> <pre><code>[badge right=&quot;true&quot;] ... [/badge] </code></pre><h4 id="-badge-parameters">[badge] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>right</td> <td>Whether the badge should align to the right of its container</td> <td>optional</td> <td>true, false</td> <td>false</td> </tr> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <p><a href="http://getbootstrap.com/components/#badges">Bootstrap badges documentation</a></p> <hr> <h3 id="jumbotron">Jumbotron</h3> <pre><code>[jumbotron title=&quot;My Jumbotron&quot;] ... [/jumbotron] </code></pre><h4 id="-jumbotron-parameters">[jumbotron] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>title</td> <td>The jumbotron title</td> <td>optional</td> <td>Any text</td> <td>none</td> </tr> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <p><a href="http://getbootstrap.com/components/#jumbotron">Bootstrap jumbotron documentation</a></p> <hr> <h3 id="page-header">Page Header</h3> <pre><code>[page-header] ... [/page-header] </code></pre><p>Automatically inserts H1 tag if not present</p> <h4 id="-page-header-parameters">[page-header] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <p><a href="http://getbootstrap.com/components/#page-header">Bootstrap page-header documentation</a></p> <hr> <h3 id="thumbnails">Thumbnails</h3> <pre><code>[thumbnail] ... [/thumbnail] [thumbnail] ... [/thumbnail] [thumbnail] ... [/thumbnail] </code></pre><h4 id="-thumbnail-parameters">[thumbnail] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>has_content</td> <td>Set to &quot;true&quot; if this thumbnail contains more than just an image or linked image as in <a href="http://getbootstrap.com/components/#thumbnails-custom-content">Bootstrap&#39;s thumbnail documentation</a>.</td> <td>optional</td> <td>true, false</td> <td>false</td> </tr> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <p><a href="http://getbootstrap.com/components/#thumbnails">Bootstrap thumbnails documentation</a></p> <hr> <h3 id="alerts">Alerts</h3> <pre><code>[alert type=&quot;success&quot;] ... [/alert] </code></pre><h4 id="-alert-parameters">[alert] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>type</td> <td>The type of the alert</td> <td>required</td> <td>success, info, warning, danger</td> <td>success</td> </tr> <tr> <td>dismissable</td> <td>If the alert should be dismissable</td> <td>optional</td> <td>true, false</td> <td>false</td> </tr> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <p><a href="http://getbootstrap.com/components/#alerts">Bootstrap alert documentation</a></p> <hr> <h3 id="progress-bars">Progress Bars</h3> <pre><code>[progress striped=&quot;true&quot;] [progress-bar percent=&quot;50&quot;] [progress-bar percent=&quot;25&quot; type=&quot;success&quot;] [/progress] </code></pre><h4 id="-progress-parameters">[progress] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>striped</td> <td>Whether enclosed progress bars will be striped</td> <td>optional</td> <td>true, false</td> <td>false</td> </tr> <tr> <td>animated</td> <td>Whether enclosed progress bars will be animated</td> <td>optional</td> <td>true, false</td> <td>false</td> </tr> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <h4 id="-progress-bar-parameters">[progress-bar] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>percent</td> <td>The percentage amount to show in the progress bar</td> <td>required</td> <td>any number between 0 and 100</td> <td>false</td> </tr> <tr> <td>label</td> <td>Whether to show the percentage as a text label inside the bar</td> <td>optional</td> <td>true, false</td> <td>false</td> </tr> <tr> <td>type</td> <td>The type of the progress bar</td> <td>optional</td> <td>default, primary, success, info, warning, danger</td> <td>default</td> </tr> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <p><a href="http://getbootstrap.com/components/#progress">Bootstrap progress bars documentation</a></p> <hr> <h3 id="media-objects">Media Objects</h3> <pre><code>[media] [media-object media=&quot;left&quot;] ... [/media-object] [media-body title=&quot;Testing&quot;] ... [/media-body] [/media] </code></pre><h4 id="-media-parameters">[media] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <h4 id="-media-object-parameters">[media-object] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>media</td> <td>Whether the image pulls to the left or right</td> <td>optional</td> <td>left, right</td> <td>right</td> </tr> <tr> <td>pull</td> <td>Whether the image pulls to the left or right <em>Deprecated, use only if your theme uses Bootstrap 3.2 or earlier</em></td> <td>optional</td> <td>left, right</td> <td>right</td> </tr> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <h4 id="-media-body-parameters">[media-body] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>title</td> <td>The object title</td> <td>required</td> <td>Any text</td> <td>none</td> </tr> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <p><strong>NOTE: media-object should contain an image, or linked image, inserted using the WordPress TinyMCE editor</strong></p> <p><a href="http://getbootstrap.com/components/#media">Bootstrap media objects documentation</a></p> <hr> <h3 id="list-groups">List Groups</h3> <h4 id="basic-example">Basic Example</h4> <pre><code>[list-group] [list-group-item] ... [/list-group-item] [list-group-item] ... [/list-group-item] [list-group-item] ... [/list-group-item] [/list-group] </code></pre><h4 id="linked-items">Linked Items</h4> <pre><code>[list-group linked=&quot;true&quot;] [list-group-item link=&quot;#&quot; active=&quot;true&quot;] ... [/list-group-item] [list-group-item link=&quot;#&quot;] ... [/list-group-item] [list-group-item link=&quot;#&quot;] ... [/list-group-item] [/list-group] </code></pre><h4 id="custom-content">Custom Content</h4> <pre><code>[list-group linked=&quot;true&quot;] [list-group-item link=&quot;#&quot; active=&quot;true&quot;] [list-group-item-heading]...[/list-group-item-heading] [list-group-item-text]...[/list-group-item-text] [/list-group-item] [list-group-item link=&quot;#&quot;] [list-group-item-heading]...[/list-group-item-heading] [list-group-item-text]...[/list-group-item-text] [/list-group-item] [list-group-item link=&quot;#&quot;] [list-group-item-heading]...[/list-group-item-heading] [list-group-item-text]...[/list-group-item-text] [/list-group-item] [/list-group] </code></pre><h4 id="-list-group-parameters">[list-group] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>linked</td> <td>Whether this is a linked list group, or a standard one</td> <td>optional</td> <td>true, false</td> <td>false</td> </tr> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <h4 id="-list-group-item-parameters">[list-group-item] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>link</td> <td>The url you want the list item to link to <strong>Must correspond with the &quot;linked&quot; parameter in [list-group]</strong></td> <td>optional</td> <td>any text</td> <td>false</td> </tr> <tr> <td>type</td> <td>The type of the list-group-item</td> <td>optional</td> <td>primary, success, info, warning, danger, link</td> <td>none</td> </tr> <tr> <td>active</td> <td>Whether the item has the &quot;active&quot; style applied</td> <td>optional</td> <td>true, false</td> <td>false</td> </tr> <tr> <td>target</td> <td>Target for the link</td> <td>optional</td> <td>any valid target</td> <td>none</td> </tr> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <h4 id="-list-group-item-heading-parameters">[list-group-item-heading] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <h4 id="-list-group-item-text-parameters">[list-group-item-text] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <p><a href="http://getbootstrap.com/components/#list-group">Bootstrap list groups documentation</a></p> <hr> <h3 id="panels">Panels</h3> <pre><code>[panel type=&quot;info&quot; heading=&quot;Panel Title&quot; footer=&quot;Footer text&quot;] ... [/panel] </code></pre><h4 id="-panel-parameters">[panel] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>type</td> <td>The type of the panel</td> <td>optional</td> <td>default, primary, success, info, warning, danger, link</td> <td>default</td> </tr> <tr> <td>heading</td> <td>The panel heading</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>title</td> <td>Whether the panel heading should have a title tag around it</td> <td>optional</td> <td>true, false</td> <td>false</td> </tr> <tr> <td>footer</td> <td>The panel footer text if desired</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <p><a href="http://getbootstrap.com/components/#panels">Bootstrap panels documentation</a></p> <hr> <h3 id="wells">Wells</h3> <pre><code>[well size=&quot;sm&quot;] ... [/well] </code></pre><h4 id="-well-parameters">[well] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>size</td> <td>Modifies the amount of padding inside the well</td> <td>optional</td> <td>sm, lg</td> <td>normal</td> </tr> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <p><a href="http://getbootstrap.com/components/#wells">Bootstrap wells documentation</a></p> <hr> <h3 id="javascript">Javascript</h3> <h3 id="tabs">Tabs</h3> <pre><code>[tabs type=&quot;tabs&quot;] [tab title=&quot;Home&quot; active=&quot;true&quot;] ... [/tab] [tab title=&quot;Profile&quot;] ... [/tab] [tab title=&quot;Messages&quot;] ... [/tab] [/tabs] </code></pre><h4 id="-tabs-parameters">[tabs] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>type</td> <td>The type of nav</td> <td>required</td> <td>tabs, pills</td> <td>tabs</td> </tr> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <h4 id="-tab-parameters">[tab] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>title</td> <td>The title of the tab</td> <td>required</td> <td>any text</td> <td>false</td> </tr> <tr> <td>active</td> <td>Whether this tab should be &quot;active&quot; or selected</td> <td>optional</td> <td>true, false</td> <td>false</td> </tr> <tr> <td>fade</td> <td>Whether to use the &quot;fade&quot; effect when showing this tab</td> <td>optional</td> <td>true, false</td> <td>false</td> </tr> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <p><a href="http://getbootstrap.com/javascript/#tabs">Bootstrap tabs documentation</a></p> <hr> <h3 id="tooltip">Tooltip</h3> <pre><code>[tooltip title=&quot;I&#39;m the title&quot; placement=&quot;right&quot;] ... [/tooltip] </code></pre><h4 id="-tooltip-parameters">[tooltip] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>title</td> <td>The text of the tooltip</td> <td>required</td> <td>any text</td> <td>none</td> </tr> <tr> <td>placement</td> <td>The placement of the tooltip</td> <td>optional</td> <td>left, top, bottom, right</td> <td>top</td> </tr> <tr> <td>animation</td> <td>apply a CSS fade transition to the tooltip</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>html</td> <td>Insert HTML into the tooltip</td> <td>optional</td> <td>true, false</td> <td>false</td> </tr> </tbody> </table> <p><a href="http://getbootstrap.com/javascript/#tooltips">Bootstrap tooltip documentation</a></p> <hr> <h3 id="popover">Popover</h3> <pre><code>[popover title=&quot;I&#39;m the title&quot; text=&quot;And here&#39;s some amazing content. It&#39;s very engaging. right?&quot; placement=&quot;right&quot;] ... [/popover] </code></pre><h4 id="-popover-parameters">[popover] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>title</td> <td>The title of the popover</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>text</td> <td>The text of the popover</td> <td>required</td> <td>any text</td> <td>none</td> </tr> <tr> <td>placement</td> <td>The placement of the popover</td> <td>optional</td> <td>left, top, bottom, right</td> <td>top</td> </tr> <tr> <td>animation</td> <td>apply a CSS fade transition to the tooltip</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>html</td> <td>Insert HTML into the tooltip</td> <td>optional</td> <td>true, false</td> <td>false</td> </tr> </tbody> </table> <p><a href="http://getbootstrap.com/javascript/#popovers">Bootstrap popover documentation</a></p> <hr> <h3 id="collapse">Collapse</h3> <h4 id="single-collapse">Single Collapse</h4> <pre><code>[collapse title=&quot;Collapse 1&quot; active=&quot;true&quot;] ... [/collapse] </code></pre><h4 id="set-of-collapsibles">Set of Collapsibles</h4> <pre><code>[collapsibles] [collapse title=&quot;Collapse 1&quot; active=&quot;true&quot;] ... [/collapse] [collapse title=&quot;Collapse 2&quot;] ... [/collapse] [collapse title=&quot;Collapse 3&quot;] ... [/collapse] [/collapsibles] </code></pre><h4 id="-collapsibles-parameters">[collapsibles] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <h4 id="-collapse-parameters">[collapse] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>title</td> <td>The title of the collapsible, visible when collapsed</td> <td>required</td> <td>any text</td> <td>false</td> </tr> <tr> <td>type</td> <td>The type of the panel</td> <td>optional</td> <td>default, primary, success, info, warning, danger, link</td> <td>default</td> </tr> <tr> <td>active</td> <td>Whether the tab is expanded at load time</td> <td>optional</td> <td>true, false</td> <td>false</td> </tr> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <p><a href="http://getbootstrap.com/javascript/#collapse">Bootstrap collapse documentation</a></p> <hr> <h3 id="carousel">Carousel</h3> <pre><code>[carousel] [carousel-item active=&quot;true&quot;] ... [/carousel-item] [carousel-item] ... [/carousel-item] [carousel-item] ... [/carousel-item] [/carousel] </code></pre><p>[carousel-item] wraps an HTML image tag or image inserted via the WordPress editor.</p> <h4 id="-carousel-parameters">[carousel] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>interval</td> <td>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</td> <td>optional</td> <td>any number (in ms) or &quot;false&quot;</td> <td>5000</td> </tr> <tr> <td>wrap</td> <td>Whether the carousel should cycle continuously or have hard stops.</td> <td>optional</td> <td>true, false</td> <td>false</td> </tr> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <h4 id="-carousel-item-parameters">[carousel-item] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>active</td> <td>Whether the item has the &quot;active&quot; style applied. One item MUST be set as active.</td> <td>optional</td> <td>true, false</td> <td>false</td> </tr> <tr> <td>caption</td> <td>This carousel slide&#39;s caption</td> <td>optional</td> <td>Any text</td> <td>none</td> </tr> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <p><a href="http://getbootstrap.com/javascript/#carousel">Bootstrap carousel documentation</a></p> <hr> <h3 id="modal">Modal</h3> <pre><code>[modal text=&quot;This is my modal&quot; title=&quot;Modal Title Goes Here&quot; xclass=&quot;btn btn-primary btn-lg&quot;] ... [modal-footer] [button type=&quot;primary&quot; link=&quot;#&quot; data=&quot;dismiss,modal&quot;]Dismiss[/button] [/modal-footer] [/modal] </code></pre><h4 id="-modal-parameters">[modal] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>text</td> <td>Text of the modal trigger link</td> <td>required</td> <td>any text</td> <td>none</td> </tr> <tr> <td>title</td> <td>Title of the modal popup</td> <td>required</td> <td>any text</td> <td>none</td> </tr> <tr> <td>size</td> <td>Optional modal size</td> <td>optional</td> <td>lg, sm</td> <td>none</td> </tr> <tr> <td>xclass</td> <td>Any extra classes you want to add to the trigger link</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <h4 id="-modal-footer-parameters">[modal-footer] parameters</h4> <table> <thead> <tr> <th>Parameter</th> <th>Description</th> <th>Required</th> <th>Values</th> <th>Default</th> </tr> </thead> <tbody> <tr> <td>xclass</td> <td>Any extra classes you want to add</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> <tr> <td>data</td> <td>Data attribute and value pairs separated by a comma. Pairs separated by pipe (see example at <a href="#button-dropdowns">Button Dropdowns</a>).</td> <td>optional</td> <td>any text</td> <td>none</td> </tr> </tbody> </table> <p><a href="http://getbootstrap.com/javascript/#modals">Bootstrap modal documentation</a></p> <hr>