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

Question

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?

Answer 1

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`">

Answer 2

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

Answer 3

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>