CODEWITHSUNDEEP
twitter-bootstrap
Raza Ahmed
Raza Ahmed

Reputation: 2751

bootstrap input-group-lg button issue with input

When I use input-group then every thing is ok but when I use input-group-lg then Go button goes to next line.

<div class="input-group-lg">
    <input type="text" class="form-control" placeholder="http://">
      <span class="input-group-btn">
      <button class="btn btn-default " type="button">Go!</button>
    </span>
</div>

I solved it with pull-left in input but now its not displaying correctly in small resolutions

Upvotes: 1

Views: 717

Answers (2)

arielduarte
arielduarte

Reputation: 536

I have fixed this way:

I added "id=search_button" for my button

<div class="input-group input-group-lg">
<input type="text" class="form-control" placeholder="Username"/>
<span class="input-group-btn">
<button id="search_button" class="btn btn-primary" type="button">GO</button>
</span>
</div>

I apply this style to my button

#search_button {
    width: 90px;
    margin: 0 auto;
    text-align: justify;
}

That's all

Upvotes: 0

cvrebert
cvrebert

Reputation: 9279

input-group-lg is a modifier class that needs to be used in addition to input-group, not instead of input-group. So your code snippet should be:

<div class="input-group input-group-lg">
  <input type="text" class="form-control" placeholder="http://">
  <span class="input-group-btn">
    <button class="btn btn-default " type="button">Go!</button>
  </span>
</div>

Most of Bootstrap's classes obey this sort of pattern.

Upvotes: 6

Related Questions