I am trying to display a year range input on a form that has a 2 textboxes. One for the min and one for the max and are separated by a dash.
I want this all on the same line using bootstrap, but I cannot seem to get it to work correctly.
Here's my code:
<form id="Form1" class="form-horizontal" role="form" runat="server">
<div class="row">
<div class="form-group">
<label for="tbxContactPhone" class="col-sm-2 control-label">Year</label>
<div class="col-sm-4">
<asp:TextBox ID="TextBox1" CssClass="form-control" runat="server" MaxLength="4" />
</div>
<label class="col-sm-2 control-label">-</label>
<div class="col-sm-4">
<asp:TextBox ID="TextBox2" CssClass="form-control" runat="server" MaxLength="4" />
</div>
</div>
</div>
</form>
Here's what it looks like now:
How about using an input group to style it on the same line?
Here's the final HTML to use:
<div class="input-group">
<input type="text" class="form-control" placeholder="Start"/>
<span class="input-group-addon">-</span>
<input type="text" class="form-control" placeholder="End"/>
</div>
Which will look like this:
Here's a Stack Snippet Demo:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>
<div class="input-group">
<input type="text" class="form-control" placeholder="Start"/>
<span class="input-group-addon">-</span>
<input type="text" class="form-control" placeholder="End"/>
</div>
I'll leave it as an exercise to the reader to translate it into an asp:textbox element
#KyleMit's answer on Bootstrap 4 has changed a little
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-prepend">
<span class="input-group-text">-</span>
</div>
<input type="text" class="form-control">
</div>
The problem is that .form-control class renders like a DIV element which according to the normal-flow-of-the-page renders on a new line.
One way of fixing issues like this is to use display:inline property. So, create a custom CSS class with display:inline and attach it to your component with a .form-control class. You have to have a width for your component as well.
There are other ways of handling this issue (like arranging your form-control components inside any of the .col classes), but the easiest way is to just make your .form-control an inline element (the way a span would render)
For Bootstrap 4
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
<input type="text" class="form-control" placeholder="Start"/>
<div class="input-group-prepend">
<span class="input-group-text" id="">-</span>
</div>
<input type="text" class="form-control" placeholder="End"/>
</div>
Bootstrap 3.3.7:
Use form-inline.
It only works on screen resolutions greater than 768px though. To test the snippet below make sure to click the "Expand snippet" link to get a wider viewing area.
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<form class="form-inline">
<input type="text" class="form-control"/>-<input type="text" class="form-control"/>
</form>
Reference: https://getbootstrap.com/docs/3.3/css/#forms-inline
did you check boostrap website? search for "forms"
<div class="form-row">
<div class="col">
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name">
</div>
#KyleMit answer is one way to solve this, however we may chose to avoid the undivided input fields acheived by input-group class. A better way to do this is by using form-group and row classes on a parent div and use input elements with grid-system classes provided by bootstrap.
<div class="form-group row">
<input class="form-control col-md-6" type="text">
<input class="form-control col-md-6" type="text">
</div>
Just put two inputs inside a div with class form-group and set display flex on the div style
<form method="post">
<div class="form-group" style="display: flex;"><input type="text" class="form-control" name="nome" placeholder="Nome e sobrenome" style="margin-right: 4px;" /><input type="text" class="form-control" style="margin-left: 4px;" name="cpf" placeholder="CPF" /></div>
<div class="form-group" style="display: flex;"><input type="email" class="form-control" name="email" placeholder="Email" style="margin-right: 4px;" /><input type="tel" class="form-control" style="margin-left: 4px;" name="telephone" placeholder="Telefone" /></div>
<div class="form-group"><input type="password" class="form-control" name="password" placeholder="Password" /></div>
<div class="form-group"><input type="password" class="form-control" name="password-repeat" placeholder="Password (repeat)" /></div>
<div class="form-group">
<div class="form-check"><label class="form-check-label"><input type="checkbox" class="form-check-input" />I agree to the license terms.</label></div>
</div>
<div class="form-group"><button class="btn btn-primary btn-block" type="submit">Sign Up</button></div><a class="already" href="#">You already have an account? Login here.</a></form>
Related
I use bootstrap3 in my project.
I have this html elements:
<form class="form-inline">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">from-</span>
<input id="input1" class="form-control input-sm" type="text/>
<!--How can I make here space-->
<span id="span2" class="input-group-addon">to-</span
<input class="form-control input-sm" type="text" />
</div>
</div>
</form>
Here is working PLUNKER.
As you can see I have spans and inputs inside form element.How can I make space between element with id =input1 and span with id = "span2"?
The problem was with how you grouped elements. Just wrap each of your span and input with a div that has class="input-group"
Here is the codepen
HTML
<form class="form-inline">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">from-</span>
<input id="input1" class="form-control input-sm" type="text" />
</div>
<!--How can I make here space-->
<div class="input-group">
<span id="span2" class="input-group-addon">to-</span>
<input class="form-control input-sm" type="text" />
</div>
</div>
</form>
You could add another element in there, like:
<div id="spacer"></div>
with a style like
#spacer { width: 14px; display:table-cell;}
I am using the following code for my inline form (bootstrap 3) but that doesn't seem to work with Google Chrome. I tried it with Firefox and it worked great. Screenshots:
Chrome
http://oi58.tinypic.com/148jjw5.jpg
Firefox
http://oi58.tinypic.com/5fiy41.jpg
The HTML and CSS I'm using:
<style>
.form-inline .form-group {
margin-right: 10px;
margin-left: 4px;
}
.form-inline > .form-group {
vertical-align: top;
}
</style>
<form id="callForm" action="sendCall.php" method="post" class="form-inline" >
<div class="form-group col-md-2">
<div class="input-group">
<label class="sr-only" for="your">Your phone number</label>
<span class="input-group-addon">+91</span>
<input type="text" class="form-control" id="your" name="your" placeholder="Your 10 digit number" required />
</div>
</div>
<div class="form-group col-md-2">
<div class="input-group">
<label class="sr-only" for="frnd">Friend's number</label>
<span class="input-group-addon">+</span>
<input text="text" class="form-control" id="frnd" name="frnd" placeholder="Your friend's number" required />
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success">Connet</button>
</div>
</form>
<script>
You should not put your sr-only element inside the input-group:
<div class="form-group col-md-2">
<label class="sr-only" for="your">Your phone number</label>
<div class="input-group">
<span class="input-group-addon">+91</span>
<input type="text" class="form-control" id="your" name="your" placeholder="Your 10 digit number" required />
</div>
</div>
Anyway, if this fix an extra border (and maybe a floating issue), I doubt this is the only thing to change.
You may have another CSS rule which broke your layout.
For me its working fine on both browser, may be your CSS is not working properly or you are using the old version CSS.
check your css or may be some other properties are overwriting your css that could be the problm.
their is no problem in this code.
<form class="form-inline" >
<div class="form-group col-md-2">
<div class="input-group">
<label class="sr-only" for="frnd">Friend's number</label>
<span class="input-group-addon">+</span>
<input text="text" class="form-control" id="frnd" name="frnd" placeholder="Your friend's number" required />
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success">Connet</button>
</div>
</form>
I want to align TextBox which will be used as Searchbox and button.
Problem is when I use inline form class on div the textbox is loosing its width.
<div class="col-lg-6">
<input type="text" id="test" name="city" class="form-control input-lg" placeholder="E.g. Manchester">
<div class="form-inline">
<div class="form-group ">
<input type="text" id="city" name="city" class="form-control input-lg" placeholder="E.g. Manchester">
<input type="button" value="Search" class="form-control btn-lg"/>
</div>
</div>
</div>
what I'm missing here..
here is a good solution for you:
Screenshot:
Code:
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="E.g. Manchester" />
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="E.g. Manchester" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">Search</button>
</span>
</div>
Result:
http://jsfiddle.net/j9EdZ/
You might be best using the col-md-* values here, e.g.:
<div class='col-lg-6'>
<form class='form'>
<div class='row'>
<div class='form-group'>
<div class='col-md-10'>
<input class='form-control input-lg' type='text' placeholder='E.g. Manchester'>
</div>
<div class='col-md-2'>
<input type='button' class='form-control btn btn-block' value='Search'>
</div>
</div>
</div>
</form>
</div>
Text-box is not loosing its width you can check here.
CODE : http://jsfiddle.net/Jaysinh/awYm3/
As per the Bootstrap documentation of Form you have to set the width of the element. Default is 100 % wide.
Requires custom widths
Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.
Here, check this out.
Demo
HTML
<div class="col-lg-6">
<form class="form-horizontal" role="form">
<div class="form-group">
<input type="text" id="test" name="city" class="form-control input-lg" placeholder="E.g. Manchester" />
</div>
<div class="form-inline">
<div class="form-group ">
<input type="text" id="city" name="city" class="form-control input-lg" placeholder="E.g. Manchester" />
<input type="button" value="Search" class=" btn btn-lg btn-default" />
</div>
<div class="form-group "></div>
</div>
</form>
</div>
Is there anyway I can create a form using bootstrap which can have fields aligned in same line as well as horizontal fields?
Something like this?
in this the cvv MM and YY are in the same line..How can i make it possible using bootstrap form?
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" />
</div>
<div class="form-group">
<label for="exampleInputEmail1">CVV</label><input type="email" class="form-control" id="cvv" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
I want the cvv to be aligned with the first form field
Wrap your input fields in a div and assign a col-sm-x class to it e.g:
<div class="form-group">
<label class="col-sm-3 control-label" for="cardNumber">Card # (required)</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="cardNumber" size="12" autocomplete='off'>
</div>
</div>
Also add a col-sm-x to your labels
For columns:
<div class="form-group">
<label class="col-sm-3 control-label">Expiry date(MM/YYYY) (required)</label>
<div class="col-sm-2">
<input type="text" class="form-control" placeholder="MM" size="2" autocomplete='off'>
</div>
<div class="col-sm-2">
<input type="text" class="form-control" placeholder="YYYY" size="4" autocomplete='off'>
</div>
</div>
Finally, class of form should be form-horizontal Play with the col width as you like
Wrap your input fields as above in one div but add to this div the 'form-inline' class. No need of the col-sm-x class.
<div class="form-group form-inline">
<label class="control-label">Expiry date(MM/YYYY) (required)</label>
<input type="text" class="form-control" placeholder="MM" size="2" autocomplete='off'>
<input type="text" class="form-control" placeholder="YYYY" size="4" autocomplete='off'>
</div>
</div>
In Bootstrap 3 the necessary code to prepend a value to the input text box
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" class="form-control" placeholder="Username">
</div>
http://getbootstrap.com/components/#input-groups
does not seem to preserve the formatting for an inline form http://getbootstrap.com/css/#forms-inline.
Example of code. First segment is functional inline form. Second segment adds code for prepend and it breaks the inline form causing it to be vertical (normal) instead.
http://bootply.com/101947
What am I missing here I have wasted more time than should be necessary getting this two features which work fine separately to play nice.
Use grid
<div class="form-group col-md-2">
I am not sure, this is the right way to do that but it always work for me.
<form class="form-inline" role="form">
<div class="form-group col-md-2">
<div class="input-group ">
<span class="input-group-addon">#</span>
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>