Disable all system styles

Hi all,

I am wondering if there is a way to disable or remove all system styles so that I am starting from scratch with CSS.

For context I’m a Webflow developer hoping to be able to replace Webflow with BSS.
I’m used to working with a Figma file and building a website from scratch using it.
But I’m finding I can’t do this easily in BSS.
e.g. when I drag in a nav bar item it has system classes on it I cannot delete as they are locked.
I see I can copy its locked styles to my own CSS and overwrite them here but I am losing development time doing this and finding it makes it tricky to manage and update classes, plus my HTML ends up with unused classes in it.

Basically I want to be able to have a completely blank canvas, maybe even disabling Bootstrap completely somehow. I will get to grips with the Bootstrap framework eventually but for now I just want to be able to see how quickly I can rebuild my existing Webflow sites in it, without worrying about unremovable Bootstrap stypes.

Thanks!

Uhh, no.

Forgive me, but the program is called BOOTSTRAP Studio. Why would you buy a program that is tailored to build websites with Bootstrap, and then expect to not use Bootstrap?

If you want to build a website using plain CSS and HTML, then just use a code editor like Notepad++ or Visual Studio, and write your HTML and CSS manually.

I couldn’t find any other Webflow-like editors, this is the best I could find.
Is there not an option to just easily override system styles?
I’m not against using Bootstrap, I just want to be able to easily override the system styles.

As an example:

I dragged in a Testimonial component.
This text element has class ‘text-muted’. I cannot remove it. I don’t want it there, I want to remove it instead of overwriting its style.

Why can’t I remove it? Am I missing something here?

The Testimonial element is styled with existing colours that I do not want, but they are locked in with system styles. It seems tedious to have to go and overwrite all of them just to get it matching the design I want?

Click on the paragraph with the text muted class and in your options set it to default, it will clear the class

1 Like

Thank you @richards , that’s exactly what I was looking for!
Appreciate it :slight_smile:

The pre-built components are provided so you can quickly put together pages that utilize default Bootstrap styling. Most components have elements that are customizable, and elements that are “locked.” If an element is locked (meaning you can’t change/remove the utility classes,) this is because changing/removing them would fundamentally alter the appearance or functionality of the component (and possibly break your site.)

Elements in components that can be customized are customized through the UI in three ways, 1) the Appearance panel, 2) the Options panel or 3) the Attributes panel. The Appearance panel affects the elements by adding inline CSS styles (which can be moved to external stylesheets.) The Options panel adds, changes or removes Bootstrap utility classes (what you referred to as “system styles.”) The Attributes panel allows you to add utility classes to components that may not be available in the Options panel. Having a good understanding of Bootstrap’s utility classes goes a long way towards being able to quickly build and style sites with Bootstrap Studio (henceforth referred to as BSS.)

W3Schools is an excellent resource for a rundown of Bootstrap’s utility classes (and Bootstrap in general.)

While it’s an outstanding program, BSS doesn’t have the most comprehensive documentation (Webflow is better in that regard.) Some basic features are barely touched on in the Docs, but I would still encourage you to thoroughly read through them, and also watch all the videos on their YouTube channel (not just the four on their website.) Some of the older vids were created with older versions of the software, so the UI may not match 100% to the current version of the software or of Bootstrap, but they can still be a valuable resource.

Doing all these things will help familiarize you with the BSS user interface, and give you a feel for Bootstrap in general. While it’s not mandatory to being able to build a website in BSS, having a good familiarity with CSS and Bootstrap’s utility classes allows you to get the most out of this software, and enables you to build sites from scratch that are significantly different in appearance from Bootstrap’s standard “look and feel.”

You should also take some time to read through Bootstrap’s own website as well. The sooner you do this, the more you’ll be able to get out of this software.

Lastly, while the documentation for this software may be a bit thin, we have an excellent user community here in the forum, and most any question you have related to using the program will be answered here quickly.

Thanks @printninja

Like with Webflow there’s a learning curve but I’ll push through it and go through the documentation you have linked :slight_smile:

You won’t regret the time you spend to get used to the app and Bootstrap itself which can save you a lot of time. Keep plugging and if you get stuck on something give a holler, someone here will usually have an answer (Points to everyone else) HAHAHAHA.

i do not know if only this forums or web developer in general are very helpful people. Certainly helped me alot on my site from coding to my grammar hehe cheers!

2 Likes

You can just say developers (instead of web developers) :wink: Development is and always has been a community, even before the web (when we communicated through Bulletin Board Systems). Barring exceptions (there are always unpleasant people whatever the domain), there is always a small sign of recognition (like between bikers on the road) when two developers cross paths -^v-