Complete Bootstrap 4 Shortcodes

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

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.6 and WordPress 5.8 and requires PHP 7.0 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

Thanks for your consideration!

• Grid
• Responsive Embeds
• Responsive Utilities

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

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

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

• 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

[container-fluid] parameters

[row] parameters

[column] parameters

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

Bootstrap responsive embed documentation

Responsive Utilities

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

[reponsive] parameters

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.

[card-body] parameters

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

[card-title] parameters

[card-subtitle] parameters

[card-img] parameters

[card-img-overlay] parameters

[card-header] parameters

[card-footer] parameters

[card-group] parameters

[card-deck] parameters

[card-columns] parameters

Bootstrap card documentation

Icons

[icon name="arrow-right"]

[icon] parameters

Font Awesome Documentation

Icon Stacks

Print multiple icons on top of each other.

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

[icon-stack] parameters

Font Awesome Documentation

Buttons

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

[button] parameters

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

[button-toolbar] parameters

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

[dropdown-menu] parameters

[dropdown-item] parameters

[dropdown-header] parameters

[dropdown-divider] parameters

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

[nav-item] parameters

Bootstrap button navs documentation

Navigation Bars

Collapsible Navigation Bar

[navbar expand="md" class="navbar-light bg-light"]
  [navbar-brand link="#"][img-gen type="circle" responsive size="150x50" text="Brand"][/navbar-brand]
  [navbar-toggler]
  [navbar-content]
    [nav bar class="ml-auto"]
      [nav-item link="#" active]Home[/nav-item]
      [nav-item link="#"]Link[/nav-item]
      [nav-item link="#"]Another Link[/nav-item]
      [nav-item dropdown link="#"]Dropdown
        [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]
      [/nav-item]
      [nav-item link="#" disabled]Disabled[/nav-item]
    [/nav]
  [/navbar-content]
[/navbar]

Use the classes ml_auto, mx_auto and mr_auto to position the labels to the right, centered, or to the left; left is the default. The [navbar] shortcode must include the class navbar_dark or navbar_light, depending on the background color of the navigation bar, or the labels and the hamburger will not have a color assigned.

Vertical Navigation Bar

[navbar class="navbar-light bg-light"]
    [nav bar class="mr-auto"]
      [nav-item link="#" active]Home[/nav-item]
      [nav-item link="#"]Link[/nav-item]
      [nav-item link="#"]Another Link[/nav-item]
      [nav-item dropdown link="#"]Dropdown
        [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]
      [/nav-item]
      [nav-item link="#" disabled]Disabled[/nav-item]
    [/nav]
[/navbar]

[navbar] parameters

Bootstrap Navbar documentation

[navbar-brand] parameters

The [navbar-brand] can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles.

[navbar-toggler] parameters

[navbar-toggler] adds a button when the navigation bar is collapsed. Navbar togglers are left-aligned by default, but should they follow a sibling element like a navbar-brand, they’ll automatically be aligned to the far right.

[navbar-content] parameters

[nav-bar-content] is used for grouping and hiding navbar contents by a parent breakpoint.

Breadcrumbs

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

[breadcrumb] parameters

[breadcrumb-item] parameters

Bootstrap breadcrumb documentation

Badges

[badge right] 10 [/badge]

[badge] parameters

Bootstrap badge documentation

Jumbotron

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

[jumbotron] parameters

Bootstrap jumbotron documentation

Alerts

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

[alert] parameters

Bootstrap alert documentation

Progress Bars

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

[progress] parameters

[progress-bar] parameters

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

[media-object] parameters

[media-body] parameters

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

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

[list-group-item] parameters

Bootstrap list groups documentation

Content

Code

[code] ... [/code]

[code] parameters

Bootstrap code documentation

Tables

[table-wrap bordered striped]

            Standard HTML table code goes here.

[/table-wrap]

[table-wrap] parameters

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

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

Bootstrap images documentation

Figures

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

[figure] parameters

[figure-caption] parameters

Bootstrap figures documentation

Blockquote

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

[blockquote] parameters

[blockquote-footer] parameters

Bootstrap blockquote documentation

Lead body copy

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

[lead] parameters

Bootstrap lead documentation

Wrap section

[wrapper type="span" class="d-flex text-success"] [icon name="arrow-right" class="fa-2x mr-2"][lorem-ipsum] [/wrapper]

[wrapper] parameters

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

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

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

[flex-item] parameters

Bootstrap flex documentation

HTML snippets

Allow any html code. This shortcode has no parameters.

[html]<hr class="m-5">[/html]

Line Breaks

Insert line break. The plugin tries very aggressively to eliminate all line breaks inserted by the editor. Use this shortcode to add intentional line breaks. This shortcode has no parameters.

[br]

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

Floats and Clearfix

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

[float] parameters

Javascript

Tooltip

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

[tooltip] parameters

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

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

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

[carousel-item] parameters

[carousel-caption] parameters

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

[modal-header] parameters

[modal-body] parameters

[modal-footer] parameters

Bootstrap modal documentation