Complete Bootstrap 4 Shortcodes

WordPress Rating WordPress Downloads

WordPress plugin that provides shortcodes for easier use of the Bootstrap styles and components in your content.

Bootstrap 4 Shortcodes for WordPress creates a simple, out of the way button just above the WordPress TinyMCE editor (next to the "Add Media" button) which pops up the plugin's documentation and shortcode examples for reference and handy "Insert Example" 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!

Requirements

Tested in WordPress PHP 5.3+ Bootstrap

This plugin won't do anything if you don't have WordPress theme built with the Bootstrap framework. This plugin does not include the Bootstrap framework. The icon shortcodes require Font Awesome 5 or better.

The plugin is tested to work with Bootstrap 4.5 and WordPress 5.5 and requires PHP 5.3 or better.

Wordpress is not able to process nested shortcodes - like a card inside a card - correctly; see Wordpress: Nested Shortcodes. Some of the shortcodes have aliases with the extension -outer to allow nesting.

Shortcode Reference

Layout

Components

Content

Utilities

Javascript

Usage

Layout

Grid

The tags [row-outer] and [column-outer] allow nesting of rows and columns.


[row]
    [column md="6"]
        [lorem-ipsum]
    [/column]
    [column md="6"]
        [lorem-ipsum]
    [/column]
[/row]

Nested rows and columns.


[row-outer]
    [column-outer xs="3" class="bg-info"]
        [row]
            [column xs="6"]Col 1.1[/column]
            [column xs="6"]Col 1.2[/column]
        [/row]
    [/column-outer]
    [column-outer xs="6" class="bg-success"]
        [row]
            [column xs="6"]Col 2.1[/column]
            [column xs="6"]Col 2.2[/column]
        [/row]
    [/column-outer]
    [column-outer xs="3" class="bg-danger"]
        [row]
            [column xs="6"]Col 3.1[/column]
            [column xs="6"]Col 3.2[/column]
        [/row]
    [/column-outer]
[/row-outer]

The container component is also supported in case your theme doesn't include a container.


[container]
    [row]
        [column md="6"]
            [lorem-ipsum]
        [/column]
        [column md="6"]
            [lorem-ipsum]
        [/column]
    [/row]
[/container]

The container-fluid component is supported as a discrete shortcode for cases where you want to wrap a container.


[container-fluid]
    [container]
        [row]
            [column md="6"]
                [lorem-ipsum]
            [/column]
            [column md="6"]
                [lorem-ipsum]
            [/column]
        [/row]
    [/container]
[/container-fluid]

[container] parameters

Parameter Description Required Values Default
fluid Create a full width container, spanning the entire width of the viewport. (see Bootstrap documentation for details) optional 🚩 (flag)
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. Example: data="columns,3|index,1" expands to data-columns="3" data-index="1". optional any text none

[container-fluid] parameters

Parameter Description Required Values Default
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters). optional any text none

[row] parameters

Parameter Description Required Values Default
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

[column] parameters

Parameter Description Required Values Default
xs Size of column on extra small screens (less than 576px) optional 1-12 false
sm Size of column on small screens (greater than 576px) optional 1-12 false
md Size of column on medium screens (greater than 768px) optional 1-12 false
lg Size of column on large screens (greater than 992px) optional 1-12 false
xl Size of column on extra 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
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

Bootstrap grid documentation.

Responsive Embeds


[embed-responsive ratio="16by9"]  [/embed-responsive]

Wrap <iframe>, <embed>, <video>, and <object> elements to make them responsive.

[responsive-embed] parameters

Parameter Description Required Values Default
ratio Maintain the aspect ratio of the embed optional 1by1, 4by3, 16by9, 21by9 false
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

Bootstrap responsive embed documentation

Responsive Utilities


[responsive block="xl lg md" hidden="sm xs"] [lorem-ipsum] [/responsive]

[reponsive] parameters

