I have had a frustrating problem with bootstrap studio for a while. Overtime, whenever I use a button in my website I can change its background color, but as soon as I hover over it it turns gold. And of course, this feature is in a locked css file that I cant change. Does anyone know how to prevent this?
Also, is it possible to have responsive padding or margins? I know the margin auto is a feature but thats not what I need, that feature provides too much margin.
I have a div with a dropdown, number input, and a submit button. They are directly next to each other and that works and is necessary on small devices. But anything larger than that they are still bunched together and it looks cluttered. How can I make these elements have some spacing from each other above small devices?
below is the locked bootstrap css I cant change that lets the button turn gold .The colors below are golden colors
i copied the css with the lock to a different css file on bootstrap application, then added the !important to it and it didnt work, i also unchecked the box to mark it out and that didnt work
Also, any CSS that is default cannot be edited directly, but ... what you do to change that is create a separate CSS file (sounds like you may have already) and copy the code from the default to your new CSS file. To do that you just click the dots on the right side of any CSS block and there are options there for multiple things you can do, moving and copying being part of them. Once you have it copied to your own custom CSS file, edit what you want to there and save it.
IMPORTANT: First, if the original code didn't have important in it, your new one doesn't need it either. What sounds like it might be missing is the rearrangement of your CSS files so that your custom CSS file is in the last position. That is the only way your new code edits will overwrite the original defaults. To do this:
Right click over the "Styles" section of the Design pain (bottom right) and choose Include Order
Rearrange the order of your CSS files as needed with your custom file at the bottom.
That should take care of your issue of not getting the new overwritten changes.
I copied the template css to my custom css and edited it to my needs. I made the custom file i am editing the last in the order. And When I load the page, the css I am overwriting flashes for a quarter of a second and disappears.
I have no idea what is going on so if anyone has pointers that would be great.
The changes display on bootstrap studio but on preview the changes flash quickly and disapear.