Solved: JSfiddle
here is what I wanted, sample:
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-xs-2 control-label">Name</label>
<div class="col-xs-4">
<input type="text" class="form-control col-sm-10" name="name" placeholder="name" />
</div>
</div>
<div class="form-group">
<label for="birthday" class="col-xs-2 control-label">Birthday</label>
<div class="col-xs-10">
<div class="form-inline">
<div class="form-group">
<input type="text" class="form-control" placeholder="year" />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="month" />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="day" />
</div>
<div class="form-group">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="name" class="col-xs-2 control-label">Name</label>
<div class="col-xs-4">
<input type="text" class="form-control col-sm-10" name="name" placeholder="name" />
</div>
</div>
</form>
.css:
.form-inline .form-group {
margin-left: 0;
margin-right: 0;
}
END
UPDATE:
I see where my problem is but i have form-horizontal that I want and if i change it to form-inline everything else is messed up please have a look at the updated jsfiddle
How do I make it inline in one row without spacing as shown in the screen shot:
<form class="navbar-form form-horizontal" role="search" style="padding:0" _lpchecked="1">
<div class="form-group col-md-12">
<label class="col-sm-3 control-label">Location</label>
<div class="col-md-3">
<input class="form-control ng-pristine ng-valid" id="src1" placeholder="Search" type="text">
</div>
<div class="col-md-3">
<input class="form-control ng-pristine ng-valid" id="srch2" placeholder="State" type="text">
</div>
<div class="col-md-3">
<input class="form-control ng-pristine ng-valid" id="srch3" placeholder="City" type="text">
</div>
<div class="col-md-2">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
as you can see spacing between the input:
JSFiddle
Use form-inline instead of form-horizontal:
<form class="navbar-form form-inline" role="search" style="padding:0" _lpchecked="1">
<div class="form-group">
<label class="control-label">Location</label>
<input class="form-control ng-pristine ng-valid" id="src1" placeholder="Search" type="text">
</div>
<div class="form-group">
<input class="form-control ng-pristine ng-valid" id="srch2" placeholder="State" type="text">
</div>
<div class="form-group">
<input class="form-control ng-pristine ng-valid" id="srch3" placeholder="City" type="text">
</div>
<div class="form-group">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
bootply
Simple calculation: col-sm-3 * 4 + col-sm-2 == col-sm-14 Which is not good. You should make sure that the total will not exceed 12 cols for each row.
Suggestion - change the first col-sm-3 to col-sm-1
Related
I am new in Bootstrap 4 and need some help. I want that my first two inputfiels are at the same line (horizontal) and not among themselves. Like this:
enter image description here
Here is my HTML code:
<div class="container">
<div class="row">
<div class="form-group col-md-6 offset-md-3">
<input class="form-control transparent-input" type="text" name="name" placeholder="Name" required>
</div>
<div class="form-group col-md-6 offset-md-3">
<input class="form-control transparent-input" type="text" name="surname" placeholder="Vorname" required>
</div>
<div class="form-group col-md-6 offset-md-3">
<textarea class="form-control transparent-input" cols="20" rows="10" placeholder="Enter your message"></textarea>
</div>
</div>
<div class="row">
<div class="form-group col-md-6 offset-md-3">
<button type="button" class="btn btn-primary">Send</button>
<!--<button type="submit" class="btn btn-default">Send invitation</button>-->
</div>
</div>
</div>
Can somebody help me out?
Please try this way. I hope you will get your desired style.
<div class="container">
<div class="row">
<div class="form-group col-md-6">
<input class="form-control transparent-input" type="text" name="name" placeholder="Name" required>
</div>
<div class="form-group col-md-6">
<input class="form-control transparent-input" type="text" name="surname" placeholder="Vorname" required>
</div>
<div class="form-group col-md-12">
<textarea class="form-control transparent-input" cols="20" rows="10" placeholder="Enter your message"></textarea>
</div>
<div class="form-group col-md-12">
<button type="button" class="btn btn-primary">Send</button>
</div>
</div>
</div>
I want to create an inline form using bootstrap with labels above input text fields but the result looks so messed up.
This is what i tried:
<form id="form" method="post" class="form-inline" >
<div class="row">
<div class="col-md-2">
<label for="from">from:</label>
<input type="text" class="form-control form-text" />
</div>
<div class="col-md-2">
<label for="to">to:</label>
<input type="text" class="form-control form-text"/>
</div>
<div class="input-group date col-md-2" id="datepicker">
<label for="checkin">check in</label>
<input type="text" class="form-control datepicker" name="processdate" />
<span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
<div class="input-group date col-md-2" id="datepicker">
<label for="checkout">check out</label>
<input type="text" class="form-control datepicker" name="processdate" />
<span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
<div class="col-md-2">
<input type="submit" class="btn btn-default" value="submit"/>
</div>
</div>
</form>
this is what i got:
result
how do i get the submit button to right position and the glyphicons heights the same as the input fields what am i doing wrong?
I made some edits to your html : https://jsfiddle.net/05t4s041/
<form id="form" method="post" class="form-inline" >
<div class="row">
<div class="col-md-2">
<label for="from">from:</label>
<input type="text" class="form-control form-text" />
</div>
<div class="col-md-2">
<label for="to">to:</label>
<input type="text" class="form-control form-text"/>
</div>
<div class="col-md-2">
<label for="checkin">check in</label>
<div class="input-group date" id="datepicker">
<input type="text" class="form-control datepicker" name="processdate" />
<span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
</div>
<div class="col-md-2">
<label for="checkout">check out</label>
<div class="input-group date" id="datepicker">
<input type="text" class="form-control datepicker" name="processdate" />
<span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
</div>
<div class="col-md-2">
<input type="submit" class="btn btn-default" value="submit"/>
</div>
</div>
</form>
you could put divs with bootstrap classes around your label and control like:
<div class="col-md-2">
<div class="row">
<div class="col-md-6">
<label for="from">from:</label>
</div>
<div class ="col-md-6">
<input type="text" class="form-control form-text" />
</div>
</div>
</div>
The row div may be sufficient: it put's elements in a row put I like to put extra bootstrap classes around my controls so I can modify them. For example that the label has a smaller width than the control itself.
I am trying to decrease middle name input field but i can't get it work. It only works at xs screen (picture below).
<div class="row">
<form class="form-inline" role="form" name="userForm" novalidate>
<div class="form-group required">
<label for="first" class="control-label">Child's Name</label>
<div class="input-group">
<span class="col-xs-9 col-sm-5">
<input type="text" class="form-control" id='first' name="first" >
<label for ="first">First </label>
</span>
</div>
<div class="input-group">
<span class="col-xs-3 col-sm-2">
<input type="text" class="form-control col-xs-3 col-sm-2" id='mi' name="mi" >
<label for ="mi">MI</label>
</span>
</div>
<div class="input-group">
<span class="col-xs-9 col-sm-5">
<input type="text" class="form-control" id = "last" name="last" >
<label for="last"> Last </label>
</span>
</div>
</div>
</form>
</div>
You're code is wrong please check again.you end the </form> before end other tag. and again read how to use bootstrap form. help this link.
remove span and add col-sm-4 to div
`
<div class="form-group required">
<label for="first" class="control-label">Child's Name</label>
<div class="input-group col-sm-4">
<input type="text" class="form-control" id='first' name="first">
<label for="first">First </label>
</div>
<div class="input-group col-sm-1">
<input type="text" class="form-control " id='mi' name="mi">
<label for="mi">MI</label>
</div>
<div class="input-group col-sm-4">
<input type="text" class="form-control " id="last" name="last">
<label for="last"> Last </label>
</div>
<div class="help-block" ng-messages="userForm.first.$error" style="color:maroon" role="alert">
<p ng-message="required">Child's First Name is required.</p>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-danger">Submit</button>
</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