Boostrap 3 Grid and Components, in WordPress Visual/Text WYSiWYG Editors, with Easy Bootstrap Shortcode

Bootstrap Theme’s Problem (SOLVED)

When I set out to find a Bootstrap 3 (getbootstrap.com) shortcode generator, I ran into many solutions. So the key was to identify the problem I was attempting to solve. Really my research stemmed from the use of Roots theme (roots.io) for most of my clients seeking full custom designed mobile websites. Roots is based on Bootstrap 3 framework, and uses all the same supporting CSS, and therefore the same grid and same simple HTML markup rules to make fancy display items like accordions, tabbed content, etc. The problem is, after making a custom theme for a client, and handing it over, how can the client easily use all the benefits of the fancy Bootstrap framework, without having to know the minimal HTML markups. The solution, is shortcode generators in the WordPress default WYSiWYG content Visual/Text editors. This can be done manually, but I set out to find a plugin that would do the work for me. And I found it. I tried several, but none were as good as Easy Bootstrap Shortcode (https://wordpress.org/plugins/easy-bootstrap-shortcodes/).

Here are some I tried that I didn’t like (most made my WordPress 3.9.1 WYSiWYG editor crash and not work at all):

https://wordpress.org/plugins/bootstrap-shortcodes/ <– this worked but not nearly as nice as Easy Bootstrap Shortcode

https://wordpress.org/plugins/bootstrap-3-shortcodes/ <– this may my editor crash.

Easy Bootstrap Shortcode is Awesome!

Takes Care of Building the Grid and Embedding Responsive Images

The main part of Bootstrap that we need in the editors is the ability to quickly use the grid to make appealing layouts. This plugin allows you to do so with the click of a button, and specific how many columns each portion of the grid takes up, differentiating these columns across Desktop, Tablet, and Smart Phone screen resolutions. It also adds the ability to hide portions of the grid on different screen sizes. Therefore you can easily manage a nice layout across all sizes of devices.

This plugin also has a button to upload images, that are responsive, always meeting the widget of the containing grid area. For example, if you make a two column grid, using the shortcodes as mentioned in the previous paragraph, you can then use a responsive image shortcode (by clicking a button on the toolbar of the WYSiWYG editor) and embed a responsive image tha twill fill one of the two columns. It will always remain the width of that column. This can be for any size columns etc. The possibilities between the two are endless!

Easy Bootstrap Shortcode Does Even More!

Beyond being able to control grid with text and images, you can use ALL of the Bootstrap 3 framework via toolbar accessible short-codes. Accordions, Tabs, Buttons, Button Groups, Alerts, Tool-tips, Sliders, Icons, it does it all, just as easy as your Visual editor always has been. The design is really comprehensive and seamless to the WordPress platform. Here are a few examples:

Toggle 1 content goes here.
Toggle 2 content goes here.
Toggle 3 content goes here.
Toggle 4 content goes here.

Tab 1 content goes here.
Tab 2 content goes here.
Tab 3 content goes here.
Tab 4 content goes here.

90% Complete

We could go on.. But you get the idea..

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>