Here I have a form but the form is not inlined:
<form class="form-horizontal">
<fieldset>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="selectbasic">Vrsta</label>
<div class="col-md-4">
<select id="selectbasic" name="selectbasic" class="form-control">
<option value="1">nafta</option>
<option value="2">biodizel</option>
</select>
</div>
</div>
<!-- Appended Input-->
<div class="form-group">
<label class="col-md-4 control-label" for="appendedtext">Kolicina</label>
<div class="col-md-4">
<div class="input-group">
<input id="appendedtext" name="appendedtext" class="form-control" placeholder="uptrebljena kolicina" type="text">
<span class="input-group-addon">kg</span>
</div>
<p class="help-block">preostalo 22l</p>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="singlebutton"></label>
<div class="col-md-4">
<button id="singlebutton" name="singlebutton" class="btn btn-success">Add</button>
</div>
</div>
</fieldset>
</form>
How can I inline this form?
I tried with:
<form class="form-inline">
but that doesn't work. What is the problem here?
I also tried to make three col-md-4 columns, but again I can't align them with the button.
Related
I have a bootstrap 3 modal form that uses mixed form-horizontal and form-inline classes. I've fiddled around with the column widths but can't seem to get the form just right. There are two problems that I can't seem to get resolved:
The labels don't right align.
The State field is not the correct width.
My Html:
<div class="row">
<div class="col-md-7">
<h2>Agents</h2>
</div>
<div class="col-md-2">
<a id="addAgentButton" href="#" class="btn btn-primary">Add Agent</a>
</div>
</div>
<div id="agentModal" data-bind="with:detailAgent" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body col-md-12">
<form role="form" data-bind="submit: save">
<div class="form-group col-md-12">
<label class="col-md-2 control-label" for="txtAgentName">Name: </label>
<div class="col-md-6"><input class="form-control input-sm" id="txtAgentName" type="text" data-bind="value:Name" /></div>
</div>
<div class="form-group col-md-12">
<label class="col-md-2 control-label" for="txtAgentAddressLine1">Address 1: </label>
<div class="col-md-6">
<input class="form-control input-sm" id="txtAgentAddressLine1" type="text" data-bind="value:Address1" />
</div>
</div>
<div class="form-group col-md-12 form-inline">
<label class="col-md-2 control-label" for="txtAgentCity">City: </label>
<div class="col-md-2">
<input class="form-control input-sm" id="txtAgentCity" type="text" data-bind="value:City" />
</div>
<label class="col-md-2 control-label" for="txtAgentState">State: </label>
<div class="col-md-2">
<select class="form-control input-sm" id="txtAgentState" data-bind="options: $root.states, value: State, optionsCaption:'Choose a state...'"></select>
</div>
<label class="col-md-1 control-label" for="txtAgentZip">Zip: </label>
<div class="col-md-2">
<input type="tel" class="form-control input-sm" id="txtAgentZip" data-bind="value:Zip" />
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
My Javascript to show the modal:
$("#addAgentButton").on("click", function() {
$("#agentModal").modal("show");
});
My CSS:
.modal-dialog {
width: 800px;/* your width */
}
#addAgentButton {
margin-top: 15px;
}
And here's the jsfiddle.
Ok, I hope I understood you correct. Take a look at this fiddle
I had to change your inline-form html part a bit:
<div class="form-group col-md-12">
<label class="control-label col-md-2" for="txtAgentCity">City: </label>
<div class="col-md-2">
<input class="form-control input-sm" id="txtAgentCity" type="text" data-bind="value:City" />
</div>
<label class="col-md-2 control-label text-right" for="txtAgentState">State: </label>
<div class="col-md-2">
<select class="form-control input-sm" id="txtAgentState" data-bind="options: $root.states, value: State, optionsCaption:'Choose a state...'"></select>
</div>
<label class="col-md-2 control-lntZip text-right">Zip: </label>
<div class="col-md-2">
<input type="tel" class="form-control input-sm" id="txtAgentZip" data-bind="value:Zip" />
</div>
</div>
Just add the class .text-right to the label you want to be aligned right.
Here I have a bootstrap form v3 and I try to make this form to be inline so ha,ar,m2 to be inline... I have:
<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="naziv">Naziv</label>
<div class="col-md-4">
<input id="naziv" name="naziv" type="text" placeholder="naziv parcele" class="form-control input-md" required="">
</div>
</div>
<!-- Appended Input-->
<div class="form-group">
<label class="col-md-4 control-label" for="ha">Povrsina</label>
<div class="col-md-2">
<div class="input-group">
<input id="ha" name="ha" class="form-control" placeholder="ha" type="text">
<span class="input-group-addon">ha</span>
</div>
</div>
</div>
<!-- Appended Input-->
<div class="form-group">
<label class="col-md-4 control-label" for="ar"></label>
<div class="col-md-2">
<div class="input-group">
<input id="ar" name="ar" class="form-control" placeholder="ar" type="text">
<span class="input-group-addon">ar</span>
</div>
</div>
</div>
<!-- Appended Input-->
<div class="form-group">
<label class="col-md-4 control-label" for="m2"></label>
<div class="col-md-2">
<div class="input-group">
<input id="m2" name="m2" class="form-control" placeholder="m2" type="text">
<span class="input-group-addon">m2</span>
</div>
</div>
</div>
</fieldset>
</form>
But how I can put #ha, #ar, #m2 elements inline so in the same row?
Any idea?
I try with form-inline but dont work.
Here is a fiddle
In order to keep the inputs in one row, you could put the columns containing .input-group in one form-group element, as follows:
<div class="form-group">
<label class="col-md-3 control-label" for="ha">Povrsina</label>
<div class="col-md-3">
<div class="input-group">
<input id="ha" name="ha" class="form-control" placeholder="ha" type="text">
<span class="input-group-addon">ha</span>
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<input id="ar" name="ar" class="form-control" placeholder="ar" type="text">
<span class="input-group-addon">ar</span>
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<input id="m2" name="m2" class="form-control" placeholder="m2" type="text">
<span class="input-group-addon">m2</span>
</div>
</div>
</div>
WORKING DEMO.
Note that you should change the class names of the columns within your own demo to prevent exceeding the 12-column grid.
I am creating a multi column form using Bootstrap 3.
Here is the first column.
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<form class="form-inline" role="form">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="RecordID" class="col-md-4 nopadding">Record ID</label><div class="col-md-8 nopadding pull-right"><input class="form-control" id="RecordID" type="text"></div>
</div>
<div class="form-group">
<label for="ID" class="col-md-5 nopadding">ID</label><div class="col-md-7 nopadding pull-right"><input class="form-control" id="ID" type="text"></div>
</div>
<div class="form-group nopadding">
<label for="FamilyName" class="col-md-5 nopadding">Family Name</label><div class="col-md-7 nopadding"><input class="form-control" id="FamilyName" type="text" maxlength="30"></div>
</div>
<div class="form-group">
<label for="GivenName" class="col-md-5 nopadding">Given Name</label><div class="col-md-7 nopadding"><input class="form-control" id="GivenName" type="text" maxlength="30"></div>
</div>
<div class="form-group">
<label for="MiddleName" class="col-md-5 nopadding">Middle Name</label><div class="col-md-7 nopadding"><input class="form-control" id="MiddleName" type="text" maxlength="30"></div>
</div>
</div>
//other column
</div>
</form>
</div>
</div>
</div>
However, I got the first column looks like this.
I wanted to align the text fields to the right so I added the "pull-right" class to the div that encapsulated the text field of ID. However, it doesn't work.
Here is the JSFiddle link, you will find the nopadding class in the link, it just remove the padding.
The result box of JSFiddle is not large enough by default, you will need to pull the result box to get the result I got.: JSFiddle link
add class="form-group col-md-12 nopadding" to div which was currently <div class="form-group">
I would suggest something like that:
<div class="container nopadding">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="recordId" class="col-sm-2 control-label">Record Id</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="recordId" placeholder="Record Id">
</div>
</div>
<div class="form-group">
<label for="id" class="col-sm-2 control-label">Id</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="id" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="familyName" class="col-sm-2 control-label">Family Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="familyName" placeholder="Family Name" maxlength="30">
</div>
</div>
<div class="form-group">
<label for="givenName" class="col-sm-2 control-label">Given Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="givenName" placeholder="Given Name" maxlength="30">
</div>
</div>
<div class="form-group">
<label for="middleName" class="col-sm-2 control-label">Middle Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="middleName" placeholder="Middle Name" maxlength="30">
</div>
</div>
</form>
http://jsfiddle.net/y838v/3/
Based on http://getbootstrap.com/css/#forms-horizontal
so I was trying to create a form panel with Twitter Bootstrap into the center of the page, and hopefully even when the browser is resizing, it still be at the center,
here's what I tried on jsfiddle, the problem is I can't seem to make it center, anyone had ideas? the full code is in below
<div class="container">
<div class="row">
<div class="panel panel-default">
<div class="panel-body">
<legend>User Login</legend>
<form role="form">
<div class="form-group">
<label for="inputEmail">
Username</label>
<input id="inputEmail" type="text" class="form-control" placeholder="ex: John.Doe"
required="" />
</div>
<div class="form-group">
<label for="inputPassword">
Password</label>
<input id="inputPassword" type="password" class="form-control" placeholder="*******"
required="" />
</div>
<div class="checkbox">
<label>
<input id="chkRememberMe" type="checkbox" />
Remember Me
</label>
</div>
<button id="btnSubmit" type="submit" class="btn navbar-custom">
Submit</button>
</form>
</div>
</div>
</div>
</div>
the preview:
Please replace
<div class="panel panel-default">
with this
<div class="panel panel-default" style="max-width:400px;margin-left:auto; margin-right:auto;">
You can also use columns to size and center your panel, for example:
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<div class="panel panel-default">
<div class="panel-body">
<legend>User Login</legend>
<form role="form">
<div class="form-group">
<label for="inputEmail">Username</label>
<input id="inputEmail" type="text" class="form-control" placeholder="ex: John.Doe" required="" />
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input id="inputPassword" type="password" class="form-control" placeholder="*******" required="" />
</div>
<div class="checkbox">
<label>
<input id="chkRememberMe" type="checkbox" />
Remember Me
</label>
</div>
<button id="btnSubmit" type="submit" class="btn navbar-custom">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
Try setting the margins in the div's style attribute:
style="margin-left:auto;margin-right:auto;"
Hope it works...
How to vertically align label and input in Bootstrap 3? I would like both the label and input on same line. I have played around with different classes and custom CSS but nothing seems to work.
The JSfiddle
<div class="form-group">
<div class="row">
<div class="col-xs-3">
<label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
</div>
<div class="col-xs-2">
<select name="class_type" id="class_type" class=" form-control input-lg" style="width:200px" autocomplete="off">
<option >Economy</option>
<option >Premium Economy</option>
<option >Club World</option>
<option >First Class</option>
</select>
</div>
</div>
</div>
The bootstrap 3 docs for horizontal forms let you use the .form-horizontal class to make your form labels and inputs vertically aligned. The structure for these forms is:
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="input1" class="col-lg-2 control-label">Label1</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="input1" placeholder="Input1">
</div>
</div>
<div class="form-group">
<label for="input2" class="col-lg-2 control-label">Label2</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="input2" placeholder="Input2">
</div>
</div>
</form>
Therefore, your form should look like this:
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-xs-3">
<label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
</div>
<div class="col-xs-2">
<select id="class_type" class="form-control input-lg" autocomplete="off">
<option>Economy</option>
<option>Premium Economy</option>
<option>Club World</option>
<option>First Class</option>
</select>
</div>
</div>
</form>
When input-lg is used, margins mismatch unless you use form-group-lg in addition to form-group class.
Its example is in docs:
<form class="form-horizontal">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
</div>
</div>
</form>
None of these solutions worked for me. But I was able to get vertical centering by using <div class="form-row align-items-center"> for each form row, per the Bootstrap examples.
The problem is that your <label> is inside of an <h2> tag, and header tags have a margin set by the default stylesheet.
This works perfectly for me in Bootstrap 4.
<div class="form-row align-items-center">
<div class="col-md-2">
<label for="FirstName" style="margin-bottom:0rem !important;">First Name</label>
</div>
<div class="col-md-10">
<input type="text" id="FirstName" name="FirstName" class="form-control" val=""/>
/div>
</div>