CODEWITHSUNDEEP
csstwitter-bootstrap
J.Pip
J.Pip

Reputation: 4613

twitter bootstrap 3 input-group-addon not all the same size

Basically I have a couple of input fields which have a span prepended with some text. When I try to set col-lg-4 and col-lg-8 on the input-group-addon and the input field itself, it doesn't do what I expected it to do and resize them.

<div class="input-group">
   <span class="input-group-addon">some text</span>
   <input type="text" class="form-control" id="current_pwd" name="current_pwd" />
</div>

Can anyone help me getting the input-group-addon get the same size?

I've created a fiddle here: http://jsfiddle.net/Dzhz4/ that explains my problem.

Anyone that can shed some light please?

Upvotes: 54

Views: 53503

Answers (2)

rictionaryFever
rictionaryFever

Reputation: 761

.input-group-addon { width: 50px; } // Or whatever width you want

.input-group { width: 100%; }

The first part sets the width of your addons, the second forces the inputs to take up all of their parent container.

Upvotes: 15

Falguni Panchal
Falguni Panchal

Reputation: 8981

try this

http://jsfiddle.net/Dzhz4/1/

.input-group-addon {
    min-width:300px;// if you want width please write here //
    text-align:left;
}

Upvotes: 93

Related Questions