A user wants a survey that asks something like "Do you like tomatoes?" with answer options "Very much", "Quite much", ..., "Not at all" and last "Have never eaten one". As the last option is logically different, she wants it to be visually separated too, for example having more space on the left than is between other options. How to do that?

What LimeSurvey version and theme are you using?

Version 3.20 and Fruity Theme.

Add something like this to the question source:




Sample survey attached:

I was not able to add style to a question, but I can modify css files of the theme. I had forgotten :last-child -selector, so thanks for your responce! I got this to work on normal radio buttons.

However, with Bootstrap buttons style the same does not work. I tried

.bootstrap-buttons-div:last-child { margin-left: 5em; }

but it did nothing. For testing I also check that without :last-child all buttons will have more space in between. So somehow the browser does not recognize a DIV element of style bootstrap-buttons-div so that it would see what is the last one.

If you explore the DOM with developer tools, you will see that the last button is actually not a last child - there is a hidden <div> element after it.

You will need to target the second last child and also add some media queries so it behaves well on all screen sizes:

Great! Now this works.