I would like to 1) make sure radio buttons are aligned to left 2) decrease the amount of vertical space between label and radio button texts and vertical space between each text

In the example below you can see radio button texts are centered, and also there is about half text height space between them which I would like to decrease

https://codesandbox.io/s/1l3yc9?file=/index.js

CodePudding user response：

Adding to the previous answer to fully answer your question, the label of the radio button can be left aligned using bootstrap's flex class names:

<b-form-radio
        v-model="orderType"
        :aria-describedby="ariaDescribedby"
        name="radios-stacked"
        value="L"
        
        >Limit</b-form-radio
      >

link to completely working CodeSandbox

CodePudding user response：

Here you go...

1. I don't understand what you're trying to achieve. Can you explain please?

2. Add the following CSS:

Reduce the vertical space between the label and the first radio button:

legend#__BVID__6__BV_label_,
legend#__BVID__12__BV_label_ {
  padding-bottom: 0;
}

Reduce the vertical space between the two radio buttons:

.custom-control {
  min-height: initial;
}

.custom-control-label {
  line-height: 1.1;
}

.custom-control-label::before,
.custom-control-label::after {
  top: 1px;
}

See the forked CodeSandbox here.

CodePudding user response：

To prevent the radio buttons from getting centered, remove the class from your <b-form-group></b-form-group>.

It will adjust the texts accordingly.

So you should have something like this:

  <b-form-group
    label="Order type"
    v-slot="{ ariaDescribedby }"
    label-align="left"
  >
    ...
  </b-form-group>