Parameter Description Required Values Default
hidden Sizes at which this element is hidden (separated by spaces) optional xs, sm, md, lg, xl false
block Sizes at which this element is visible and displayed as a "block" element (separated by spaces) optional xs, sm, md, lg, xl false
inline Sizes at which this element is visible and displayed as an "inline" element (separated by spaces) optional xs, sm, md, lg, xl false
inline_block Sizes at which this element is visible and displayed as an "inline-block" element (separated by spaces) optional xs, sm, md, lg, xl false
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

Bootstrap display properties documentation

Components

Cards


[card]
  [list-group]
    [list-group-item]Cras justo odio[/list-group-item]
    [list-group-item]Dapibus ac facilisis in[/list-group-item]
    [list-group-item]Vestibulum at eros[/list-group-item]
  [/list-group]
[/card]
Kitchen sink

[card]
  [card-img top]
    [img-gen bg="f00" text=" " class="img-fluid"]
  [/card-img]
  [card-body]
    [card-title]
      Card Title
    [/card-title]
      Some quick example text to build on the card title and make up the bulk of the card's content.
  [/card-body]
  [list-group flush]
    [list-group-item]Cras justo odio[/list-group-item]
    [list-group-item]Dapibus ac facilisis in[/list-group-item]
    [list-group-item]Vestibulum at eros[/list-group-item]
  [/list-group]
  [card-body]
    <a href="#">Lorem Ipsup</a> <a href="#">Dolor Sit</a>
  [/card-body]
[/card]
Card with image cap

Image caps are supported with the [card-img] shortcode and the top or bottom flag.


[card]
  [card-img top]
    [img-gen bg="f00"  text=" " class="img-fluid"]
  [/card-img]
  [card-body]
    [card-title]
      Card Title
    [/card-title]
    Lorem ipsum dolor sit.
  [/card-body]
[/card]
Card with image overlay

Image overlay cards are supported with the [card-img-overlay] shortcode.


[card]
  [card-img]
    [img-gen bg="f00" text=" " class="img-fluid"]
  [/card-img]
  [card-img-overlay]
    [card-title]
      Card Title
    [/card-title]
    Lorem ipsum dolor sit.
  [/card-img-overlay]
[/card]
Card with Header and Footer

Card header and card footers are supported with the [card-header] and [card-footer] shortcodes.


[card]
  [card-header]
    Example Header
  [/card-header]
  [card-body]
    [card-title]
      Card Title
    [/card-title]
    Lorem ipsum dolor sit.
  [/card-body]
  [card-footer]
    Example footer.
  [/card-footer]
[/card]
Card group

Use card groups to render cards as a single, attached element with equal width and height columns.


[card-group]
  [card]
    [card-body]
      [card-title]
        Card Title
      [/card-title]
      Lorem ipsum dolor sit.
    [/card-body]
  [/card]
  [card]
    [card-body]
      [card-title]
        Card Title
      [/card-title]
      Cras justo odio.
    [/card-body]
  [/card]
  [card]
    [card-body]
      [card-title]
        Card Title
      [/card-title]
      Dapibus ac facilisis in.
    [/card-body]
  [/card]
[/card-group]
Card deck

Use a card deck for a set of equal width and height cards that aren’t attached to one another.


[card-deck]
  [card]
    [card-body]
      [card-title]
        Card Title
      [/card-title]
      Lorem ipsum dolor sit.
    [/card-body]
  [/card]
  [card]
    [card-body]
      [card-title]
        Card Title
      [/card-title]
      Cras justo odio.
    [/card-body]
  [/card]
  [card]
    [card-body]
      [card-title]
        Card Title
      [/card-title]
      Dapibus ac facilisis in.
    [/card-body]
  [/card]
[/card-deck]
Card columns

Cards can be organized into Masonry-like columns with just CSS by wrapping them in [card-columns]


[card-columns]
  [card]
    [card-body]
      [card-title]
        Card Title
      [/card-title]
      Lorem ipsum dolor sit.
    [/card-body]
  [/card]
  [card]
    [card-body]
      [card-title]
        Card Title
      [/card-title]
      Cras justo odio.
    [/card-body]
  [/card]
  [card]
    [card-body]
      [card-title]
        Card Title
      [/card-title]
      Dapibus ac facilisis in.
    [/card-body]
  [/card]
[/card-columns]

[card] parameters

