Add append object to form-group input field in Bootstrap 4

Question

I want to append a form-group input field with some additional informations. The form is based on a form grid layout using the form-group tag. I know it is possible to add an input-group-append to an input-group in order to append something to the field. But I don´t know how to combine both, to have a appendency at a form-group field.

Here are the two components, the form with the grid structure and the appended input field.

How is it possible, to add the appendency (@example.com) to the forms email input?

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /> <form> <div class="form-row"> <div class="form-group col-md-6"> <label for="inputEmail4">Email</label> <input type="email" class="form-control" id="inputEmail4" placeholder="Email"> </div> <div class="form-group col-md-6"> <label for="inputPassword4">Password</label> <input type="password" class="form-control" id="inputPassword4" placeholder="Password"> </div> </div> <button type="submit" class="btn btn-primary">Sign in</button> </form> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2"> <div class="input-group-append"> <span class="input-group-text" id="basic-addon2">@example.com</span> </div> </div>

Answer 1

I hope this helps

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /> <form> <div class="form-row"> <div class="form-group col-md-6"> <label for="inputEmail4">Email</label> <div class="input-group mb-3"> <input type="email" class="form-control" id="inputEmail4" placeholder="Email" aria-describedby="basic-addon2"> <div class="input-group-append"> <span class="input-group-text" id="basic-addon2">@example.com</span> </div> </div> </div> <div class="form-group col-md-6"> <label for="inputPassword4">Password</label> <input type="password" class="form-control" id="inputPassword4" placeholder="Password"> </div> </div> <button type="submit" class="btn btn-primary">Sign in</button> </form>