CODEWITHSUNDEEP
twitter-bootstrapbootstrap-4
Francisco
Francisco

Reputation: 561

Bootstrap input-group-prepend not working

I am following the official documentation and looking at many examples and the same problems to other people but I do not see any solution to this.

In the official documentation is shown correctly, example that I am seeing is the following https://getbootstrap.com/docs/4.0/components/input-group/#basic-example

I copy and paste the following code from the official documentation

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">@</span>
  </div>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

version bootstrap:

Bootstrap v4.0.0-beta.2 (https://getbootstrap.com)

Copyright 2011-2017

The Bootstrap Authors Copyright 2011-2017 Twitter, Inc. icensed under

MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)

The code is not shown as in the official page, it just does not work, I have managed to make it work with input-group-addon but I would like to know why it does not work with the code of the official website since I am using the same version of bootstrap.

I have also followed this thread without any solution: Creating Bootstrap 4 input-group with beta 3 prepend/append not working

Upvotes: 4

Views: 8913

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362320

In Bootstrap 4 Beta2, the class name was input-group-addon

<div class="input-group mb-3">
  <div class="input-group-addon">
    <span class="input-group-text" id="basic-addon1">@</span>
  </div>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

https://www.codeply.com/go/qJ5GDNQqb3 (Bootstrap 4 Beta 2)

Now that Bootstrap 4.0.0 is here, the class name is input-group-prepend which is what is shown in the docs. The docs are for 4.0.0, not 4.0 Beta 2.

https://www.codeply.com/go/o7QZ2u7eCX (Bootstrap 4.0.0)

Either upgrade to Bootstrap 4.0.0, or use input-group-addon for Bootstrap 4.0 Beta 2

Upvotes: 11

Related Questions