The tag [card-outer] allows to nest cards inside a card.

Parameter Description Required Values Default
show Show the collapsible card content by default. optional 🚩 (flag)
class Any extra classes you want to add. optional any text
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. optional any text

[card-body] parameters

Note: Any p, a or blockquote tags within [card-body] will automatically receive card-text, card-link or card-bodyquote classes respectively.

The tag [card-body-outer] allows to nest cards inside a card body.

Parameter Description Required Values Default
class Any extra classes you want to add. optional any text
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. optional any text

[card-title] parameters

Note: [card-title] should contain a heading tag (h1, h2, h3, h4, h5, or h6), inserted using the WordPress editor. If a heading tag is not added h4 will be inserted automatically.
Parameter Description Required Values Default
class Any extra classes you want to add. optional any text
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. optional any text

[card-subtitle] parameters

Note: [card-subtitle] should contain a heading tag (h1, h2, h3, h4, h5, or h6), inserted using the WordPress editor. If a heading tag is not added h6 will be inserted automatically.
Parameter Description Required Values Default
class Any extra classes you want to add. optional any text
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. optional any text

[card-img] parameters

Note: [card-img] should contain an image inserted using the WordPress editor or the img-gen tag.
Parameter Description Required Values Default
top Flag whether this image cap is at the top of the card. optional 🚩 (flag)
bottom Flag whether this image cap is at the bottom of the card. optional 🚩 (flag)
class Any extra classes you want to add. optional any text
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. optional any text

[card-img-overlay] parameters

Parameter Description Required Values Default
class Any extra classes you want to add. optional any text
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. optional any text

[card-header] parameters

Note: [card-header] should contain a heading tag (h1, h2, h3, h4, h5, or h6), inserted using the WordPress editor. If a heading tag is not added div (no heading) will be inserted automatically.
Parameter Description Required Values Default
class Any extra classes you want to add. optional any text
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. optional any text

[card-footer] parameters

Parameter Description Required Values Default
class Any extra classes you want to add. optional any text
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. optional any text

[card-group] parameters

Parameter Description Required Values Default
class Any extra classes you want to add. optional any text
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. optional any text

[card-deck] parameters

Parameter Description Required Values Default
class Any extra classes you want to add. optional any text
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. optional any text

[card-columns] parameters

Parameter Description Required Values Default
class Any extra classes you want to add. optional any text
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. optional any text

Bootstrap card documentation

Icons

Note: The [icon] and [icon-stack] shortcodes depend on the Font Awesome 5 Icon Library, either from your theme or the official Font Awesome plugin.

[icon type="arrow-right"]

[icon] parameters

Parameter Description Required Values Default
prefix The icon set of the icon you want to display optional fab, fas (free)
fad, fal, far (pro)		 fas
type The type of icon you want to display required See Font Awesome Searchable Gallery none
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

Font Awesome Documentation

Icon Stacks

Print multiple icons on top of each other.


[icon-stack]
    [icon type="camera" class="fa-stack-1x"]
    [icon type="ban" class="fa-stack-2x text-danger"]
[/icon-stack]

[icon-stack] parameters

Parameter Description Required Values Default
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

Font Awesome Documentation

Buttons


[button type="success" size="lg"] Action [/button]

[button] parameters

Parameter Description Required Values Default
type The type of the button optional primary, secondary, success, info, warning, danger, dark, light, link primary
size The size of the button optional sm, md, lg md
block Whether the button should be a block-level button optional 🚩 (flag)
dropdown Whether the button triggers a dropdown menu (see Button Dropdowns) optional 🚩 (flag)
modal Whether the button triggers a modal popup (see Modal) optional The id of the modal
active Apply the "active" style optional 🚩 (flag)
disabled Whether the button will be disabled optional 🚩 (flag)
split Create a split button dropdown next to another button or link optional 🚩 (flag)
outline Turn the button into a bordered/outlined button optional 🚩 (flag)
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

Bootstrap button documentation

Button Groups

The tag [button-group-outer] allows nesting of button groups.

Basic example


[button-group size="lg" justified]
    [button] Left [/button]
    [button] Middle [/button]
    [button] Right [/button]
