CODEWITHSUNDEEP
csstwitter-bootstrap
andrey
andrey

Reputation: 1175

bootstrap input field and input-addon not on the same line

Does anybody can explain me why input-group-addon stay above input field?

HTML

   <div class="container">
  <div class="row">
    <div class="center">
      <form class="form-horizontal" id="formLogin">
        <div class="form-group">
          <span class="input-group-addon"><i class="fa fa-at"></i></span>
          <input type="email" class="form-control" id="inputEmail" placeholder="Email">
        </div>
        <div class="form-group">
          <span class="input-group-addon"><i class="fa fa-lock"></i></span>
          <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>
        <div class="form-group">
          <input type="submit" class="btn btn-primary btn-block" value="Login">
          <a href="#" class="btn btn-default btn-block" id="linkRegister">SignUp</a>
        </div>
    </div>
  </div>
  </form>

CSS

.center {
    width: 50%;
    height: 50%;
    margin: auto;
    min-width: 225px;
    max-width: 275px;
    position: relative;
    top: 180px;
}

Example http://codepen.io/anon/pen/BNoqWZ

Thanks.

Upvotes: 1

Views: 1388

Answers (1)

Tims
Tims

Reputation: 2007

You should be using input-group instead of form-group.

Refer to the bootstrap docs here: http://getbootstrap.com/components/#input-groups

You have also got your form tags out of order with the other tags resulting in invalid html (and you are missing a closing div).

Here you go.

<div class="container">
  <div class="row">
    <div class="center">
      <form class="form-horizontal" id="formLogin">
        <div class="input-group">
          <span class="input-group-addon"><i class="fa fa-at"></i></span>
          <input type="email" class="form-control" id="inputEmail" placeholder="Email">
        </div>
        <div class="input-group">
          <span class="input-group-addon"><i class="fa fa-lock"></i></span>
          <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>
        <div class="input-group">
          <input type="submit" class="btn btn-primary btn-block" value="Login">
          <a href="#" class="btn btn-default btn-block" id="linkRegister">SignUp</a>
        </div>
      </form>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions