Complete Bootstrap 5 Shortcodes

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

Bootstrap 5 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

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 5.0 and WordPress 5.7 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

• Grid
• Responsive Embeds
• Responsive Utilities

Components

• Cards
• Icons
• Buttons
• Button Groups
• Button Dropdowns
• Navs
• Breadcrumbs
• Badges
• Jumbotron
• Alerts
• Progress Bars
• Media Objects
• List Groups

Content

• Code
• Tables
• Figures
• Images
• Blockquote
• Lead body copy

Utilities

• Border
• Color
• Flex
• HTML snippets
• Lorem Ipsum Text Generator
• Floats and Clearfix

Javascript

• Tooltip
• Popover
• Collapse
• Carousel
• Modal

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	1x1, 4x3, 16x9, 21x9	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 ratio helpers 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] 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

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
name	The name 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
tag	The html tag of the button	optional	button or a	button
link	The url you want the tag a to link to	optional	any valid link	\#
target	Where to open the link for tag a	optional	_self, _blank, _parent, _top	_self

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, start, end	(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
end	To end-align the menu with the button or link	optional	🚩 (flag)	(left)
right	Same functionality as end (for compatibility with V4)	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

---

Navs

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

Nav with active, disabled and dropdowns

[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

---

Breadcrumbs

[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 end] 10 [/badge]

[badge] parameters

Parameter	Description	Required	Values	Default
bg	The background color for the badge	optional	primary, secondary, success, danger, warning, info, light, dark, white, transparent	secondary
end	Whether the badge should align to the end of its container	optional	🚩 (flag)
right	Same as end for compatibility with V4	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 custom jumbotron examples

---

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
dismissible	If the alert should be dismissible	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

---

Images

[img 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, bottom, start, end	all
del	The border(s) to subtract	optional	all, top, bottom, start, end	none
radius	The border radius to display	optional	all, top, bottom, start, end	none
size	The size of the border radius	optional	0, 1, 2, 3	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

---

Clearfix and Floats

Quickly and easily clear floated content within a container.

[clearfix]
[float float="left"] Floating Left [/float]
[float float="right"] Floating Right [/float]
[/clearfix]

[clearfix] 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

[float] parameters

Parameter	Description	Required	Values	Default
float	Position to float the elemet to.	optional	none, start (or left), end (or right)	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, top, bottom, left, right	end
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, top, bottom, left, right	end
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
flush	Remove some borders and rounded corners to render accordion items edge-to-edge in a parent container (e.g. cards)	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

Bootstrap collapse documentation

---

Carousel

[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

---

Modal

[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

---