[/button-group]

Button toolbar


[button-toolbar]
    [button-group class="mr-2"]
        [button] Left 1 [/button]
        [button] Middle 1 [/button]
        [button] Right 1 [/button]
    [/button-group]
    [button-group class="mr-2"]
        [button] Left 2 [/button]
        [button] Middle 2 [/button]
        [button] Right 2 [/button]
    [/button-group]
    [button-group]
        [button] Single [/button]
    [/button-group]
[/button-toolbar]

[button-group] parameters

Parameter Description Required Values Default
size The size of the button group optional sm, md, lg md
justified Whether button group is justified optional 🚩 (flag)
vertical Whether button group is vertical optional 🚩 (flag)
drop Must correspond with the use of [dropdown] optional up, left, right (down)
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

[button-toolbar] parameters

Parameter Description Required Values Default
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

Bootstrap button groups documentation

Button Dropdowns

Button Dropdowns can be accomplished by combining the [button-group] shortcode, the "data" parameters of the [button] shortcode, and [dropdown] or [dropdown-menu] shortcode as follows.

Single button dropdowns


[dropdown]
    [button type="warning" dropdown] Action[/button]
    [dropdown-menu]
        [dropdown-header] Header[/dropdown-header]
        [dropdown-item link="#"]Action[/dropdown-item]
        [dropdown-item link="#"]Another action[/dropdown-item]
        [dropdown-item link="#"]Something else here[/dropdown-item]
        [dropdown-divider]
        [dropdown-item link="#"]Separated link[/dropdown-item]
    [/dropdown-menu]
[/dropdown]

Split button dropdowns


[button-group]
    [button type="danger"] Split Action[/button]
    [button type="danger" dropdown split][/button]
        [dropdown-menu]
            [dropdown-item link="#"]Action[/dropdown-item]
            [dropdown-item link="#"]Another action[/dropdown-item]
            [dropdown-item link="#"]Something else here[/dropdown-item]
            [dropdown-divider]
            [dropdown-item link="#"]Separated link[/dropdown-item]
        [/dropdown-menu]
[/button-group]

Drop variation


[button-group drop="up"]
    [button] Drop Up [/button]
    [button dropdown][/button]
    [dropdown-menu]
        [dropdown-item link="#"] Action 1 [/dropdown-item]
        [dropdown-item link="#"] Action 2 [/dropdown-item]
        [dropdown-divider]
        [dropdown-item link="#"] Separated Action [/dropdown-item]
    [/dropdown-menu]
[/button-group]

[dropdown] parameters

Parameter Description Required Values Default
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

[dropdown-menu] parameters

Parameter Description Required Values Default
right To right-align the menu with the button or link optional 🚩 (flag) (left)
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

[dropdown-item] parameters

Parameter Description Required Values Default
link The url you want the dropdown-item to link to optional any valid link #
disabled Whether this menu-item is disabled optional 🚩 (flag)
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

[dropdown-header] parameters

Parameter Description Required Values Default
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

[dropdown-divider] parameters

Parameter Description Required Values Default
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

Bootstrap button dropdowns documentation


[nav tabs]
    [nav-item link="#"] Link1 [/nav-item]
    [nav-item link="#"] Link2 [/nav-item]
    [nav-item link="#"] Link3 [/nav-item]
[/nav]


[nav tabs]
    [nav-item link="#" active] Active [/nav-item]
    [nav-item link="#" disabled] Disabled [/nav-item]
    [nav-item dropdown link="#"] Drop [dropdown-menu]
            [dropdown-item link="#"] Link1 [/dropdown-item]
            [dropdown-item link="#"] Link2 [/dropdown-item]
        [/dropdown-menu]
    [/nav-item]
[/nav]

[nav] parameters

