Why aren't the HTML Snippets - Bootstrap columns displaying properly?

Since native Canvas does not recognize Bootstrap column classes, the HTML Snippets - Bootstrap columns require a Design Tools wrapper in order to display properly.

The most likely reason your columns are not displaying properly is the absence of such a wrapper.  When you start building your page with a Design Tools theme or block, the Design Tools Wrapper is added automatically.  However, if you added the columns without a theme or block, the wrapper will be missing and the columns will not work.

The Fix: In order to fix this issue, you can either add a theme and block in which to place your columns or add the wrapper to the columns manually.

Method 1: Use Theme and Block

1. In the Design Tools sidebar, go to Create/Edit Content>>Choose a Theme and select a theme from the list.  For plain styling, choose "Generic".  Notice that when you select a theme, it creates a heading inside a Design Tools Wrapper in your editor.
2. Next, click the +Add Content Blocks button in the sidebar to launch the Add Blocks modal.
3. In the Create New Content Block text entry field, you can enter a heading for the content.  If a heading is not needed, you can leave the text entry field blank.
4. Click the green add button to the right.  This will place a new content block in the editor inside the Design Tools Wrapper.

For New Columns...

1. Place your cursor inside the new content block and go to the sidebar to Add Advanced Elements>>HTML Snippets.
2. In Design Tools Core Snippets dropdown, select one of the Bootstrap Columns options and it will place it inside the block.

For Existing Columns...

1. Highlight the existing columns and cut them with Ctrl+X or Command+X.
2. Place your cursor inside the new content block and paste the columns with Ctrl+V or Command+V.

Method 2: Manually Add Design Tools Wrapper

If you don't want to delete the existing columns and you're comfortable updating the HTML manually, switch the editor to HTML mode and add this code to line 1 at the very top of your HTML: 

Then, at the very bottom of your HTML, add this code:

The columns will work when the <div> element wraps the content.  Here is a model of what that looks like:

Note: The HTML Snippets - Legacy columns come with their own wrapper so they don't experience this same issue.  The Next Generation of DesignPLUS will have this type of feature for all elements in order to mitigate issues related to missing wrappers.