Please help us help you and fill where relevant:
Your LimeSurvey version: limesurvey cloud(6.3) / self-hosted(6.2.9_230925)
Own server or LimeSurvey hosting: Both
Survey theme/template:  Fruity/Vanilla
================= am using the bootstrap button with the single choice feature to design a list of questions. It involves choosing one out of two types of lists repeatedly.Ideally, the two buttons should appear side by side on a single line, especially for better mobile responsiveness. However, they display on two separate lines on mobile, making the list elongated on smaller screens. This issue also occurs on PCs when adjusting the browser size. On larger displays, they do appear side by side as intended. If there's a recommended approach to ensure they appear on one line, I'd appreciate the suggestion.

You can just extend the survey theme you're using and modify the css.

Should I add it to custom.css using the theme editor? Or, should I edit the css under question edit > display > css?

CSS rules should be in the custom.css file. The question setting is for CSS class names, not rules.

- www.limesurvey.org/manual/Question_type_...lass_.28css_class.29

...to add to this...

I would assign a CSS class something like "columns-2" to the question and then add something like this to your custom.css file:


 

Thank you. I will make good use of it. I found and modified the column naming style of the button box through Chrome browser's Developer Tools, and it applies well.