I want to align a text, "OR", in middle of two text boxes. I am using bootstrap and trying to put "OR" in between of two text boxes like so:
<div class="form-group row"><div class="col-md-5"><label class=" control-label " style="font-weight:bold;" for="assrTrackOrder_Pin">Pin</label><input class="form-control" type="text" id="assrTrackOrder_Pin" name="assrTrackOrder.Pin" value="" /><span class="text-danger field-validation-valid" data-valmsg-for="assrTrackOrder.Pin" data-valmsg-replace="true"></span></div><div > OR</div><div class="col-md-6"><label class=" control-label " style="font-weight:bold;" for="assrAddress_FullAddress">Mailing Address</label><input class="form-control" type="text" id="assrAddress_FullAddress" name="assrAddress.FullAddress" value="" /><span class="text-danger field-validation-valid" data-valmsg-for="assrAddress.FullAddress" data-valmsg-replace="true"></span></div></div>The image is like this:
I want "OR" to be aligned with text boxes in the middle. Right now, it is at the top of PIN and Mailing address. I tried putting this class for label "OR" like this:
<div class="col-md-1 d-inline-block align-middle mr-2"> OR</div>but still "OR" is aligned at the top. How can I put "OR" aligned in the center of the two text boxes.