How i can add a button inside an input box using bootstrap - html

Question

I am trying to find a way to enter a button inside input field as follow:-
can anyone advice ?

Answer 1

There is no native bootstrap solutions. You can do this with custom code.
.custom-search {
position: relative;
width: 300px;
}
.custom-search-input {
width: 100%;
border: 1px solid #ccc;
border-radius: 100px;
padding: 10px 100px 10px 20px;
line-height: 1;
box-sizing: border-box;
outline: none;
}
.custom-search-botton {
position: absolute;
right: 3px;
top: 3px;
bottom: 3px;
border: 0;
background: #d1095e;
color: #fff;
outline: none;
margin: 0;
padding: 0 10px;
border-radius: 100px;
z-index: 2;
}
<div class="custom-search">
<input type="text" class="custom-search-input" placeholder="Enter your email">
<button class="custom-search-botton" type="submit">Subscribe</button>
</div>
Bootstrap mixed solution, according to bootstrap styles.
.custom-search {
position: relative;
}
.custom-search-input {
width: 100%;
padding-right: 100px !important;
box-sizing: border-box;
}
.custom-search-botton {
position: absolute;
right: 3px;
top: 3px;
bottom: 3px;
line-height: 1 !important;
z-index: 4;
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<div class="input-group custom-search">
<input type="text" class="form-control custom-search-input" placeholder="Enter your email">
<button class="btn btn-primary custom-search-botton" type="submit">Subscribe</button>
</div>

Answer 2

You cant put a button inside a input field with bootstrap only but you can use custom css to move the button inside the input field. I created a small example for you (I used bootstrap 4):
input[type="text"] {
width: 200px;
height: 50px;
padding-right: 50px;
}
.example {
margin: 5px -90px 5px;
height: 40px;
width: 80px;
z-index: 100;
}
.test-div {
width: 200px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="test-div">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<button class="btn btn-outline-secondary example" type="button">Button</button>
</div>
</div>

Answer 3

I changed your source and use font awesome. I think it became more nice, isn't it?
.custom-search {
position: relative;
}
.custom-search-input {
width: 100%;
padding-right: 100px !important;
box-sizing: border-box;
}
.custom-search-botton {
position: absolute;
right: 35px;
top: 1px;
bottom: 3px;
line-height: 1 !important;
z-index: 4;
border: none;
border-radius: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9"
crossorigin="anonymous">
<div class="input-group custom-search" >
<input type="text" (keyup.enter)="onSearch()" class="form-control custom-search-input" placeholder="Search" aria-label="Search">
<i class="btn fas fa-search custom-search-botton" type="button"></i>
</div>