Bootstrap - Input-group-btn Doesn't Clip To Input-group

I'm new to bootstrap and I'm trying to implement it in my web app. I want to group three different parts so that its looking nice, but the result of the code below makes the

Solution 1:

Use the class pull-left, this will clip it to the <input/>. See updated code below:

<div class="input-group">
<div class="input-group-addon">
    Add project:
</div>
<input type="text" class="form-control input-group" placeholder="Type new project here"/>
<div class="input-group-btn pull-left"> <!-- add pull-left here -->
    <button type="button" class="btn btn-default ">Add</button>
</div>

Share