CSS3 Bootstrap 4 How to handle theinput error message with inline inputs

Question

I have currently 2 input fields on the same line to be validated with vee-validate (I am using Vue.js).

The validation message is displayed at the end of the input-group, not inside it.

Here is the html code:

<div class="form-group row d-flex justify-content-center">
  <div class="input-group input-group-lg col-md-3" >
    <input v-validate="'required'" name="username" v-model="username" type="text" class="form-control" placeholder="Your Name" aria-label="Name">
     <span v-show="errors.has('username')" class="help is-danger">{{ errors.first('username') }}</span>
  </div>
  <div class="input-group input-group-lg col-md-4" >
    <input v-validate="'required|email'" name="email" v-model="email" type="text" :class="{'input': true, 'is-danger': errors.has('email') }" class="form-control" placeholder="Your Email Address" aria-label="Email">
     <span v-show="errors.has('email')" class="help is-danger">{{ errors.first('email') }}</span>
  </div>
</div>

What's wrong with my code?

Answer 1

Use Bootstrap .help-block class in your error text.