Adding dollar prefix to bootstrap input box

Question

Is there anyway bootstrap way/style to add non-editable prefix into the inputbox? such as the dollar sign. the prefix has to be included inside the input box.

currently I'm doing something like this, but the sign is out of the inputbox.

<div class="input-group input-medium ">
    <input type="text" class="form-control input-lg" readonly="">
    <span class="input-group-btn">
        $
    </span>
</div>

Answer 1

Twitter Bootstrap Version 3 has a class named input-group-addon for this feature.

You probably want this

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

Js Fiddle Demo - Basic

Update: To remove the background from the $ sign- You just need to overwrite the input-group-addon class

.input-group-addon
{
    background-color:#FFF;
}

Js Fiddle Demo - Without Background

If you want to remove the border from right side of $ sign, You can add this css as well

.input-group .input-group-addon + .form-control
{
    border-left:none;
}

Js Fiddle Demo - Without Border

Answer 2

HTML:

<div class="col-xs-6" >
    <div class="left-inner-addon">
        <span>$</span>
        <input type="text" class="form-control" placeholder="Amount" />
    </div>
</div>
<div class="col-xs-6" >
    <div class="right-inner-addon">
        <span>$</span>
        <input type="search" class="form-control" placeholder="Amount" />
     </div>
</div>

CSS:

.left-inner-addon {
    position: relative;
}
.left-inner-addon input {
    padding-left: 22px;    
}
.left-inner-addon span {
    position: absolute;
    padding: 7px 12px;
    pointer-events: none;
}

.right-inner-addon {
    position: relative;
}
.right-inner-addon input {
    padding-right: 30px;    
}
.right-inner-addon span {
    position: absolute;
    right: 0px;
    padding: 7px 12px;
    pointer-events: none;
}

jsFiddle

Answer 3

Bootstrap Versions 4 and 5

This functionality changed significantly between versions 3 and 4. The class input-group-addon has been removed in favor of using input-group-text inside of either input-group-prepend or input-group-append.

To prepend text

<!-- importing Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text">$</span>
    </div>
    <input type="text" class="form-control" placeholder="0.00" />
</div>

To append text

<!-- importing Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="input-group">
    <input type="text" class="form-control" placeholder="email" />
    <div class="input-group-append">
        <span class="input-group-text">@gmail.com</span>
    </div>
</div>

To change the background color of the added text

.input-group-text
{
    background-color:#FFF;
}