How to unlock the locked elements in bootstrap studio?

Hi Team,

i have facing issue to unlock the locked element in bootstrap studio. Please help me to rid out of this.

Thanks Punithan

Yep same issue here, can we edit the core bootstrap css ?

I don't think so... just overwrite it with custom CSS

Hello and welcome to our forums!

Normally when you see a locked element it means that it is controlled by the options in the sidebar. If you still wish to modify it, you can right click it and choose "Convert to HTML". If the option is not visible, you may need to right click its parent instead. This will convert the element to HTML and you will have full control over it.

The core Bootstrap file can't be edited right now. In the next releases, once we have SASS support in place you will be able to customize it. For now the solution is to override the Bootstap css with your own, like @shaezonna suggested.

Hope this helps!

Thanks but it is bit tricky for first timers.

Hi Team! I think that I threw out the money for this program! The lock is on the sidebar, after the "Convert HTML"! I wanted to buy a good program to easily create a website! But after the open a new blank design... I saw the LOCKS! What's the point of that? This all are useless now...

It not useless, you just need to invest some time and get to learn how this app works.

The locks are there because the devs want to protect the components they build and for keeping drag and drop fully functional and to cater for all skill set that use this app.

If you want to direct edit code without the lock simply right click on a component and convert to HTML and off away you go! But be warned you will lose all in the In built functions by doing that.

Good answer, Thank you Martin Angelov!!

I'm on a mac. I can't seem to right-click on the lock to get things unlocked. Any help with this would be greatly appreciated. I'm brand new at this app.


Hi Aaron

You can't unlock component that have been delivered by the app. However you can convert them to HTML but you then lose the ability to drag and drop

This threat seems to be old but I still can't deal with this.

Attached image shows that Right click (or items in navigation) do not show me any CONVERT TO HTMLenter image description here

Having issues still on 2020, I can't get to deactivate the link even when I specify in the UI to do so. I don't want to loose the ability to manipulate with the ui and it's drag and drop feature. Can you fix this issue, very annoying. Telling paid customers to "Convert to HTML" is very irresponsible solution after many years of complaints, why having the Activate / Deactivate option if this doesn't work. It was working fine when I bought the application originally, where did your developers screw it up?

Even if you take time lo learn about the application is fruitless because the videos specifically says that you can toggle active/deactive in the UI, the "Convert to HTML" option is for cases where there is no support for the UI. But in this case, there is supposedly a function in the UI that support the functionality in the first place.

Element .nav-item link still active even when is set as Deactive

And what's even more annoying is the fact that even if you delete the link inside the .nav-item and add it again the application automatically add the .active class locked, can the developers at least make the default be inactive by removing this class. Shouldn't be a deactivated state the default state anyway?

1 Like

Well to me it appears you may have typed the active class into the 2nd nav-link but we will never know because you conveniently show the nav item selected instead of the nav-link. I see no problems and yes typically on the Bootstrap 4 documentation it always shows active class added for the first nav-link on a navbar on the examples.

Seconded! This is very annoying.

The copy-paste-delete work around for this is very amateurish.

I’ve never had an issue using the BSS UI to set navigation options, and certainly never had to convert anything to code to get it working.

If there’s a current UI functionality issue in BSS 5.5.1, I’m very curious as to what it is, and why it’s been posted here on an ancient thread from 2016 on unlocking locked components (as opposed to the bug reports category where the devs will probably see it.)

Also, I cannot tell what the problem is from the screen capture posted by raphievila because it’s too low of a resolution to clearly see the details in his program’s UI.

@stergios What is it that you are doing that requires you to copy-paste-delete?

1 Like

printninja The use case is very simple. Create a set of tabs, with a tab-pane for each; nothing special here. Go ahead and work on the content in tab-pane #1. Finish that, and switch to each other tab-panes successively or randomly so that it appears in the preview window. But how do you do that? You set the tab-pane to active by adding the active class to it in the attributes area. Then switch to other tab-panes, and go back to a previously active pane. That pane will now have a locked active class. There is nothing you can do at this point but copy-paste-delete to allow you to remove the active class in the pasted version since for some reason the active class is now editable again in the pasted version (but still locked in the source version).

Even though this thread is years old, the problem still remains. The original author asked for progress just last September. I encountered the problem within a week of using the program when I first bought earlier this year. And just last week I went down the rabbit hole again of being caught up in this scenario. Hence my comment.

I apologize for using the word “amateurish”, as otherwise I find BSS to be a useful tool, but I let my frustration get the better of me.

Okay, I don’t normally use tabs, but I followed your process step-by-step. You can either make a Tab active by clicking the “Show” button in the top workspace menu bar, or you can click on the Tab Pane component in the Overview panel (Overview > Tabs > Tab Content > Tab Pane)

When you click on a Tab using either of the above methods, whichever Tab is currently selected will have the locked “tab-pane active” class applied by default. If you click on the non-active tabs in the Bootstrap Studio workspace, you will be able to edit the name of the tab, its URL and Target in the Options panel, but it won’t be “active” unless you click the “Show” button in the menu, or the the Tab Pane in the Overview panel.

I don’t think I’ve ever used tabs in any of my websites, but as far as I can tell, this seems to function the way it’s supposed to. When you publish the website, whatever Tab you had active in the BSS program at the time of publishing will be the active tab on your website.

If you’re essentially requesting the ability to unlock the “tab-pane active” class, my question would be, “why do you need to have this class unlocked?”

As a “power-user”, I typically prefer there to be as few locked components in BSS as possible, but my experience is the devs only unlock a component when the locked state prevents certain options from being set on the component.

Is there something you want to do to the Tab Pane that the locked “tab-pane active” class prevents you from doing?