Most people associate Bootstrap with its responsive grid. But that is not all that Bootstrap offers you. Bootstrap comes with an impressive list of elements, which can help you build professional looking pages in no time. In this tutorial, we explain how to easily add them to the Visual Editor cells in Layouts.

1. Open a Visual Editor cell in Layouts

All this functionality appears inside the Visual Editor cell. Open any existing Visual Editor cell or create a new one.

We are going to insert raw HTML, which includes the structure and classes from Bootstrap. First, switch the editing mode of the Visual Editor cell to HTML editing.

Visual editing mode – not good for inserting Bootstrap elements using HTML HTML editing mode – good for inserting Bootstrap elements using HTML

Some of the elements that you will insert have HTML that is several lines long. If WordPress will automatically add paragraph breaks for empty lines, it will distort the element. For this reason, you should also select the checkbox Disable automatic paragraphs. Then, add <p> tags manually around paragraphs.

2. Show the Bootstrap buttons

At the top of the cell, you will find a button that says Show Bootstrap buttons. Click on it to expand the Bootstrap buttons section.

I. Show the Bootstrap buttons II. See the list of available elements to use
show-bootstrap-buttons bootstrap-buttons

3. Select a Bootstrap element to add

Hover with the mouse over any of the Bootstrap buttons to see a description of what they do. Click on any of them.

Surprise! Nothing is added to the page. Instead, you see a message that explains that you are going to a page that offers you the Bootstrap HTML.

dialog-to-get-bootstrap-element

This actually is not a bug, but something we designed on purpose. The official Bootstrap site includes outstanding explanations of the different elements, complete with examples and their options. It makes no sense for the Layouts plugin to wrap all of these nice and efficient elements. Instead, we are sending you to the correct place in the documentation, to copy the code from there and paste into it the Visual Editor cell.

4. Copy the HTML for the Bootstrap element

Let’s see how to use an Inputs Group element. When you click on Get Bootstrap element, Layouts will open for you a new window with the correct documentation.

Bootstrap element and the HTML code that produces it
Bootstrap element and the HTML code that produces it

Take a minute to read and understand how that element works. Then, copy the HTML that you need and return to the Layouts editor.

5. Paste the HTML into the cell in Layouts

Now, finally, you have the HTML for the Bootstrap element. Paste it into the cell.

The cell in Layouts, after inserting the HTML for the Bootstrap element
The cell in Layouts, after inserting the HTML for the Bootstrap element

When you look at the layout in the front-end, you will see the Bootstrap elements that you have added.

The Bootstrap element on the front-end
The Bootstrap element on the front-end

Summary

This process surely takes a bit of time to get used to, but it lets you enjoy the full power of Bootstrap, without adding any overhead. You will discover that Bootstrap elements offer rich options and many different configurations. By using them without an additional layer of GUI, you get all the options and no unnecessary complications.

We have included the Bootstrap buttons in the Visual Editor cell, but you can use them anywhere else on the site and in any Toolset element.