Bootstrap Vue form radio buttons - how to change radio buttons width

95 Views Asked by At

I use Bootstrap-vue and I have a group of 2 radio buttons (b-form-radio-group) I'm trying to set each radio button to 50% width. I created the following code structure:

        <b-row>
          <b-col cols="12" sm="auto" class="text-center">
            <b-form-group class="w-100">
              <b-form-radio-group
                button-variant="outline-primary"
                buttons
                class="d-flex flex-wrap"
              ></b-form-radio-group>
            </b-form-group>
          </b-col>
       </b-row>

The classes d-flex and flex-wrap don't have an effect. And currently, I see the radio buttons like this: enter image description here

How can I change each radio button's width to 50%, and in the end to see them like that (if possible without CSS styles):

enter image description here

0

There are 0 best solutions below