When I use BootstrapVue to create a form group with input fields and select boxes that are dynamically added on a button click, I need to display another element (such as a button or div) to the right of it for removing the field by binding a click event.
Below is an example of 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>
BootstrapVue automatically adds a class col-sm-9 to every row in the form-group, causing any additional div element to be pushed down to the next line instead of appearing in-line. Is there a way to set the number of columns in the form-group row?