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>
Related
<div class="form-group">
<label class="lable label-default"> Google Location</label>
<input class="form-control" type="text" name='latitude' placeholder="latitude"
[(ngModel)]="tourDetails.latitude">
<input class="form-control" type="text" name='longitude' placeholder="longitude"
[(ngModel)]="tourDetails.longitude">
</div>
My Css code:
label {
display: inline-block;
width: 140px;
text-align: left;
}
input {
display: inline-block;
width: 140px;
text-align: left;
}
I have my Following Output. But I want to align these input text fields one by one with same proper alignment.
Share your css to properly understand the style, but I am assuming the typo lable instead of label may affect the css rules
<div class="form-group">
<label class="label label-default"> Google Location</label>
<input class="form-control" type="text" name='latitude' placeholder="latitude"
[(ngModel)]="tourDetails.latitude">
<input class="form-control" type="text" name='longitude' placeholder="longitude"
[(ngModel)]="tourDetails.longitude">
</div>
I've done only for geo-location. But if like to get the idea of bootstrap, you can refer W3schools or Bootstrap offcial web
The working fiddle Jsfiddle
<div class="container">
<form class="form-horizontal">
<div class="row">
<div class="col-xs-6">
<label class="control-label label-default"> Google Location</label>
</div>
<div class="col-xs-6">
<div class="form-group">
<input class="form-control" type="text" name='latitude' placeholder="latitude"
[(ngModel)]="tourDetails.latitude">
<input class="form-control" type="text" name='longitude' placeholder="longitude"
[(ngModel)]="tourDetails.longitude">
</div>
</div>
</div>
</form>
</div>
Update 1 As you updated the requirement, I've updated the fiddle too. So you can easily remove <div class="row"> and get your expectation
This is my form, i want the form to change colors when errors/something occurs.
Example, if a user did not input anything in a required field, i want it to change colors using bootstrap's css classes, can anyone teach me how i could make that happen?
p.s. i am new, so sorry for a newbie question.
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>Form Name</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="name">Name</label>
<div class="col-md-5">
<input id="name" name="name" type="text" placeholder="Enter Name" class="form-control input-md" required="">
</div>
</div>
<!-- Password input-->
<div class="form-group">
<label class="col-md-4 control-label" for="password">Password</label>
<div class="col-md-5">
<input id="password" name="password" type="password" placeholder="Enter Password" class="form-control input-md" required="">
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="button"></label>
<div class="col-md-4">
<input type = "submit" id="button" name="button" value = "Submit" class="btn btn-success">
</div>
</div>
</fieldset>
</form>
There is a CSS selector for this purpose (:invalid), but on the individual input level. You can color the whole form by checking for children which are invalid, like so:
/* add space to denote child element */
form :invalid {
background: red;
}
For Bootstrap, just add has-error class to form group.
<div class="form-group has-error">
<label class="col-md-4 control-label" for="name">Name</label>
<div class="col-md-5">
<input id="name" name="name" type="text" placeholder="Enter Name" class="form-control input-md" required="">
</div>
</div>
For more information, look the documentation: http://getbootstrap.com/css/#forms-help-text
And live demo: http://jsbin.com/daxocivoho/1/edit?html,output
You can change the text color to green for correct inputs and red for wrong inputs:
.form-control:valid {
color:green;
}
.form-control:invalid {
color:red;
}
You can also change the border color to red for wrong inputs as follows:
.form-control:invalid {
border-color: red;
}
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>
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>
What's the best way to design a form that looks like this (please see link below) in twitter bootstrap without any homemade classes ?
Is it possible to set a inner form-inline inside a form-horizontal like the below example:
Don't nest <form> tags, that will not work. Just use Bootstrap classes.
Bootstrap 3
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputType" class="col-md-2 control-label">Type</label>
<div class="col-md-3">
<input type="text" class="form-control" id="inputType" placeholder="Type">
</div>
</div>
<div class="form-group">
<span class="col-md-2 control-label">Metadata</span>
<div class="col-md-6">
<div class="form-group row">
<label for="inputKey" class="col-md-1 control-label">Key</label>
<div class="col-md-2">
<input type="text" class="form-control" id="inputKey" placeholder="Key">
</div>
<label for="inputValue" class="col-md-1 control-label">Value</label>
<div class="col-md-2">
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
</div>
</div>
</div>
</form>
You can achieve that behaviour in many ways, that's just an example. Test it on this bootply
Bootstrap 2
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputType">Type</label>
<div class="controls">
<input type="text" id="inputType" placeholder="Type">
</div>
</div>
<div class="control-group">
<span class="control-label">Metadata</span>
<div class="controls form-inline">
<label for="inputKey">Key</label>
<input type="text" class="input-small" placeholder="Key" id="inputKey">
<label for="inputValue">Value</label>
<input type="password" class="input-small" placeholder="Value" id="inputValue">
</div>
</div>
</form>
Note that I'm using .form-inline to get the propper styling inside a .controls.
You can test it on this jsfiddle
For bootstrap 3 example above works but is overcomplicated, rather than using form-group use form-inline for the fields you want inline.
Eg:
<div class="form-group">
<label>CVV</label>
<input type="text" size="4" class="form-control" />
</div>
<div class="form-inline">
<label>Expiration (MM/YYYY)</label><br>
<input type="text" size="2" class="form-control" /> / <input type="text" size="4" class="form-control" />
</div>
This uses twitter bootstrap 3.x with one css class to get labels to sit on top of the inputs. Here's a fiddle link, make sure to expand results panel wide enough to see effect.
HTML:
<div class="row myform">
<div class="col-md-12">
<form name="myform" role="form" novalidate>
<div class="form-group">
<label class="control-label" for="fullName">Address Line</label>
<input required type="text" name="addr" id="addr" class="form-control" placeholder="Address"/>
</div>
<div class="form-inline">
<div class="form-group">
<label>State</label>
<input required type="text" name="state" id="state" class="form-control" placeholder="State"/>
</div>
<div class="form-group">
<label>ZIP</label>
<input required type="text" name="zip" id="zip" class="form-control" placeholder="Zip"/>
</div>
</div>
<div class="form-group">
<label class="control-label" for="country">Country</label>
<input required type="text" name="country" id="country" class="form-control" placeholder="country"/>
</div>
</form>
</div>
</div>
CSS:
.myform input.form-control {
display: block; /* allows labels to sit on input when inline */
margin-bottom: 15px; /* gives padding to bottom of inline inputs */
}
Since bootstrap 4 use div class="form-row" in combination with div class="form-group col-X". X is the width you need. You will get nice inline columns. See fiddle.
<form class="form-horizontal" name="FORMNAME" method="post" action="ACTION" enctype="multipart/form-data">
<div class="form-group">
<label class="control-label col-sm-2" for="naam">Naam: *</label>
<div class="col-sm-10">
<input type="text" require class="form-control" id="naam" name="Naam" placeholder="Uw naam" value="{--NAAM--}" >
<div id="naamx" class="form-error form-hidden">Wat is uw naam?</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-5">
<label class="control-label col-sm-4" for="telefoon">Telefoon: *</label>
<div class="col-sm-12">
<input type="tel" require class="form-control" id="telefoon" name="Telefoon" placeholder="Telefoon nummer" value="{--TELEFOON--}" >
<div id="telefoonx" class="form-error form-hidden">Wat is uw telefoonnummer?</div>
</div>
</div>
<div class="form-group col-5">
<label class="control-label col-sm-4" for="email">E-mail: </label>
<div class="col-sm-12">
<input type="email" require class="form-control" id="email" name="E-mail" placeholder="E-mail adres" value="{--E-MAIL--}" >
<div id="emailx" class="form-error form-hidden">Wat is uw e-mail adres?</div>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="titel">Titel: *</label>
<div class="col-sm-10">
<input type="text" require class="form-control" id="titel" name="Titel" placeholder="Titel van uw vraag of aanbod" value="{--TITEL--}" >
<div id="titelx" class="form-error form-hidden">Wat is de titel van uw vraag of aanbod?</div>
</div>
</div>
<from>
I know this is an old answer but here is what I usually do:
CSS:
.form-control-inline {
width: auto;
float:left;
margin-right: 5px;
}
Then wrap the fields you want to be inlined in a div and add .form-control-inline to the input, example:
HTML
<label class="control-label">Date of birth:</label>
<div>
<select class="form-control form-control-inline" name="year"> ... </select>
<select class="form-control form-control-inline" name="month"> ... </select>
<select class="form-control form-control-inline" name="day"> ... </select>
</div>
to make it simple, just add a class="form-inline" before the input.
example:
<div class="col-md-4 form-inline"> //add the class here...
<label>Lot Size:</label>
<input type="text" value="" name="" class="form-control" >
</div>