BootstrapVue control columns number in form group

Question

I have a simple form group in BootstrapVue with a couple of input fields and select boxes which are added dynamically on a button click and I need to display another element (button, div, whatever) to the right of it so I can bind a click event to it to remove the field.

This is my code (taken from the BootstrapVue page).

<b-card bg-variant="light">
    <b-form-group horizontal
                  label="Street:"
                  label-class="text-sm-right"
                  label-for="nestedStreet">
      <b-form-input id="nestedStreet"></b-form-input>
      <div>X</div> # This gets pushed down to the next line...I need it in-line
    </b-form-group>
    <b-form-group horizontal
                  label="City:"
                  label-class="text-sm-right"
                  label-for="nestedCity">
      <b-form-input id="nestedCity"></b-form-input>
    </b-form-group>
    <b-form-group horizontal
                  label="State:"
                  label-class="text-sm-right"
                  label-for="nestedState">
      <b-form-input id="nestedState"></b-form-input>
    </b-form-group>
    <b-form-group horizontal
                  label="Country:"
                  label-class="text-sm-right"
                  label-for="nestedCountry">
      <b-form-input id="nestedCountry"></b-form-input>
    </b-form-group>
</b-card>

I see that BootstrapVue automaticaly adds a class col-sm-9 to every row in the form-group that's why, if I add another div after it, it will be pushed down to the next line but I want it to appear in-line. Is it possible to set the number of columns in the form-group row?

jedi jedi · Accepted Answer · 2019-01-14T13:33:31

I figured out that rewriting it using regular Bootstrap <div class="form-group"> tag can allow me to customize the input field class, so instead of using <b-form-group> I used <div class="form-group">.

BootstrapVue control columns number in form group

1 Answers