IT Cooking

Success is just one script away

Bootstrap Shortcoder plugin for WordPress

5 min read
Bootstrap Shortcoder is a TinyMCE plugin to insert Bootstrap components via a set of shortcodes. Forked and revived from Bootstrap 3 Shortcodes
bootstrap shortcoder featured meme 64

bootstrap shortcoder featured meme 64

Bootstrap Shortcoder is a TinyMCE plugin to insert Bootstrap components via a set of shortcodes. Forked from Bootstrap 3 Shortcodes by Michael W. Delaney and Simon Yeldon, under MIT license. Original is unmaintained for 3 years, as it always happens with large projects that do not generate money. As it’s my daily driver, reviving it is the least I can do!


Mobile / Tablet users WARNING: AMP pages do not load Bootstrap, most of this page will not render properly

boostrap shortcoder 3.x button placement To access it, the button is next to the Add Media button, and that’s inconvenient. Also, it just lists the bootstrap elements, and it’s up to you to know what they do! When you select an element, you scroll to the excerpt with an insert button, but that is no help at all:


bootstrap 3 shortcodes reference selection
bootstrap 3 shortcodes reference selection
bootstrap 3 shortcodes insert button and details
bootstrap 3 shortcodes insert button and details

It’s MUCH better then having to type the shortcodes… but a wysiwyg would also be welcome?


The rationale for this plugin is that, all the other Bootstrap plugins that exist today are not free. They are also limited in the number of components available. This plugin embeds 95% of what Bootstrap had to offer in version 3, see the Bootstrap 3.3 components list here.

Indeed it was developed for Bootstrap 3.1.1, and some components have broken with version 3.3 and 4. But not all of them. Also, Bootstrap 5 has deprecated more components, and introduced new ones. Moreover, your free theme is unlikely to embed Bootstrap 5. Free themes are stuck with version 3.3.6 or 4.3.1.

Therefore, it’s time to review what’s to keep and what’s to ditch.




  • Critical:
    • [x] Build this page
    • [x] Review what to keep
    • [ ] Review what to add
    • [ ] Add previews in the form of screenshots 300px max, or the components themselves
    • [ ] Add Insert buttons next to the preview
    • [x] Include latest Bootstrap 5.3
  • Nice to have:
    • [ ] Detect if theme embeds Bootstrap to prevent double load, or load latest instead
    • [x] Remove included bs 3.1.1
    • [ ] Move the insert button in the toolbar
    • [x] wysiwyg ? => NO, impossible to edit elements after insert. UNLESS we use the block editor…




Classic Bootstrap grid + xclass text-center for each row:

sm-6 column
sm-6 column
sm-5 column
sm-5 column
sm-6 column
sm-2 column
sm-1 column
sm-1 column

Container wrapper to center the Grid:

md-6 +text-centered


not keeping it


not keeping it


not keeping it

Table Wrap

not keeping it

Images wrap

not keeping it

Responsive Embeds

Wrap <iframe>, <embed>, <video>, and <object> elements to make them responsive with a ration: 16by9, etc.
not keeping it

Responsive Utilities

This breaks the table of content, not keeping it



Callouts are the only reason I keep this plugin alive.

Default callout (lg and grey)
Primary lg callout
Secondary xl callout
Success lg callout
Warning md callout
Danger sm callout
Info xs callout
Light xs callout
Dark xs callout


Integrated glyphicons in version 3.3 have been removed from Bootstrap 4, I believe… These days we use fontawesome anyway. TinyMCE Advanced Classic Editor embeds fontawesome.

not keeping it


Compared to the ones included in Advanced Classic Editor: exactly the same

Button Groups


Those are useful for user feedback, or scales from 1 to 5.

Button toolbar

Part for buttons logic, but I don’t see a use case.

Button Dropdowns

The are all broken atm.

Single button dropdowns
Split button dropdowns
Dropup variation


Cards are like panels but live within their own container. By default, they stack like bricks, in columns, exactly like on Pinterest. Bootstrap 5 have changed them very little: they just added an image cap. Cards replace Wells, Panels and Thumbnails.

Cards Group:

card info header




Header h5

block with no header

another block
background dark
xclass bg-dark-subtle
xclass bg-body-secondary

Cards Grid:

block only + bg-opacity-25

no header or footer

header card
block 1 primary opacity 50
block 2 secondary

Cards Grid height aligned:

block only

no header or footer

header card
block 1 primary
block 2 secondary

Seems broken; nav link looks like a button, redundant.

not keeping it


not keeping it


not keeping it


A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site. The space above the title is too large, should be adjusted.

My Jumbotron

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

This text below has emphasis

Needs a rewrite

Page Header, Thumbnails: discontinued

Page Header seems useless, and Thumbnails are replaced by Cards.


Just like a callout but full width.

Success alert
Warning alert, dismissable

Progress Bars

not keeping it

Media Objects

Not keeping that.

List Groups

not sure to keep it

  • item
  • item
  • item
Linked Items
  • item with no link, height is smaller
  • item with no link, height is smaller
  • Custom Content



  • heading

    this item has no link. Height is wrong

  • heading



    I developed that with Bootstrap 4, but the example is buggy and it’s replaced by Cards anyway. not keeping it


    Replaced by Cards.


    Tabs and Pills templates need a rewrite.


    Classic Tabs
    blah blah
    yadi yada
    Pills tabs with fade effect:
    blah blah
    yadi yada


    needs a rewrite


    needs a rewrite


    Replaced by Accordions, need to fix all the posts that contain them.

    Single Collapse
    Single Collapse, active = always open
    Set of Collapsibles
    Collapsible active, always open. Or maybe a bug…
    Set of Collapsibles
    Set of Collapsibles

    Template rewrite needed

    Template needs a rewrite


    This is my modal

    Wrapping Up

    Not keeping half of it, but since the new bs 5.3 is out, lots of improvements in the look and feel.

    Keeping those:

      1. Grid: fine-grained grid options, that is not buggy
      2. Buttons + groups + dropdowns
      3. Alerts + Callouts
      4. Cards
      5. Jumbotron, seems like a nice header
      6. Tabs, need to be fixed
      7. Collapsibles -> Accordions
      8. popover and tooltips
      9. Tabs/pills, not nav
      10. modal
      11. Carousel, maybe

    That’s pretty much it actually… All I need to start with is the rewrite of the insertion module with just what I need, and shortcuts for each variation of a component:

    • Tabs > tab or pill
    • Callout: red / green / blue
    • etc

    The plugin will be much simpler to use that way! Bootstrap 3 Shortcodes users, please vote if you need some components back!


    Leave a Reply

    Your email address will not be published. Required fields are marked *