unable to place submit button inside input in bootstrap 4.3.1

Question

Am working bootstrap 4.3.1 and i am trying to place submit button inside input and tried below method and more form stackoverflow.

since my input is rounded-pill i need to place button inside input filed.

How can i place button inside input field

 @import url("https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css");

 <div class="input-group col-md-4"> <input type="text" class="form-control rounded-pill" id="x__p__address__x" size="70" style="font-size:small" /> <span class="input-group-append"> <button type='submit' class="btn btn-primary rounded-circle">go</button> </span> </div>

Answer 1

add this

.input-group-append {
    position: absolute;
    right: 0;
}
.x__p__address__x {
    padding-right: 40px;
}

Answer 2

Use absolute to absolutely position the button inside the input field. Also add the z-index property to ensure it stays at top of input when you focus the input field.

 @import url("https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"); body { margin: 20px; } .input-group { position: relative; } .form-control { padding-right: 47px; } .input-group-append { position: absolute; right: 15px; z-index: 10; }

 <div class="input-group col-md-4"> <input type="text" class="form-control rounded-pill" id="x__p__address__x" size="70" style="font-size:small" /> <span class="input-group-append"> <button type='submit' class="btn btn-primary rounded-circle py-1">go</button> </span> </div>