[Vuejs]-How to align the button below label?

by

0👍

✅

The reason this is happening if because you’re placing it inside <b-form> with the inline prop.

If you place it outside the form it should be placed below.
If you want the button to submit the form, you can target it using the form attribute which targets the id of your <b-form>.

<b-form inline id="my-form" label-align-sm="right">
  <label for="branch">⠀⠀⠀⠀⠀⠀⠀⠀Branch:</label>
  <div class="col-sm-2">
    <b-form-input></b-form-input>
  </div>
</b-form>
<b-button type="submit" form="my-form" variant="outline-primary">Search</b-button>

An alternativ is to use the Bootstrap grid system, and apply the class col-12 to the div wrapping your <b-button>.

<b-form inline id="my-form" label-align-sm="right">
  <label for="branch">⠀⠀⠀⠀⠀⠀⠀⠀Branch:</label>
  <div class="col-sm-2">
    <b-form-input></b-form-input>
  </div>
  <div class="col-12">
    <b-button variant="outline-primary">Search</b-button>
  </div>
</b-form>

Leave a comment