Gerald Davis
Gerald Davis

Reputation: 4549

How to use input prepend (or append) in bootstrap 3 without breaking inline form

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.

http://bootply.com/101947

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

Answers (1)

Anam
Anam

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

Related Questions