CODEWITHSUNDEEP
twitter-bootstrapcss
Stavm
Stavm

Reputation: 8131

Bootstrap '.radio-inline' radio buttons to 'vertical' in XS mode using css

How would you take bunch of radio buttons which are layed out well horizontally on desktop view, and change them to align vertically on mobile view using CSS.

this is my example:

<div class="row">
<div class="col-md-12">
    <fieldset>
        <legend>- fellow stackoverflower, please choose a radio button</legend><br>
        <label class="radio-inline">
            <input type="radio" name="optionsRadios" value="1" checked="checked">radio number 1
        </label>                
        <label class="radio-inline">
            <input type="radio" name="optionsRadios" value="2">radio number 2
        </label>
        <label class="radio-inline">
            <input type="radio" name="optionsRadios" value="3">radio number 3
        </label>
        <label class="radio-inline">
            <input type="radio" name="optionsRadios" value="4">radio number 4
        </label>
        <label class="radio-inline">
            <input type="radio" name="optionsRadios" value="5">radio number 5
        </label>
    </fieldset>
</div>

http://www.bootply.com/zPwSnZjDoQ

I can achieve the desired layout using JQuery with something like

$('label').removeClass('radio-inline').addClass('radio col-xs-offset-1')

Upvotes: 3

Views: 3625

Answers (2)

tao
tao

Reputation: 90217

@media (max-width: 479px) {
  .radio-inline {
    display: block;
    padding: 10px 20px; /* optional */
  }
}

Apparently, Bootstrap adds a 10px left margin to .radio-inline+.radio-inline. In order to override that, you need a stronger selector.

Upvotes: 1

Obed Parlapiano
Obed Parlapiano

Reputation: 3702

You can achieve this using CSS only by modying the bootstrap .radio-inline class directly when the size of the screen is xs. By applying display: block to the class they will show as you want. 

@media (max-width: 768px){ 
  .radio-inline{
  display: block; 
  }
}

Keep in mind that a lot of people don't like messing with framework's classes directly. I personally don't mind (as long as it's not the padding or % of bootstrap that you're modifying)

Upvotes: 2

Related Questions