Add button inside an Input Tag - css

Question

I have created a login form. I want to show a text/button that says "FORGOT?" on the right side of the password field.
For reference you guys can open this site and click on login : https://www.adda247.com/
<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">
<button class="form-control btn btn-info " style="background:#4568B2;height:40px">
<i class="fa fa-facebook"></i> Continue with Facebook
</button>
</div>
<br><br><br>
<div class="col-md-12 col-sm-12 col-xs-12">
<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>
<br><br><br>
<div class="col-md-5 col-sm-5 col-xs-5" ></div>
<div class="col-md-2 col-sm-2 col-xs-2" align="center"><b>OR</b></div>
<div class="col-md-5 col-sm-5 col-xs-5"></div><br><br><br>
<div class="col-md-12 col-sm-12 col-xs-12">
<input type="text" name="name" class="form-control" style="height:40px;" placeholder="Email">
</div>
<br><br><br>
<div class="col-md-12 col-sm-12 col-xs-12 form-group has-feedback">
<input type="text" name="pass" class="form-control" style="height:40px;" placeholder="Password">
<p class="form-control-feedback">Forgot?</p>
</div>
<br><br><br>
<div class="col-md-12 col-sm-12 col-xs-12">
<button name="login" class="btn btn-warning form-control" style="height:40px;font-size:20px">Login</button>
</div>
<br><br><br>
<div class="col-md-12 col-sm-12 col-xs-12">
<p align="center" style="font-size:16px">Don't Have an Account?
<span >SIgn Up</span>
</p>
</div>
</div>
</form>
Hope you can help me !

Answer 1

If I understood the question correct this is the solution?
You just have to manipulate the display arguments in your css
<div class="container">
<div class="col-md-12 col-sm-12 col-xs-12">
<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>
<br><br><br>
<div class="col-md-5 col-sm-5 col-xs-5" ></div>
<div class="col-md-2 col-sm-2 col-xs-2"><b>OR</b></div>
<div class="col-md-5 col-sm-5 col-xs-5"></div><br><br><br>
<div class="col-md-12 col-sm-12 col-xs-12">
<input type="text" name="name" class="form-control" style="height:40px;" placeholder="Email">
</div>
<br><br><br>
<div class="col-md-12 col-sm-12 col-xs-12 form-group has-feedback">
<input type="text" name="pass" class="form-control" style="height:40px; width: 90%; display: inline-block" placeholder="Password">
<a class="form-control-feedback" style="display:inline-block; width:5%" href="#">Forgot?</a>
</div>
<br><br><br>
<div class="col-md-12 col-sm-12 col-xs-12">
<button name="login" class="btn btn-warning form-control" style="height:40px;font-size:20px">Login</button>
</div>
<br><br><br>
<div class="col-md-12 col-sm-12 col-xs-12">
<p style="font-size:16px">Don't Have an Account?
<span >SIgn Up</span>
</p>
</div>
</div>

Answer 2

Add padding on password field padding-right: 80px

Answer 3

Set the password field container to position: relative then set "FORGOT?" hint to position: absolute and right: 1em (so that it's fixed to its righ) then design it as you want using CSS or bootstrap classes (you'll still need a bit of pure CSS, I used the same padding and height as the input in this example).
To avoid overlapping issues, I set a white background on the "FORGOT?" hint so any overlapping text is not shown (you could add it through the bg-white class as well) but you could set a padding-right on your <input> that equals the width of the "FORGOT?" hint.
.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 >SIgn Up</span>
</p>
</div>
</div>
</form>
I suggest you to not use <br> elements to create spaces between your items, bootstrap has classes for that (such has .mb-4 for example).

Answer 4

I have used the position relative and absolute method to move the button inside the input box.
Remove br and use mt- and mb- values to get spacing in bootstrap 4.
.form-group.has-feedback {
position: relative;
}
.form-control-feedback {
position: absolute;
top: 0;
right: 15px;
padding: 6px 8px 9px 8px;
display: inline-block;
}
.form-group.has-feedback .form-control {
padding: 0 70px 0 0;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<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>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<form>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 mb-3">
<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-3">
<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"></div>
<div class="col-md-2 col-sm-2 col-xs-2" align="center"><b>OR</b></div>
<div class="col-md-5 col-sm-5 col-xs-5"></div>
<div class="col-md-12 col-sm-12 col-xs-12 my-3">
<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">
<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-3">
<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">
<p align="center" style="font-size:16px">Don't Have an Account?
<span>SIgn Up</span>
</p>
</div>
</div>
</form>