Request feature: add Bootstrap classes

Don’t know if I really post it in the right forum.

I have tried a couple of options to create an HTML landing page a couple of weeks ago…

I finally set up on using Bootstrap Studio.

The reasons I chose it over another tool like Pinegrow are:

  • Felt the interface was more user-friendly (less stuff to learn);
  • liked the bottom panel where we can drag stuff, reorder and all easily (yes, Pinegrow has that, but with so many panels, the interface can’t hold it all and you end up having to constantly switch between the layout panel and the style panel (among others);
  • was easier to add extra elements like a slider and form.

But, while I was using it, I realised that each time I was adding some styles in Appearance, it was actually adding inline styles… I was expecting it to work more like Pinegrow: when we select something that it predefined, that it would apply the corresponding Bootstrap class (ex: change the color text).

Ex: in Pinegrow, you have the style panel that allows you to add any style you want. That will create inline style, that you can export in an external CSS file… BUT if you use the Properties panel, you have many CSS styles that can be applied from there (ex: text color, transform, size, margin, padding, display, borders, etc.) that will simply apply the appropriate Bootstrap class.

I feel in a certain way that the Options panel does that, but the options are really limited…

So, question/request would be: is it possible, whether in the Appearance or the Options panel to have a section, a little like Pinegrow, where it would use directly the Bootstrap classes to style the elements? (ex: adding the text-white class to a link when we click on white for a text, instead of adding style=“color: var(–white)”>)

In the styles panel the first is element.style, on the right side you have three dots. There you can extract all your inlines to desired css file.
You can also add custom options and have your own classes and data attribute in the options panel

@kuligaposten 's post will get you going to pull out those styles you’ve already added which will help a lot.

While you cannot add things directly to “Bootstrap’s” classes, what you do instead is create a duplicate of a Bootstrap class and alter it there and it will overwrite the Bootstrap class. You would typically add this to a custom CSS file (I usually call mine custom.css so there’s no mistaking it and so it isn’t conflicted with components that like to add their own “styles.css” file.

So I don’t have to retype all this info again, if you do a search for “inline css” you’ll most likely find a myriad of posts that cover how to put your changes into classes instead of inline. I believe the new Docs may also cover this feature as well. I haven’t read that part so don’t shoot me if it isn’t up to par lol, but I know there are detailed explanations of this feature in the forums here as I recall doing so a few times myself. Good Luck! :slight_smile:

Just click on the attributes tab at the bottom of the page, then you can add any of the bootstrap classes in the “Class Names” input field

Did I miss something? What are you referring to? I didn’t see this type of option in the settings or in the Options panel… Is there some documentation about that?

Thanks

Thank you @jo-r I know how to create a class out of it and export it… In fact BS makes it pretty easy to do so… I was just expecting that elements there were linked to the Bootstrap classes.

Thank you, but I don’t know all the BS class names (I’ve used BS 3 a little, but not really BS 4 and 5)… that’s why I was hoping that it was using it…

Also, when we start typing in the classes, do we have “code completion”, like in Pinegrow (and many others)?

Yes

If you’re working in Bootstrap 4.x, you might find this site handy…

There are similar website resources for Bootstrap 5.x. Just Google, “Bootstrap Utility Classes Cheat Sheet” and you’ll find a lot of different resources.

@nelmedia

Thanks a lot! I’ll study that as soon as I have some free time!

Ahhh, thank you! I only knew the documentation on getbootstrap.com