Parameter Description Required Values Default
tabs Generate a tabbed interface optional 🚩 (flag)
pills Generate a interface with pills optional 🚩 (flag)
stacked Whether the nav is stacked (should be used with "pills" type optional 🚩 (flag)
justified Whether the nav is justified optional 🚩 (flag)
fill Proportionately fill all available space optional 🚩 (flag)
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

[nav-item] parameters

Parameter Description Required Values Default
link The url you want the dropdown-item to link to optional any text #
dropdown Whether the item activates a "dropdown" menu optional 🚩 (flag)
active Whether the item has the "active" style applied optional 🚩 (flag)
disabled Whether the item is disabled optional 🚩 (flag)
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

Bootstrap button navs documentation


[breadcrumb]
    [breadcrumb-item link="#"] Pictures [/breadcrumb-item]
    [breadcrumb-item link="#"] Vacation [/breadcrumb-item]
    [breadcrumb-item link="#" active] 2020 [/breadcrumb-item]
[/breadcrumb]

[breadcrumb] parameters

Parameter Description Required Values Default
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

[breadcrumb-item] parameters

Parameter Description Required Values Default
link The url you want the breadcrumb-item to link to optional any valid link #
active Whether the item has the "active" style applied optional true, false false
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

Bootstrap breadcrumb documentation

Badges


[badge right] 10 [/badge]

[badge] parameters

Parameter Description Required Values Default
right Whether the badge should align to the right of its container optional 🚩 (flag)
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

Bootstrap badge documentation

Jumbotron


[jumbotron] [lorem-ipsum] [/jumbotron]

[jumbotron] parameters

Parameter Description Required Values Default
fluid Make jumbotron occupy the entire horizontal space of its parent optional 🚩 (flag)
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

Bootstrap jumbotron documentation

Alerts


[alert type="danger"]  Danger  [/alert]

[alert] parameters

Parameter Description Required Values Default
type The type of the alert required primary, secondary, success, info, warning, danger, dark, light primary
dismissable If the alert should be dismissable optional 🚩 (flag)
fade If the alert should be animated when dismissed optional 🚩 (flag)
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

Bootstrap alert documentation

Progress Bars


[progress]
    [progress-bar striped percent="50"]
    [progress-bar striped percent="25" type="success"]
[/progress]

[progress] parameters

Parameter Description Required Values Default
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

[progress-bar] parameters

Parameter Description Required Values Default
percent The percentage amount to show in the progress bar required any number between 0 and 100 false
label Whether to show the percentage as a text label inside the bar optional 🚩 (flag)
type The type of the progress bar optional primary, secondary, success, info, warning, danger, light, dark primary
striped Whether enclosed progress bars will be striped optional 🚩 (flag)
animated Whether enclosed progress bars will be animated optional 🚩 (flag)
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

Bootstrap progress bars documentation

Media Objects

The tag [media-outer] allows to nest media objects inside a media object.


[media]
    [media-object class="mr-3"]
        [img responsive][img-gen size="150" text="Demo"][/img]
    [/media-object]
    [media-body]
        Header
        [lorem-ipsum sentences="3"]
    [/media-body]
[/media]

[media] parameters

Parameter Description Required Values Default
list-group Whether the media is part of a list group optional 🚩 (flag)
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

[media-object] parameters

Parameter Description Required Values Default
align Where the media should align with the text. optional start, center, end start
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

[media-body] parameters

The tag [media-body-outer] allows to nest media objects inside a media object body.

Parameter Description Required Values Default
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

NOTE: media-object should contain an image, or linked image, inserted using the WordPress TinyMCE editor or the img-gen tag.

Bootstrap media objects documentation

List Groups

Basic Example


[list-group]
    [list-group-item]
        [lorem-ipsum]
    [/list-group-item]
    [list-group-item]
        [lorem-ipsum]
    [/list-group-item]
    [list-group-item]
        [lorem-ipsum]
    [/list-group-item]
[/list-group]

Linked Items


[list-group linked]
    [list-group-item active]Active[/list-group-item]
    [list-group-item disabled]Disabled[/list-group-item]
    [list-group-item]Link 1[/list-group-item]
    [list-group-item]Link 2[/list-group-item]
[/list-group]

Media Items


[list-group media]
    [media list-group]
        [media-object class="mr-3"]
            [img responsive][img-gen size="150" text="Demo 1" bg="f00"][/img]
        [/media-object]
        [media-body]
            <h3>Header 1</h3>
            [lorem-ipsum sentences="3"]
        [/media-body]
    [/media]
    [media list-group class="mt-4"]
        [media-object class="mr-3"]
            [img responsive][img-gen size="150" text="Demo 2" bg="0f0"][/img]
        [/media-object]
        [media-body]
            <h3>Header 2</h3>
            [lorem-ipsum sentences="3"]
        [/media-body]
    [/media]
    [media list-group class="mt-4"]
        [media-object class="mr-3"]
            [img responsive][img-gen size="150" text="Demo 3" bg="00f"][/img]
        [/media-object]
        [media-body]
            <h3>Header 3</h3>
            [lorem-ipsum sentences="3"]
        [/media-body]
    [/media]
[/list-group]​

[list-group] parameters

Parameter Description Required Values Default
linked Weather the list group contains links optional 🚩 (flag)
flush Remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g. cards) optional 🚩 (flag)
media Weather the list group contains media items optional 🚩 (flag)
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

