Menu
I am using .input-lg to make the form fields large. My expectation is that when the viewport shrinks (less than 768px by bootstrap default), that the form fields would become smaller and take on the normal settings, but they are not. Any ideas? Does bootstrap handle this scenario?
UPDATE:
HTML
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="searchZipcode">Zipcode</label>
<input type="text" class="form-control input-lg input-search" id="searchZipcode" placeholder="Zipcode of home?">
</div>
</form>
777
You can apply the bootstrap classes to make the width responsive. You can give it a border if you want to, to make it look like an input. Use textContent instead of value to access the data, and use the focusout event instead of the change event.
The .form-group class is the easiest way to add some structure to forms. It provides a flexible class that encourages proper grouping of labels, controls, optional help text, and form validation messaging. By default it only applies margin-bottom , but it picks up additional styles in .form-inline as needed.
Bootstrap allows to change the size of form controls using . form-control classes. For default size . form-control is used, for smaller size we can use .
I think you must put your input within a div. the input-xx class is not, lets say, responsive :D
<div class="col-xx-xx"> // change xx-xx to some accepted value like sm-4, md-10, whatever it fits you.
<input class="input-lg">
</div>
Bootstrap cannot handle this scenario. Thanks everyone for the comments and answers.
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
