user3436467 user3436467 - 3 months ago 22
CSS Question

bootstrap input group alignment issue

Creating a input group in bootstrap 4 but one of the buttons seems to be out of alignment.

here is my code

<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="upload file...">
<span class="input-group-btn">
<label class="btn btn-secondary">browse<input name="derfile" type="file" style="display: none;"></label>
<button class="btn btn-primary" type="submit">Submit</button>
</span>
</div>
</div>


Here is my fiddle

appreciate some assistance

Answer

To achieve expected result use below

.btn{
  vertical-align:top
}

https://jsfiddle.net/Nagasai_Aytha/0j0gmbjn/3/