I have this problem - I need to make 3 INPUT, 1 wide (across the width of the screen) and below 2 small (exactly half the width of the first INPUT element), but it turns out that the size they are not the same. How to make an exact match width dimensions?
<form class="navbar-form">
<label>Where are you going?</label>
<input type="text" class="span8" data-provide="typeahead" data-items="5" placeholder="City, attraction, address, or airport">
<label>When?</label>
<input type="text" class="datepicker span4" id="dpd1" placeholder="Choose Arrive Date">
<input type="text" class="datepicker span4" id="dpd2" placeholder="Choose Depart Date">
</form>
you can see all code here
Maybe you can try something like this to avoid the extra space on inputs:
<div class="wrapper">
<div class="row-fluid">
<input class="span12"/>
</div>
<div class="row-fluid">
<div class='span6'>
<input class="span12"/>
</div>
<div class='span6'>
<input class="span12"/>
</div>
</div>
</div>
Demo
Related
I'm making a form and I want the left half of the page to fill up the section. I have tried col-lg-4, changing the CSS width to 100%, nothing is changing the actual input field. I have searched Stack Overflow, but I couldn't find anything that worked. The first picture is what I have, and the second picture is what I was trying to recreate.
<section class="col-md-6">
<form class="form-group row">
<div class="form-group">
<input type="text" class="form-control" id="inputEmail" placeholder="Cool Person">
</div>
<div class="form-group">
<input type="email" class="form-control" id="inputEmail" placeholder="you#yourdomain.com">
</div>
<div class="form-group">
<input type="text" class="form-control" id="inputSubject" placeholder="what's up?">
</div>
<div class="form-group">
<textarea rows="6" class="form-control" placeholder="What's on your mind?"></textarea>
</div>
</form>
</section>
set css display property to inline-block and give width 100%
.form-control{
display:inline-block;
width:100%
}
ok first of all you cannot have two elements with the same id, because only the last element will get to have that id and the first one won't
to answer your question try to this in css
.form-group, .form-control {width : 100%;}
I'd rather though you'd give an id to your form and then call these classes as its children, like -#form_id .form-group {...
use bootstrap div as mentioned below and try
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" id="inputEmail"
placeholder="Cool Person">
</div>
<div class="form-group">
<input type="email" class="form-control" id="inputEmail" placeholder="you#yourdomain.com">
</div>
<div class="form-group">
<input type="text" class="form-control" id="inputSubject" placeholder="what's up?">
</div>
<div class="form-group">
<textarea rows="6" class="form-control" placeholder="What's on your mind?"></textarea>
</div>
</div>
<div class="col-sm-6">
Maps Section Comes Here!
</div>
</div>
</div>
I create design interface for web using Bootstrap 3. If it shown in large screen size, it looks like this:
but, if it shown in small screen size, it looks like this:
I've problem when it will be shown in small screen size. The script what I've done in
Bootply is not compatible in small size.
You need to place your label tags with your input tags inside the same columns.
DEMO
<div class="row">
<div class="col-md-3">
<label>Label1</label>
<input type="text" class="form-control" value="text1">
</div>
<div class="col-md-3">
<label>Label2</label>
<input type="text" class="form-control" value="text2">
</div>
<div class="col-md-3">
<label>Label3</label>
<input type="text" class="form-control" value="text3">
</div>
<div class="col-md-3">
<label>Label4</label>
<input type="text" class="form-control" value="text4">
</div>
</div>
I want to narrow the size of input boxes in the horizontal form.
I used col-sm-4 to make text boxes narrower.
<form class="form-horizontal">
<div class=" form-group">
<label class="col-sm-2 control-label">date</label>
<div class="col-sm-4">
<input name="date" type="text" class="form-control" />
</div>
</div>
</form>
For big size it works, however when I resize the form and make it smaller, suddenly, the length of input box will stretch and become larger. So for big screens the input will have 230px and for smaller screen it will have 608px
The fiddel http://jsfiddle.net/3YWkd/
I want that the size of text box remain the same during page shrink.
You just need to add the mobile (xs) classes, like so:
<div class="col-sm-4 col-xs-4">
<input name="fromDate" type="text" class="form-control" />
</div>
Or just leave the col-xs-4, no need for the sm in this case.
Edit:
Re: your comment, you may use slightly different html, like soQ
<div class=" form-group">
<div class="col-xs-2">
<label class="control-label" for="fromDate">date</label>
</div>
<div class="col-xs-4">
<input name="fromDate" type="text" class="form-control" />
</div>
</div>
fiddle
This should do it:
<form class="form-horizontal">
<div class=" form-group">
<label class="col-sm-2 col-xs-12 control-label">date</label>
<div class="col-sm-4 col-xs-4">
<input name="date" type="text" class="form-control" />
</div>
</div>
</form>
I am trying to use increase the size of my text box but changing col-md-* value doesn't seem to affect the child input form-control textbox.
Example:
<form id="myForm">
<div class="row">
<div class="col-md-2">
Name:
</div>
<div class="col-md-8">
<input name="Name" type="text" placeholder="Enter a name ..." class="form-control" required="required" />
</div>
</div>
</form>
In above code the text input size doesn't increase to what I think should be larger if I used col-md-8. The text box size is same whether I use col-md-4 or col-md-6 also. Is it because form-control class in bootstrap defines a size? If so how can this be fixed?
Try this its work for me
<div class="row">
<form id="myForm">
<div class="col-md-2">
Name:
</div>
<div class="col-md-8">
<input name="Name" type="text" placeholder="Enter a name ..." class="form-control" required="required" />
</div>
</form>
</div>
For some reason, when I apply spans the spans do not align themselves into a proper grid. It doesn't seem to matter what type of element I apply the span to, in this case it is inputs. I obviously want them to align themselves, what am I doing wrong?
Fiddle here: http://jsfiddle.net/fKQsj/
<div class="row-fluid">
<div class="span12">
<input type="text" class="span4" placeholder="First" />
<input type="text" class="span4" placeholder="Middle" />
<input type="text" class="span4" placeholder="Last" />
</div>
</div>
<div class="row-fluid">
<div class="span12">
<input type="text" class="span4" placeholder="City" />
<input type="text" class="span2" placeholder="State" />
<input type="text" class="span2" placeholder="Zip5" />
<input type="text" class="span4" placeholder="Store" />
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="span4 offset8">
<button class="btn btn-success pull-right">Search</button>
</div>
</div>
</div>
Taken from the manual
For multiple grid inputs per line, use the .controls-row modifier class for proper spacing.
It floats the inputs to collapse white-space, sets the proper margins, and clears the float.