Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Bootstrap Buttons: Horizontal/Vertical Layout

  • Alarlm_316733
  • Alarlm_316733's Avatar Topic Author
  • Offline
  • Banned
  • Banned
More
2 years 2 months ago #232152 by Alarlm_316733
Bootstrap Buttons: Horizontal/Vertical Layout was created by Alarlm_316733
LimeSurvey version: 5.4.1
Own server or LimeSurvey hosting: LimeSurvey Cloud
Survey theme/template: Vanilla
==================

Hi everyone,

I'm struggling with the layout of bootstrap buttons. My survey will be used on mobile devices. I have a question which uses 5 bootstrap buttons as answer options which are displayed vertically in a column on mobile device. I'd like to change that to be displayed horizontally. When using my desktop pc to view the survey, the buttons are displayed horizontally. So, I guess I need to tweak the settings of the grid and maybe the size of the buttons via custom.css. And that's where I get lost.

Any help is appreciated.

Thanks and best regards.

Please Log in to join the conversation.

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 2 months ago #232157 by tpartner
Replied by tpartner on topic Bootstrap Buttons: Horizontal/Vertical Layout
If you have more than a couple of characters in the buttons, they will not fit on most phone screens (~360px wide).

Having said that, place this CSS in the question source:

Code:
<style type="text/css" data-author="Tony Partner">
 
  @media (max-width: 768px) {
    #question{QID} .bootstrap-buttons-div.col-xs-12 {
      width: 20%;
      padding: 0 3px;
    }  
  }
</style>

 
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: Alarlm_316733

Please Log in to join the conversation.

  • Alarlm_316733
  • Alarlm_316733's Avatar Topic Author
  • Offline
  • Banned
  • Banned
More
2 years 2 months ago #232158 by Alarlm_316733
Replied by Alarlm_316733 on topic Bootstrap Buttons: Horizontal/Vertical Layout
Thanks, tpartner.

This works perfectly as I'm using small images in the buttons.

I was also trying to work with the container-fluid class but didn't come to any result.

Please Log in to join the conversation.

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 2 months ago #232159 by tpartner
Replied by tpartner on topic Bootstrap Buttons: Horizontal/Vertical Layout
You don't want to adjust that globally as it is applied to other element(s).
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: Alarlm_316733

Please Log in to join the conversation.

Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source