Bootstrap input-group-addon does not work

Question

I have just upgraded from bootstrap 2.3.2.
I have copy / pasted the example from the documentation but the add-on doesn't have effect on the character within.

The code I am trying:

<div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" placeholder="Username">
</div>

The @ just looks like a normal at with no background or anything.

What am I doing wrong?

Answer 1

I don't find a problem with your code see: http://bootply.com/69981 You migrate from 2.3.2 to 3 RC1? I think you include the wrong css. On the main site (http://twitter.github.io/bootstrap/) you will find the docs for Bootstrap 3 now. The docs for Twitter's Bootstrap 2.3.2 are move to http://twitter.github.io/bootstrap/2.3.2/.

You can't download the compiled CSS for version 3 now. But you can download the code from Github (https://github.com/twbs/bootstrap/tree/3.0.0-wip) and compile it with Grunt. Or use CDN: http://blog.netdna.com/opensource/bootstrapcdn/bootstrapcdn-now-serving-3-0-0-rc1/

Bootstrap 3 will be released on 19 aug 2013, see: http://blog.getbootstrap.com/2013/07/18/ante-up/

Twitters Bootstrap 2.3.2:

<div class="input-prepend">
    <span class="add-on">@</span>
    <input class="span2" id="prependedInput" type="text" placeholder="Username">
</div>

Bootstrap 3.0.0 (RC1):

<div class="input-group">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>