Установите контейнер поля пароля на position: relative, затем установите "ЗАБЫЛИ?"Подсказка к position: absolute и right: 1em (чтобы она была исправлена), затем спроектируйте ее так, как вы хотите, используя CSS или классы начальной загрузки (вам все еще понадобится немного чистого CSS, я использовал те же padding и height в качестве входных данных в этом примере).
Чтобы избежать проблем с наложением, я установил белый фон на "ЗАБЫЛИ?"подсказка, поэтому любой перекрывающийся текст не отображается (вы также можете добавить его через класс bg-white), но вы можете установить padding-right для вашего <input>, который равен ширине "ЗАБЫЛИ?"подсказка.
.form-group.has-feedback {
position: relative;
}
.form-control-feedback {
position: absolute;
display: inline-block;
top: 1px;
right: 1em;
background: #fff;
bottom: 0;
margin: 0;
height: calc(1.5em + .75rem + 2px);
padding: .375rem .75rem;
border-radius: 3px;
}
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 mb-4">
<button class="form-control btn btn-info " style="background:#4568B2;height:40px">
<i class="fa fa-facebook"></i> Continue with Facebook
</button>
</div>
<div class="col-md-12 col-sm-12 col-xs-12 mb-4">
<button class="form-control btn btn-default" style="height:40px;border:2px solid black">
<i class="fa fa-google"></i> Continue with Google
</button>
</div>
<div class="col-md-5 col-sm-5 col-xs-5 mb-4" ></div>
<div class="col-md-2 col-sm-2 col-xs-2 mb-4" align="center"><b>OR</b></div>
<div class="col-md-5 col-sm-5 col-xs-5 mb-4"></div>
<div class="col-md-12 col-sm-12 col-xs-12 mb-4">
<input type="text" name="name" class="form-control" style="height:40px;" placeholder="Email">
</div>
<div class="col-md-12 col-sm-12 col-xs-12 form-group has-feedback mb-4">
<input type="text" name="pass" class="form-control" style="height:40px;" placeholder="Password">
<p class="form-control-feedback">FORGOT?</p>
</div>
<div class="col-md-12 col-sm-12 col-xs-12 mb-4">
<button name="login" class="btn btn-warning form-control" style="height:40px;font-size:20px">Login</button>
</div>
<div class="col-md-12 col-sm-12 col-xs-12 mb-4">
<p align="center" style="font-size:16px">Don't Have an Account?
<span ><a href="#" style="color: orange">SIgn Up</a></span>
</p>
</div>
</div>
</form>
Я предлагаю вам не использовать элементы <br> для создания пробелов между вашими элементами, у начальной загрузки есть классы для этого (например, .mb-4).