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.
Related
I am trying to layout a form using bootstrap 3 but for some reason the input is pushed to left.
My markup looks like this
<div class="jumbotron">
<form name="invoiceForm" class="form-horizontal" role="form" data-toggle="validator">
<div class="form-group">
<label class="control-label col-sm-3" for="txt_job_date" >Date work performed</label>
<p class="input-group col-sm-3">
<input type="text"
class="form-control"
datepicker-popup="{{format}}" ng-model="dt"
is-open="opened" min-date="minDate"
max-date="'2015-06-22'"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close"
id="txt_job_date"
ng-model="job_date"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="txt_job_ref_no" required-asterix="" >Ref No</label>
<div class="col-sm-2">
<input type="text" class="form-control" ng-model="ref_no" id="txt_job_ref_no" placeholder="123RTE" required="">
</div>
<div role="alert">
<span class="error has-error alert-danger" ng-show="invoiceForm.txt_job_ref_no.$error.required">
Ref no is required!</span>
</div>
</div>
</form>
</div>
Here is the link to fiddle
Many thanks in advance!
This should help. Wrap the labels and elements in cols, and the form in a .container inside the .jumbotron. You were over-complicating the layout.
<div class="jumbotron">
<div class="container">
<form name="invoiceForm" class="form-horizontal" role="form" data-toggle="validator">
<div class="col-sm-12">
<div class="form-group">
<label class="control-label" for="txt_job_date">Date work performed</label>
<div class="input-group">
<input type="text"
class="form-control"
datepicker-popup="{{format}}" ng-model="dt"
is-open="opened" min-date="minDate"
max-date="'2015-06-22'"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close"
id="txt_job_date"
ng-model="job_date"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label class="control-label" for="txt_job_ref_no" required-asterix="" >Ref No</label>
<input type="text" class="form-control" ng-model="ref_no" id="txt_job_ref_no" placeholder="123RTE" required="">
</div>
</div>
</form>
</div>
</div>
http://jsfiddle.net/j8x15dbs/1/
Edit: Missed part about form being horizontal. Added new code below to reflect that.
This has the layout you're looking for
<div class="jumbotron">
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-3" for="txt_job_date">Date work performed</label>
<div class="col-sm-7">
<div class="input-group">
<input type="text"
class="form-control"
datepicker-popup="{{format}}" ng-model="dt"
is-open="opened" min-date="minDate"
max-date="'2015-06-22'"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close"
id="txt_job_date"
ng-model="job_date"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="txt_job_ref_no" required-asterix="">Ref No</label>
<div class="col-sm-7">
<input type="text" class="form-control" ng-model="ref_no" id="txt_job_ref_no" placeholder="123RTE" required="required">
</div>
</div>
</form>
</div>
</div>
http://jsfiddle.net/j8x15dbs/2/
A real easy thing to do - and a great way to learn - is to just copy the examples off of Bootstrap's site and replace their values with yours. :)
remove <col-sm-2> from before the input tag. As good practice, always use <div class="row"> before using <col-sm-12> and don't use rows or columns inside <div class="form-group">
Please read about bootstrap scaffolding to understand how to write good markup.
I have troubles with creating a "form-horizontal" with bootstrap.
http://jsfiddle.net/frauger/jo0b6yod/
As you can see in the jsfiddle the label "date of birth" is not correctly aligned above the "date of birth select"
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-xs-2 control-label">Name</label>
<div class="col-xs-10">
<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-3 col-sm-2 control-label">Birthday</label>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="year"/>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="month"/>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="day"/>
</div>
</div>
Thanks
Wrap all of your existing select divs in a new container div that has the form-group class.
<div class="form-group">
<div class="col-xs-4">
<select type="text" class="form-control" id="field-day" required>
<option>DD</option>
</select>
</div>
<div class="col-xs-4">
<select type="text" class="form-control" id="field-month" required>
<option>MM</option>
</select>
</div>
<div class="col-xs-4">
<select type="text" class="form-control" id="field-year" required>
<option>YYY</option>
</select>
</div>
</div>
working fiddle:
http://jsfiddle.net/jo0b6yod/2/
Include the label within div tag, that should make the label within a block level, and takes of 100% of its parent.
ex:
<div class="form-group">
<div><label for="birthday" class="col-xs-3 col-sm-2 control-label">Birthday</label></div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="year"/>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="month"/>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="day"/>
</div>
</div>
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 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.
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