Blog homepage » Entry
Bootstrap October 7, 2019

Using advanced editor functions to modify CSS classes.

Weronika Andrzejewska

Content Creator

We are very proud that you can very quickly create the first version of the layout using only the drag & drop function in our editor.

However, this is not always enough. That’s why in this post, I will describe the advanced feature of HTML Structure, which is available after clicking “Content” on each component added to the project.

Click button to open Component Content settings.

Note: This description applies to both Bootstrap Shuffle and Bulma Builder.

Visual Content and HTML Structure

When you open the content panel, you will see two tabs (see the image below).

One is Visual Content, which allows you to change texts and images in your project.

The second is the HTML Structure. This is an option for more advanced users who know the given CSS library. It allows you to modify CSS classes directly from our panel.

Component content window is divided into two columns.

I will start description from the right column because you know it well from the main application screen. This is a preview of the currently edited page with a small addition. The two side markers show which component you are editing.

Component Content settings.

What’s in the HTML Structure tab

The left column is divided into two sections: Parents and Component. Parents are wrappers in which the component is located, thanks to them you can change CSS classes for body elements and the main container.

Each section has an HTML element tree. When you move over an item, it will be highlighted on the right in the preview so you can be sure which item will be edited.

Hover on an item will highlight it in preview.

After clicking the HTML tag, the class edit field will expand with the current classes assigned to the given element. You don’t need to know the names of all classes in the library because we have an auto-complete mechanism! Start writing, and we’ll tell you what classes are available.

Autocomplete when typing class name.

The Component section has an additional “copy HTML” link that allows you to copy the entire item to the clipboard – if, for example, you would like to use it in another project.

Copy component’s HTML to clipboard.

All changes made to this panel are saved in real-time.

Try the HTML Structure panel in any of our applications: Bootstrap Shuffle and Bulma Builder.

Related blog posts

Shuffle February 26, 2021

We combined four visual editors into Shuffle!

We’ve combined four visual editors into one more powerful editor. Shuffle supports the most popular frameworks: Tailwind CSS, Bootstrap, Bulma, and Material-UI.

Weronika Andrzejewska

Content Creator

Bootstrap December 6, 2020

Bootstrap 5 is now available in our visual editor!

Finally, we’ve added support for Bootstrap 5. It is the newest version of this most popular CSS framework. You can choose it as a base framework when creating a new project.

Weronika Andrzejewska

Content Creator

Bootstrap November 21, 2020

Visual Studio Code extension for Shuffle UI components

Do you want to finish your project in Visual Studio Code? Now we have an easy solution! You can find our “Shuffle Components” extension in the official Visual Studio Code Marketplace (click here). Alternatively, you can install it directly from the VSC. You can activate the extension in two ways: Use shortcut: Shift + Ctrl […]

Weronika Andrzejewska

Content Creator

© 2021 Shuffle. All rights reserved.