CODEWITHSUNDEEP
csstwitter-bootstrap
b85411
b85411

Reputation: 10040

Size of bootstrap input field

I currently have:

<input name="test" type="text" class="form-control" placeholder="Type here" size="4" maxlength="4">

But the input box still takes up 100% of width.

If I remove the botostrap class form-control then I obviously lose the styling, but the box takes up the 4 character width I intended.

How do I get it to take the width of 4, while also keeping the bootstrap styling?

Upvotes: 0

Views: 13776

Answers (4)

blayderunner123
blayderunner123

Reputation: 306

HTML: 

<div class="form-group">
        <input id="test" name="test" type="text" class="form-control" placeholder="Type here">
</div>

CSS: 

.form-group #test{
    width:50%!important;
}

Example: jsFiddle

Upvotes: 0

Akash Negi
Akash Negi

Reputation: 425

You can simple add new class with class="form-control new-input" like below

html

<input type="text" class="form-control new-input">

Css

.new-input{width:100px}

thats it :)

Upvotes: 2

Mukul Kant
Mukul Kant

Reputation: 7122

Its because of .form-control class ,which is bootstrap default class, you have to inherit this class.

for example:-

This is default 

.form-control {
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: #555;
    display: block;
    font-size: 14px;
    height: 34px;
    line-height: 1.42857;
    padding: 6px 12px;
    width: 100%;

}

Use like this:-

<div class="wrap">
   <input name="test" type="text" class="form-control" placeholder="Type here" size="4" maxlength="4">
<div>



.wrap .form-control {
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
        color: #555;
        display: block;
        font-size: 14px;
        height: 34px;
        line-height: 1.42857;
        padding: 6px 12px;
        /*width: 100%;*/ remove this
}

Hope i'll helps you.

Upvotes: 2

Sachi Tekina
Sachi Tekina

Reputation: 1810

Add a local styling, somehow like:

<input name="test" type="text" class="form-control" placeholder="Type here" style="width:<size value here>" maxlength="4">

Upvotes: 0

Related Questions