Reputation: 4549
In Bootstrap 3 the necessary code to prepend a value to the input text box
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
http://getbootstrap.com/components/#input-groups
does not seem to preserve the formatting for an inline form http://getbootstrap.com/css/#forms-inline.
Example of code. First segment is functional inline form. Second segment adds code for prepend and it breaks the inline form causing it to be vertical (normal) instead.
What am I missing here I have wasted more time than should be necessary getting this two features which work fine separately to play nice.
Upvotes: 3
Views: 10844
Reputation: 12189
Use grid
<div class="form-group col-md-2">
I am not sure, this is the right way to do that but it always work for me.
<form class="form-inline" role="form">
<div class="form-group col-md-2">
<div class="input-group ">
<span class="input-group-addon">@</span>
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
Upvotes: 2