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>
Related
I am looking to create a simple signup form, but for some reason with my code the input does not adapt to bootstraps form-control-lg class so it will not match the size of my button when I am using default bootstrap CSS, can anyone help?
<div class="container">
<form class="form-inline">
<div class="form-group">
<div class="row col-md-5">
<input class="form-control form-control-lg" type="url" placeholder="Your Site URL">
</div>
</div>
<button type="submit" class="btn btn-success btn-lg" id="urlInput">TRY IT NOW</button>
</form>
</div>
Try adding the input-lg class to your input
<input class="form-control input-lg" type="url" placeholder="Your Site URL">
You can try using form-group-lg on the parent div instead
<div class="form-group form-group-lg">
<div class="row col-md-5">
<input class="form-control" type="url" placeholder="Your Site URL">
</div>
</div>
UPDATE based on #HebleV:
I'm having a little issue with formating and trying to show html block in one row
Here is my html code
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="empsrch" id="empsrch"/>
<div class="input-group-btn">
<button class="btn btn-default" type="submit" ng-click="open"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
<div ng-show="selected == 'Employer Search'">
<div class="input-group">
<input type="text" class="form-control" placeholder="State" name="state" id="state" />
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="City" name="city" id="city" />
</div>
</div>
</form>
screenshot:
since you're using bootstrap,change your code to this..
<form action="" class="form-inline">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="empsrch" id="empsrch"/>
<div class="input-group-btn">
<button class="btn btn-default" type="submit" ng-click="open"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</div>
<div class="form-group" ng-show="selected == 'Employer Search'">
<div class="input-group">
<input type="text" class="form-control" placeholder="State" name="state" id="state" />
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="City" name="city" id="city" />
</div>
</div>
</form>
this is my sample output
http://goo.gl/PYklyR
Add display:inline-block to your divs.
Maybe try placing them into "row" and "col"s? (I haven't checked that code, but you get the idea ;))
<div class="row">
<form class="navbar-form" role="search">
<div class="col-*-3"><div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="empsrch" id="empsrch"/></div>
<div class="input-group-btn">
<button class="btn btn-default" type="submit" ng-click="open"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div></div>
<div class="col-*-3">
<div ng-show="selected == 'Employer Search'">
<div class="input-group">
<input type="text" class="form-control" placeholder="State" name="state" id="state" />
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="City" name="city" id="city" />
</div>
</div>
</div>
</form></div>
By "*" I mean md, lg etc. (you know, screen size thingies)
Since you are using bootstrap you can do the following:
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-12 col-lg-12">
<input type="text" />
<input type="text" />
<input type="text" />
</div>
</div>
</div>
JS Fiddle
https://jsfiddle.net/lightcast/6nwvnspd/
Remove input group for other 2 fields and include all 3 fields in one single- div class="input-group" check this http://codepen.io/anon/pen/YwRNPM
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="empsrch" id="empsrch"/>
<div class="input-group-btn">
<button class="btn btn-default" type="submit" ng-click="open"><i class="glyphicon glyphicon-search"></i></button>
</div>
<div ng-show="selected == 'Employer Search'">
<input type="text" class="form-control" placeholder="State" name="state" id="state" />
<input type="text" class="form-control" placeholder="City" name="city" id="city" />
</div>
</div>
</form>
I have an interesting problem here.
I have two forms on the same page, the exact same code copy and pasted. Each form has a hidden input to identify the form on the backend, and each form has an <input type="submit"> for submission.
The only difference between the two is that the first form has one less <input type="text">.
The problem is that the form with 3 <input type="text"> fields is centered while the form with 2 <input type="text"> is not. When I add a third <input type="text"> the form is centered.
It seems as if the form has has to have a certain amount of inputs for it to center.
Here is a JSFiddle
Make sure to stretch your browser so you can see the whitespace on the right side of the top form.
And my HTML...
<div class="content-area">
<div class="row">
<div class="col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-12 text-center">
<div class="huge">Change Email</div>
<form id="changeEmailForm" method="post" action="/resources/submit.php">
<div class="input-group text-center">
<input type="hidden" name="changeEmail"> <!-- Hidden input to identify the form -->
<input class="form-control input-lg" id="newEmail" name="newEmail" minlength="2" type="text" required placeholder="New Email">
<input class="form-control input-lg" id="confirmEmail" name="confirmEmail" minlength="2" type="text" required placeholder="Confirm Email">
<input class="btn btn-large btn-success" type="submit">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-12 text-center">
<div class="huge">Change Password</div>
<form id="changePasswordForm" method="post" action="/resources/submit.php">
<div class="input-group text-center">
<input type="hidden" name="changePassword"> <!-- Hidden input to identify the form -->
<input class="form-control input-lg" id="currentPassword" name="currentPassword" minlength="2" type="text" required placeholder="Current Password">
<input class="form-control input-lg" id="newPassword" name="newPassword" minlength="2" type="text" required placeholder="New Password">
<input class="form-control input-lg" id="confirmPassword" name="confirmPassword" minlength="2" type="text" required placeholder="Confirm Password">
<input class="btn btn-large btn-success" type="submit">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here is an updated Fiddle
Changing your text-center to center-block will center the element. I added it to the second because it wasn't a true center either.
<div class="content-area">
<div class="row">
<div class="col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-12 text-center">
<div class="huge">Change Email</div>
<form id="changeEmailForm" method="post" action="/resources/submit.php">
<div class="input-group center-block">
<input type="hidden" name="changeEmail">
<!-- Hidden input to identify the form -->
<!--<input class="form-control input-lg" id="newEmail" name="newEmail" minlength="2" type="text" required placeholder="New Email">-->
<input class="form-control input-lg" id="newEmail" name="newEmail" minlength="2" type="text" required placeholder="New Email">
<input class="form-control input-lg" id="confirmEmail" name="confirmEmail" minlength="2" type="text" required placeholder="Confirm Email">
<input class="btn btn-large btn-success" type="submit">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-12 text-center">
<div class="huge">Change Password</div>
<form id="changePasswordForm" method="post" action="/resources/submit.php">
<div class="input-group center-block">
<input type="hidden" name="changePassword">
<!-- Hidden input to identify the form -->
<input class="form-control input-lg" id="currentPassword" name="currentPassword" minlength="2" type="text" required placeholder="Current Password">
<input class="form-control input-lg" id="newPassword" name="newPassword" minlength="2" type="text" required placeholder="New Password">
<input class="form-control input-lg" id="confirmPassword" name="confirmPassword" minlength="2" type="text" required placeholder="Confirm Password">
<input class="btn btn-large btn-success" type="submit">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I'm attempting to produce this form with Bootstrap 3:
I'm having trouble making First Name and Last Name inline AND making them together take up the same width as the other fields. Currently I have the following
<form role="form" class="form-horizontal">
<h4>Administrator</h4>
<div class="form-group">
<div class="col-sm-6 col-md-6">
<input type="text" class="form-control" placeholder="First Name" />
</div>
</div>
<div class="form-group">
<div class="col-sm-6 col-md-6">
<input type="text" class="form-control" placeholder="Last Name" />
</div>
</div>
<div class="form-group">
<div class="col-sm-6 col-md-6">
<input type="text" class="form-control"placeholder="Email Address" />
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-default">Cancel</button>
</form>
which outputs a simple form with no inlining. Any ideas how to adjust this to look like in the picture? Here is a jsfiddle: http://jsfiddle.net/gJdyb/1/
Here's a jsFiddle. Use class row on the form-group you'd like to inline:
Administrator
<div class="form-group">
<div class="col-md-12">
<div class="form-group row">
<div class="col-md-6">
<input type="text" class="form-control" placeholder="First Name" />
</div>
<div class="col-md-6">
<input type="text" class="form-control" placeholder="Last Name" />
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="text" class="form-control"placeholder="Email Address" />
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-default">Cancel</button>
Try this one
<form role="form" class="form-horizontal">
<h4>Administrator</h4>
<div class="form-group row">
<div class="col-xs-6 col-md-6">
<input type="text" class="form-control" placeholder="First Name" />
</div>
<div class="col-xs-6 col-md-6">
<input type="text" class="form-control" placeholder="Last Name" />
</div>
</div>
<div class="Form-group">
<input type="text" class="form-control"placeholder="Email Address" />
</div>
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-default">Cancel</button>
</form>
http://jsfiddle.net/gJdyb/4/
it use the col-xs-6.. it is us
read this for documentation of grid system of bootstrap
http://getbootstrap.com/css/#grid
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>