I grabbed this code directly from bootstrap's official documentation:
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>
To adjust the input width, I included width:50%, removed the final input-group, and experimented with wrapping the button in a form-group. However, these changes did not produce the desired outcome. The input field and button still appear on separate lines rather than inline as depicted in bootstrap's documentation.
Upon inspecting with firebug, I couldn't identify how bootstrap's documentation limits the width of the form elements. Even their .bs-example class didn't provide any clues:
/* CSS styles here */
Despite this, the example in bootstrap's docs clearly displays the inline form elements on the same row.
Here is the jsfiddle link for reference.