Find and Change locked CSS for Buttons & Dropdowns

.btn-primary:active, .btn-primary:focus, .btn-primary:hover { background-color: #fec810!important; border-color: #fec810!important; color: #fff; }

This is a locked button class on BSS. I chose a template a while back when I started working on a website and I regret it now because it comes along with so many locked classes that make it a headache to customize the site. I have to sift through a bunch of css to find and copy all the relevant locked bootstrap css to my custom file and then add !important tags so they override the locked css.

Is there a more efficient way to override the locked css? or is going through the templated css and performing the operation on each selected item the only way

Unfortunately the answer is, "no." If you started with a template where components were created using the !important tag, then you can only override them by making a copy in a new CSS file and again using the !important tag. This is actually poor coding on the part of the developer(s) who created the template, as the use of the !important tag should almost never exist in a stock template. It means something was done in an unorthodox way with the original CSS, and never fixed properly.

There is also no way to "unlock" locked components. This is necessary so that Bootstrap Studio can maintain the level of "drag-and-drop" convenience it has. While many power users have requested over the years that all components be "unlocked", it has been explained this is impossible.

HOWEVER, the developers have, over time, made more and more locked components unlocked (editable) and added visual UI adjustments for them. It's a balance. The more unlocked components the program has, the more complex the visual UI becomes.

Personally, I never built a website using any of the BSS templates. I always start with a blank page, because I've found that some of the templates contains some rather "funky" ways of doing things (IMO.)

yea for a fact. the templates cause a much bigger headache in the end than they are convenient.

I just picked a template because it was one of my first websites and thats where I made all my changes.

Going through and having to find all the different locked classes makes things so much more inefficient. Its my only complaint with BSS, i still generally like it. This is just a downside that can cause problems later down the line when developing a website.

I totally understand if its not possible to unlock all the classes. thats fine. its just probably way better to have a streamlined way to find all the different locked css for a specific element. then its easy. just copy it to your own css file and overwrite what you need. But when theres 9 different css classes for a bunch of different element states it makes things inefficient to track all those classes down and change each one. I hope they come up with a solution for this.

I made an export script to intertwine Jinja templating. If BSS developers come up with a way to allow dynamic temlplating and to easily changed locked template classes I think that productivity increase to their software adds some space between them and their competition.

I think you just got a bad initial taste because you started out with a template. When you build from a blank slate, and use the standard drag-and-drop bootstrap components, you'll find most of them are unlocked, and can be adjusted through the visual UI (although, once you start getting accustomed to the program, you'll find you do a lot of automatic jumping straight to the CSS styles editor for certain things.)

I mainly use the visual tools to add helper classes, control Responsive Display and Flexbox. I also add a lot of helper classes simply by typing them in the Attributes panel. Also, the more you build and save your own customized components in your personal library, the faster you'll get at building sites. I have a whole assortment of different buttons, navbars, footers, etc, so there's no need to reinvent the wheel. I rarely get frustrated overriding stock Bootstrap CSS because it's become second nature to using BSS. It's just how this program works.

And Bootstrap Studio, frankly, has no competition. There is no program I've found other than Pinegrow which lets you build a Bootstrap based website however YOU want, visually. And BSS's UI has Pinegrow's beat by a mile. Many people have talked about templates, and the idea of being able to create templates, but in ten years of Website development, I think I've purchased TWO templates and used one of them in a final client's project. I just don't find templates to be big time savers for me, because I always end up doing lots of modifications to them. It's easier to just start from scratch, and use all my pre-made library components.

yea true. I tried Pinegrow and BSS is far superior. I agree with the bad initial taste. I think BSS is a great program.

Have you ever run into the issue of having your BSS preview look one way but when you transfer the updated css and html it looks different?

I have a container that is not fluid on BSS and doesnt appear to be on BSS preview... but weirdly takes up the whole width of the page once on my server. Its an odd problem, i dont know what the issue is. Maybe you've come across this?

got it figured out, it turned out to be some more locked template css for the sections in the html that I didnt know about. I had to also update the bootstrap.min.css file to the server as well

Sometimes, browsers (especially Chrome) have very aggressive CSS caching policies, and when you do frequent website edits and uploads, even though you've uploaded a new assets folder with new CSS, the browser may use an older, cached CSS file.

The way to stop this (or fix it) is to open the inspection tool in Chrome (right-click > inspect) and once it's opened, you can then right click on the page reload icon in the Chrome upper left menu bar (the circular arrow thing) and you'll get a hidden drop-down menu that now appears, and you can choose Empty Cache and Hard Reload. This will 99% of the time get your site to reload with your latest CSS uploads.

There are also plugins for Chrome and Firefox and many others I'm sure, that allow you to clear the cache on reload as needed (I typically do this if I'm doing a lot of changes on a site that I need to upload a lot). Saves me headaches of knowing I changed things when they don't show up lol.

I don't recall the Chrome one since I recently went back to Firefox, but the Firefox one is called "Hard Refresh" and you can turn it on and off as needed. Sweet little helper :)


I think what you are looking for and trying to achieve is to use a mixin "button-variant" in Bootstrap found in the mixins when compiling a custom sass theme.

Probably not worth discussing though unless you have solved how to use the internal BSS compiler to spin up your own version of Bootstrap....


Yeah it doesnt even make sense why they added the css with the !important because those settings for background-color and border-color were already the default colors for the primary in the theme and without the !important.


The cool thing about the Chrome Inspect > hard cache clear trick is that it's site-specific. I have plug-ins on all my browsers to "1-click clear" the caches, but they clear everything, including stuff on sites I'd sometimes prefer to leave, like logins, etc. Being able to clear just the cache on a particular domain is very useful.

That's a good point Printninja, I installed this extension in Firefox because I was testing a form that was using Cookies so I needed it to clear everything. I won't always need it to do that so I'll have to look at the Inspect system in Chrome and see what that is all about, thanks for that tip. :)