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

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:

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

Rationale

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.

Roadmap

• 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…

Previews

CSS

Grid

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

Container wrapper to center the Grid:

Lead

not keeping it

Emphasis

not keeping it

Code

not keeping it

Table Wrap

not keeping it

Images wrap

not keeping it

Responsive Embeds

Responsive Utilities

This breaks the table of content, not keeping it

Components

Callouts

Callouts are the only reason I keep this plugin alive.

Icons

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

Buttons

Button Groups

Basic

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

Dropup variation

Cards

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:

Cards Grid:

Cards Grid height aligned:

Navs

• item
• item
• item

Nav with dropdowns

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

• link
• dropdown
  • item
  • item

Breadcrumbs

not keeping it

Labels

not keeping it

Badges

not keeping it

Jumbotron

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.

Needs a rewrite

Page Header, Thumbnails: discontinued

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

Alerts

Just like a callout but full width.

Progress Bars

not keeping it

Media Objects

Not keeping that.

List Groups

not sure to keep it

Basic

• item
  
• item
  
• item
  

Linked Items

Custom Content

Panels

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

Wells

Replaced by Cards.

Javascript

Tabs and Pills templates need a rewrite.

Tabs

Classic Tabs

• Home
• Profile
• Messages

Pills tabs with fade effect:

• Home
• Profile
• Messages

Tooltips

needs a rewrite

Popover

Collapse

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

Single Collapse

Set of Collapsibles

Carousel

Template rewrite needed

Modal

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. 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!

❌

◀️ ▶️