Responsive Margins/Padding & Remove Gold color from buttons

Bootstrap Studio Help
1

Hi all,

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

.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle { color: #212529; background-color: #fec503; border-color: #f3bd01; }

Thank you!

2

locked bootstrap css I cant change that lets the button turn gold

create a new entry in your user CSS with the values you like.

but that's not an issue with BSS, just basic website building. Ditto for all other "issues"

3

The color is locked probably because you are using a template. You are also not targeting the :hover css.

If you want all the buttons that are gold btn-primary to have the same background on hover you will have to use the !important as so:

.btn-primary:hover {
  background-color: #0500ff!important;
}

If you just want to target the one button I would give it a id and again use the !important as so:

#submitButton.btn-primary:hover {
  background-color: #00ff0a!important;
}
4

ok great, but I cant edit the css that turns these buttons gold. it has a lock on it.

5

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

6

The code you first posted does not contain :hover so if you are trying to use that code from the locked bootstrap.css it will not change.

Your code with no hover css

.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle {
color: #212529;
background-color: #fec503;
border-color: #f3bd01;
}

If you paste this code I posted it should work on all primary buttons.

.btn-primary:hover {
  background-color: #0500ff!important;
}

We may have to see some of your code again and know the template. Is it Agency ?

7

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.

8

thank you all for the help.

I am still having issues with this aspect of BSS.

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.