Please help us help you and fill where relevant:
Your LimeSurvey version:  LimeSurvey Cloud   Versie 6.5.5
Survey theme/template: Vanilla
==================
I have two questions:

1) I have a question with 5 bootstrap buttons that are presented horizontally. The 5 buttons are now aligned to the left of the page, I would like to align them to the center of the page. I have looked at these topics ( forums.limesurvey.org/forum/design-issue...pe-questions-yes-not , 
forums.limesurvey.org/forum/design-issue...uttons-to-the-center ) but have not succesfully been able to adapt the code. Can you offer me help? (see screenshot of an example question below)

2) I tried to change the color of the bootstrap buttons. I want them to color grey when clicked off when somebody hovers over the button. 
I have changed the code below to the custom.css file. My buttons now are grey when clicked and when the mouse hovers above the button but when the mouse moves away from the button after it is clicked, the background color of the button changes to blue. How can I change this?

Thank you so much for the help!

.btn-primary {
    background-color: white;
    border-color: black;
    color: black;
}

.btn-primary:active, .btn-primary.active {
    background-color: grey !important ;
    border-color: black !important;
}
.btn-primary:hover {
    background-color: grey !important;
    border-color: black !important;
}

.btn-primary.active:hover {
  background-color: grey !important;
  border-color: black !important;
} 

Hi,
yes, it is a bit different as LimeSurvey 6.x. is based on bootstrap 5.
To get your colors you may read this
[url] forums.limesurvey.org/forum/design-issue...strap-buttons#263175 [/url]

And additionally I set


 

Joffm

You may want to put media queries on that. 24% on a phone will be quite small.

And I misunderstood / didn't read exactly / didn't see
I thought these were the buttons 
 

Well, you know bootstrap divides each row into twelve parts
12 because you can divide 12 by 1, 2, 3, 4, 6, 12, but not by 5 or 7.
Meaning you can't put 5 elements into one row, you have to use 6, with the last element empty.

So you have to move the entire row a bit.
You can do this by adding a left margin to the class "ls-answers"
You may adapt the 10% to your needs.
 
Joffm
 

Thank you so much for the help. I was able to move all the buttons more to the center.

I was also able to change the color: the buttons still change to blue (with a blue border and white text) when I click them (see video). Is there any way I could change this?

Please, send the lss export of the survey (only relevant questions)
Joffm 

Thank you for the quick reply. Please find the lss code attached.

Thank you for your help.  

Hm,
where is the script?
I only see this (I cleaned a bit)


If I insert this already shown css snippet
it is fine except the alignment. But this you can adapt with a <br/> tag.
And why do you show the numbers at all?
 

Another thing.
This is more or less a scale. Later you want to calculate some statistical values, like mean, stdvar. etc, and run some statistical tests.
But what do you expect if you use "text" codes, like "AO01", "AO02", ...
Now you only get nominal data and may calculate frequencies, or maybe a CHI-Square, but not more.
Use numerical codes!

JOffm
 

Sorry for my late reply. Other projects required my attention.

I was able to fix the problem with the color of the radio buttons while checked/clicked by copying this code in the custom.css script:
.btn-check:checked + .btn-primary, 
.btn-check:active + .btn-primary, 
.btn-primary.active { 
background-color: grey;
color: black; 
border-color: black; }

Thank you for your help.