[list-group-item] parameters

Parameter Description Required Values Default
type The type of the list-group-item optional primary, secondary, success, info, warning, danger, light, dark, link none
active Whether the item has the "active" style applied optional 🚩 (flag)
disabled Whether the item is deactivated optional 🚩 (flag)
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

Bootstrap list groups documentation

Content

Code


[code] ... [/code]

[code] parameters

Parameter Description Required Values Default
inline Display inline code optional 🚩 (flag)
scrollable Set a max height of 350px and provide a scroll bar. Not usable with inline. optional 🚩 (flag)
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

Bootstrap code documentation

Tables


[table-wrap bordered striped]

            Standard HTML table code goes here.

[/table-wrap]

[table-wrap] parameters

Parameter Description Required Values Default
bordered Set "bordered" table style (see Bootstrap documentation) optional 🚩 (flag)
striped Set "striped" table style (see Bootstrap documentation) optional 🚩 (flag)
hover Set "hover" table style (see Bootstrap documentation) optional 🚩 (flag)
condensed Set "condensed" table style (see Bootstrap documentation) optional 🚩 (flag)
responsive Wrap the table in a div with the class "table-responsive" (see Bootstrap responsive table documentation) optional 🚩 (flag)
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

Bootstrap table documentation

Image


[img type="circle" responsive]
    [img-gen size="200" file="png" bg="C00" color="ff0"]
[/img]

Wrap any number of HTML image tags or images inserted via the WordPress media manager or the img-gen tag.

[img] parameters

Parameter Description Required Values Default
responsive Make the wrapped images responsive optional 🚩 (flag)
thumbnail Add a rounded 1px border appearance optional 🚩 (flag)
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

Bootstrap images documentation

Dynamic Dummy Image Generator


[img-gen type="circle" responsive size="800x600" text="Hello"]

Generate dynamic dummy images with selectable colors and text.

[img-gen] parameters

