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>
Related
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>
I have some "col-md-12" divs on forms that appear to "cover" preceding inputs such that they are not clickable.
I have created a bootply with Bootstrap 3.0.0 to illustrate the issue. unclickable inputs
If I make the same bootply with bootstrap 3.0.3 then the input fields are now accessible clickable inputs
What I want to know is whether this is a bootstrap bug that has been fixed or whether my layout is breahing some rule or other?
you need to put your cols into a div with the row class
<form>
<div class="row"> // HERE
<div class="col-md-6">
<label class="control-label col-md-4">Home Phone:</label>
<div class="col-md-8">
<input id="contact_detail_home_phone" name="contact_detail[home_phone]" size="30" type="text" value="123 5668" class="form-control">
</div>
</div>
<div class="col-md-6">
<label class="control-label col-md-4">Work Phone:</label>
<div class="col-md-8">
<input id="contact_detail_work_phone" name="contact_detail[work_phone]" size="30" type="text" value="582 5135" class="form-control">
</div>
</div>
</div>
<div class="row"> // AND HERE
<div class="col-md-12">
<label class="control-label">Notes:</label>
<textarea cols="40" id="contact_detail_notes" name="contact_detail[notes]" rows="4" class="form-control"></textarea>
</div>
</div>
</form>
If you use medium size columns col-md- you can only have total 12 column units per each <div class=row>.
So, don't put more than total 12 units of col-md instead one row.
I assume this is limitation of doing layouts with columsn, floating divs and web page rendering legacy.
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
I'm trying to put an input field's label next to it instead of above it using bootstrap. Wrapping this in form-horizontal works, but it's not actually in a form (just an ajax call that reads the value). Is there a way to simply move the label to the left side of the input?
<div class="controls-row">
<div class="control-group">
<label class="control-label" for="my-number">ALabel</label>
<div class="controls">
<input id="my-number" type="number"/>
</div>
</div>
</div>
The fiddle is at http://jsfiddle.net/7VmR9/
Yes, you can do this by bootstrap column structure.
<div class="form-group">
<label for="name" class="col-lg-4">Name:</label>
<div class="col-lg-8">
<input type="text" class="form-control" name="name" id="name">
</div>
</div>
Here is a Bootply Demo
The div is a block element, that means it will take as much width as it can and the input element is in it.
If you want the label to be next to the input element: either put the label in the div or make the div an inline-block element.
<form class="form-inline">
<div class="form-group">
<label for="my-number">ALabel</label>
<input type="number" id="my-number" class="form-control">
</div>
</form>
Source: https://getbootstrap.com/docs/3.3/css/#forms-inline
You can take help directly from website they provided, well documented.
Here is a link to a Fiddle with Bootstrap css.
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email"/>
</div>
</div>