How to align the button below label? - vue.js

Question

I tried to put the 'search' button below the 'branch' label, here's my snippet
<template>
<base-header class="pb-4 pb-5 pt-6 pt-md-6 bg-gradient-success">
<template>
<div>
<b-form inline>
<label for="status">Status⠀⠀⠀ :</label>
<div class="col-sm-2">
<b-form-input v-model="text"></b-form-input>
</div>
<div class="branch">
<div class="col-8 text-right">
<b-form inline label-align-sm="right">
<label for="branch">⠀⠀⠀⠀⠀⠀⠀⠀Branch:</label>
<div class="col-sm-2">
<b-form-input v-model="text"></b-form-input>
</div>
<div>
<b-button variant="outline-primary">Search</b-button>
</div>
</b-form>
</div>
</div>
</b-form>
</div>
<div>
<b-form inline>
<label for="storecode">Store Code:</label>
<div class="col-sm-2">
<b-form-input v-model="text"></b-form-input>
</div>
</b-form>
</div>
And here's the result after all current view
Thanks in advance☺

Answer 1

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>