CODEWITHSUNDEEP
twitter-bootstrapbootstrap-vue
Rugo
Rugo

Reputation: 383

Make radio button group full width BootstrapVue

I'd like my radio button group to be the full width of it's parent. I tried setting the width to 100% and this works on big screens but on mobile this causes my radio button group to be bigger than the screen. I'd also like to ask how I'd be able to change the background color of the group.

       <b-form-row>
            <b-col>
                    <b-form-radio-group
                            class="w-100"
                            id="radioButtonGroup"
                            v-model="selected"
                            :options="freeSeats"
                            buttons
                            button-variant="primary"
                            size="lg"
                            name="radio-btn-outline"
                    ></b-form-radio-group>
            </b-col>
        </b-form-row>

enter image description here

Upvotes: 2

Views: 1138

Answers (1)

Troy Morehouse
Troy Morehouse

Reputation: 5435

Try the Bootstrap v4 flex utility classes:

<b-form-radio-group
  class="d-flex flex-wrap"
  id="radioButtonGroup"
  v-model="selected"
  :options="freeSeats"
  buttons
  button-variant="primary"
  size="lg"
  name="radio-btn-outline"
></b-form-radio-group>

Class d-flex switches the radio group to take the full width (instead of the default inline-flex). The flex-wrap class is optional, and is used to wrap the radio buttons to the next line if there are more buttons than can be shown on a single line.

Upvotes: 3

Related Questions