How to add button at side of input text form with bootstrap - css

Question

I've got this piece of code:
<h2>Workout Selector</h1>
<div class="form-group">
<label for="workout-name">Search by Keywords (Comma Separated):</label>
<input type="text" class="form-control" id="workout-keywords">
</div>
Which produces this:
But I want to add a button in the place of this red box:
(What do I need to do?)
Edit: It should not be the submit button

Answer 1

try this code and style color it as you want.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
</div>
</div>
ref : https://v4-alpha.getbootstrap.com/components/input-group/#button-addons

Answer 2

i guess you can work with cols, sth like:
<div class="form-group">
<div class="col-md-12">
<label for="workout-name">Search by Keywords (Comma Separated):</label>
</div>
<div class="col-md-8">
<input type="text" class="form-control" id="workout-keywords">
</div>
<div class="col-md 4">
<span class="btn btn-default">Button</span>
</div>
</div>

Answer 3

You can use position absolute to position the button above the input and then use padding right for the input to prevent the text to get hidden by the absolute positioned button. Try something like this:
<h1>Workout Selector</h1>
<div class="form-group">
<label for="workout-name">Search by Keywords (Comma Separated):</label>
<input type="text" class="form-control" id="workout-keywords">
<button type="submit">Submit</button>
</div>
.form-group {
position: relative;
padding: 0;
input {
padding-right: 60px;
height: 25px;
line-height: 25px;
width: 100%;
}
button {
position: absolute;
right: 0;
top: 0;
width: 60px;
line-height: 25px;
text-align: center;
z-index: 300;
}
}

Answer 4

I think you can achieve what you want to with display flex, input-group and a trick on input-group-addon class/element. Take a look.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline" style="width:300px;margin:10px;">
<div class="form-group">
<label class="sr-only" for="test">input here something</label>
<div class="input-group" style="display:flex;">
<input type="text" class="form-control" id="test" placeholder="input here something">
<button type="button" class="input-group-addon btn btn-primary" style="width:50px;">go</button>
</div>
</div>
</form>
Hope this helps.