Parameter Description Required Values Default
type The effect to apply to wrapped images optional rounded, circle, thumbnail false
responsive Make the wrapped images responsive optional 🚩 (flag)
size The size of the image in pixels optional Examples: 500x250 (= 500px width, 250px height)
500 (= 500px square) 		640x480
file The image file type optional png, gif, jpg or jpeg png
text The text shown on top of the image optional Any text {Width-Of-Image} x {Hight-Of-Image}
bg The background color of the image optional Examples:
f00 (= #FF0000 as background color)
FF0855 (= #FF0855 as background color)		 000080
color The font color of the image optional see bg color FFFFFF
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

Bootstrap images documentation

Figurs


[figure]
  [img-gen size="300" class="figure-img img-fluid rounded"]
  [figure-caption]A caption for the above image.[/figure-caption]
[/figure]

[figure] parameters

Parameter Description Required Values Default
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

[figure-caption] parameters

Parameter Description Required Values Default
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

Bootstrap figures documentation

Blockquote


[blockquote]
    The quote goes here...
    [blockquote-footer]
        The source goes here...
    [/blockquote-footer]
[/blockquote]

[blockquote] parameters

Parameter Description Required Values Default
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

[blockquote-footer] parameters

Parameter Description Required Values Default
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

Bootstrap blockquote documentation

Lead body copy


[lead] [lorem-ipsum] [/lead]

[lead] parameters

Parameter Description Required Values Default
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

Bootstrap lead documentation

Utilities

Border

Use border utilities to quickly style the border, border-radius, border-size and border-color of an element. Great for images, buttons, or any other element.


[border radius="pill" color="danger"]
    [lorem-ipsum class="p-3"]
[/border]

[border] parameters

Parameter Description Required Values Default
add The border(s) to add optional all, top, right, bottom, left all
del The border(s) to subtract optional all, top, right, bottom, left none
radius The border radius to display optional all, top, right, bottom, left, circle, pill none
size The size of the border radius optional sm, md, lg md
color The color of the border optional primary, secondary, success, danger, warning, info, light, dark, body, muted, white
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

Bootstrap border classes documentation

Color

Use color utilities to quickly style the text color and background color of an element.


[color text="success"] [lorem-ipsum] [/color]

[color] parameters

Parameter Description Required Values Default
text The text color to display optional primary, secondary, success, danger, warning, info, light, dark, body, muted, white, black-50, white-50 none
bg The background color to display optional primary, secondary, success, danger, warning, info, light, dark, white, transparent none
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

Bootstrap color classes documentation

Flex


[flex size="lg" inline row-reverse="xs sm md" class="p-3 bg-secondary text-white"]
    [flex-item class="p-2 bg-info"]Flex item 1[/flex-item]
    [flex-item class="p-2 bg-warning"]Flex item 2[/flex-item]
    [flex-item class="p-2 bg-primary"]Flex item 3[/flex-item]
[/flex]

[flex] parameters

Parameter Description Required Values Default
inline Set the inline style for the flex container (only takes up as much width as necessary) optional 🚩 (flag)
direction Set the direction for the flex items optional row, row-reverse, column, column-reverse row
justify Change the alignment of flex items on the main axis optional start, end, center, between, around
align-content Set flexbox container to align flex items together on the cross axis. This property has no effect on single rows of flex items. optional start, end, center, between, around, stretch start
align-items Change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction column). optional start, end, center, baseline, stretch start
wrap Set how flex items wrap in a flex container. optional true, reverse false
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

[flex-item] parameters

Parameter Description Required Values Default
align Align individual flex items on the cross axis. optional start, end, center, baseline, stretch start
fill Force elements into widths equal to their content (or equal widths if their content does not surpass their border-boxes) while taking up all available horizontal space. optional 🚩 (flag)
grow Allow flex item ability to grow to fill available space. optional 🚩 (flag)
no-grow Disallow flex item ability to grow to fill available space. optional 🚩 (flag)
shrink Allow flex item ability to shrink if forced by other elements. optional 🚩 (flag)
no-shrink Disallow flex item ability to shrink if forced by other elements. optional 🚩 (flag)
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

Bootstrap flex documentation

HTML snippets

Allow any html code. This shortcode has no parameters.


[html]<br><hr><br>[/html]

Lorem Ipsum text generator

Generate any amount of lorem ipsum data. Great for layout tests. Without any parameters, the tag will produce one sentence with the p tag.


[lorem-ipsum sentences="3" tag="div"]

[lorem-ipsum] parameters

Parameter Description Required Values Default
tag The element tag for the text snippets. optional any element tag; use span to keep the elements together p
words The number of words to generate optional any number none
sentences The number of sentences to generate optional any number none
paragraphs The number of paragraphs to generate optional any number none
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

Javascript

Tooltip


[tooltip title="I'm the tooltip title" placement="auto"] Hover over me [/tooltip]

[tooltip] parameters

Parameter Description Required Values Default
title The title of the tooltip required any text none
placement The placement of the tooltip optional auto, left, top, bottom, right right
animation Apply a CSS fade transition to the tooltip optional 🚩 (flag)
html Allow HTML in the tooltip text optional 🚩 (flag)

Bootstrap tooltip documentation

Popover


[popover title="I'm the title" content="And this is the content" placement="auto" animation]
    [button outline class="mr-3"] Click Me [/button]
[/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 auto, left, top, bottom, right right
animation Apply a CSS fade transition to the tooltip optional 🚩 (flag)
html Allow HTML in the popover text optional 🚩 (flag)
trigger Allow HTML in the popover text optional click, hover, focus, manual click

Bootstrap popovers documentation

Collapse

Accordion example

Create an accordion by wrapping [card]s in [accordion].


[accordion]
    [card show]
        [card-header] Header 1 [/card-header]
        [card-body] [lorem-ipsum] [/card-body]
    [/card]
    [card]
        [card-header] Header 2 [/card-header]
        [card-body][lorem-ipsum][/card-body]
    [/card]
    [card]
        [card-header] Header 3 [/card-header]
        [card-body][lorem-ipsum][/card-body]
    [/card]
[/accordion]

[accordion] parameters

Parameter Description Required Values Default
class Any extra classes you want to add. optional any text
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. optional any text

Bootstrap collapse documentation


[carousel]
    [carousel-item active]
        [img-gen responsive size="1200x200" text=" "]
        [carousel-caption] Caption 1 [/carousel-caption]        
    [/carousel-item]
    [carousel-item]
        [img-gen responsive size="1200x200" text=" " bg="C0C0C0"]
        [carousel-caption] Caption 2 [/carousel-caption]        
    [/carousel-item]
    [carousel-item]
        [img-gen responsive size="1200x200" text=" " bg="F00000"]
        [carousel-caption] Caption 3 [/carousel-caption]        
    [/carousel-item]
    [carousel-item][
        img-gen responsive size="1200x200" text=" " bg="00F000"]
        [carousel-caption] Caption 4 [/carousel-caption]        
    [/carousel-item]
[/carousel]

[carousel-item] wraps an HTML image tag, image inserted via the WordPress editor or the img-gen tag. It can also be used for text slides but you may need to use additional utilities or custom styles to appropriately size content.

[carousel] parameters

Parameter Description Required Values Default
interval The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle. optional any number (in ms) or "false" 5000
pause Pauses the carousel from going through the next slide when the mouse pointer enters the carousel, and resumes the sliding when the mouse pointer leaves the carousel. optional hover, false hover
wrap Whether the carousel should cycle continuously or have hard stops. optional true, false true
indicators Whether the carousel should show the slide indicator. optional 🚩 (flag)
controls Whether the carousel should show the previous and next slide controls. optional 🚩 (flag)
fade To animate slides with a fade transition instead of a slide. optional 🚩 (flag)
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

[carousel-item] parameters

Parameter Description Required Values Default
active Whether the item has the "active" style applied. One item MUST be set as active. optional 🚩 (flag)
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

[carousel-caption] parameters

Parameter Description Required Values Default
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

Bootstrap carousel documentation


[button type="info" modal="example-modal-sm"] Modal Action [/button]
[modal size="sm" fade id="example-modal-sm"]
    [modal-header]Example Header[/modal-header]
    [modal-body]
        [lorem-ipsum]
    [/modal-body]
    [modal-footer]
        [button type="secondary"] Lorem [/button]
        [button type="primary"] Ipsum [/button]
    [/modal-footer]
[/modal]

[modal] parameters

Parameter Description Required Values Default
fade Slide modal down and fade in from the top of the page optional 🚩 (flag)
centered Vertically center the modal optional 🚩 (flag)
scrollable Allows scrolling the modal body optional 🚩 (flag)
size Optional modal size optional sm, lg, xl Default
id Unique id for the modal (see modal at Buttons required any text without space modal-{counter}; {counter} starting at 0
backdrop Apply the modal "backdrop" style; static will not close the modal when clicking outside of it optional false, true, static true
class Any extra classes you want to add to the trigger link optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

[modal-header] parameters

Parameter Description Required Values Default
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

[modal-body] parameters

Parameter Description Required Values Default
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

[modal-footer] parameters

Parameter Description Required Values Default
class Any extra classes you want to add optional any text none
data Data attribute and value pairs separated by a comma. Pairs separated by pipe. See example at [container] parameters. optional any text none

Bootstrap modal documentation