CODEWITHSUNDEEP
htmlcssformstwitter-bootstrap
Hanfei Sun
Hanfei Sun

Reputation: 47061

How to make the input full-length in a column in Bootstrap?

Bootply codes can be seen here => http://www.bootply.com/QpvisrtAJR

I want the input box to be longer, however, the width:100% doesn't work for it.. And I don't want to use width: xxxpx or size=xxx to make it longer because it will be un-responsive in different resolution..

Does anyone have ideas about this?

Upvotes: 0

Views: 2102

Answers (3)

ElwoodP
ElwoodP

Reputation: 428

Your input rule isn't actually being applied. It is not specific enough so is being overwritten by a default bootstrap rule. Try this instead:

.form-inline button.form-control,
#contain_word
{
    display: block;
    width: 100%;
}

http://www.bootply.com/Qh2VwydnHx

Also you have a an erroneous character in your html where you give the input field an id. Should be:

<input type="email" class="form-control" id="contain_word">

Not:

<input type="email" class="form-control" id="contain_word`">

Upvotes: 2

Charles Ingalls
Charles Ingalls

Reputation: 4561

You can use the calc() method to have the input field 100% in width but still float left to the label.

Updated Bootply: http://www.bootply.com/2K3ZIWsuWy

Calc() is compatible with most browsers except Opera Mini. For Blackberry you still need -webkit.

Check out the compatibility table here: http://caniuse.com/calc

Upvotes: 2

Alex Wilson
Alex Wilson

Reputation: 2419

You can add your class with a specified width

or override existing styles, but it is better to create your own style file

http://www.bootply.com/QpvisrtAJR#

div class="row">
        <form class="form-inline" role="form">


            <div class="form-group col-sm-6 no-padding">
              <label for="contain_word`">Containing word(s): </label>
                <input class="form-control test" id="contain_word`" type="email">
            </div>
            <div class="col-sm-2">
                <button class="btn btn-primary form-control">Search</button>
            </div>
            <div class="col-sm-2">
                <button class="btn btn-primary form-control">Clear</button>
            </div>

        </form>
    </div>

Upvotes: 0

Related Questions