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>
Related
I use bootstrap 5
I have a form and i try to put first name and last name on the same row
<form >
<div id="executorsSection">
<br>
<div id="executorSection" class="form-row shadow-lg p-3 mb-3 bg-white rounded">
<div class="form-group col-md-6">
<label for="firstname" class="form-label">Firstname</label>
<input type="text" class="form-control" id="firstname" placeholder="Éric">
</div>
<div class="form-group col-md-6">
<label for="lastname" class="form-label">Lastname</label>
<input type="text" class="form-control" id="lastname" placeholder="Tremblay">
</div>
<div class="col-12">
<label for="city" class="form-label">City</label>
<input type="text" class="form-control" id="city" placeholder="Brossard">
</div>
</div>
</div>
<div id="executorSectionAdd">
Add a new client
</div>
</form>
An example here
https://www.codeply.com/p/5QTI9XqG65
I have a form and am having a problem trying to style it.
Here is what it looks like now:
I need it to look like this:
I need to style the first row and column for the Title and the 2nd row 3rd column for to date of birth.
I'm having trouble targeting the correct selector/element. Here is what the html looks like:
<h6 class="title">Personal Information</h6>
<div class="row">
<div class="col-3">
<select name="title"></select>
</div>
</div>
<div class="clear"></div>
<div class="row">
<div class="col-3">
<input type="text" name="firstname" value="" id="firstname"
maxlength="50" size="50" class="" placeholder="First name*"
style="background-image: url("data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0I
Ars4c6QAAAfBJREFUWAntVk1OwkAUZkoDKza4Utm61iP0AqyIDXahN2
BjwiHYGU+gizap4QDuegWN7lyCbMSlCQjU7yO0TOlAi6GwgJc0fT/fz
Pfmzet0crmD7HsFBAvQbrcrw+Gw5fu+AfOYvgylJ4TwCoVCs1ardYTr
uqfj8fgV5OUMSVVT93VdP9dAzpVvm5wJHZFbg2LQ2pEYOlZ/oiDvwNc
sFoseY4PBwMCrhaeCJyKWZU37KOJcYdi27QdhcuuBIb073BvTNL8ln4
NeeR6NRi/wxZKQcGurQs5oNhqLshzVTMBewW/LMU3TTNlO0ieTiStjY
hUIyi6DAp0xbEdgTt+LE0aCKQw24U4llsCs4ZRJrYopB6RwqnpA1YQ5
NGFZ1YQ41Z5S8IQQdP5laEBRJcD4Vj5DEsW2gE6s6g3d/YP/g+BDnT7
GNi2qCjTwGd6riBzHaaCEd3Js01vwCPIbmWBRx1nwAN/1ov+/drgFWI
lfKpVukyYihtgkXNp4mABK+1GtVr+SBhJDbBIubVw+Cd/TDgKO2DPiN
3YUo6y/nDCNEIsqTKH1en2tcwA9FKEItyDi3aIh8Gl1sRrVnSDzNFDJ
T1bAy5xpOYGn5fP5JuL95ZjMIn1ya7j5dPGfv0A5eAnpZUY3n5jXcoe
c5J67D9q+VuAPM47D3XaSeL4AAAAASUVORK5CYII=");
background-repeat: no-repeat; background-attachment:
scroll; background-size: 16px 18px;
background-position: 98% 50%; cursor: auto;">
<!--<input type="text" placeholder="First name*">-->
<div class="form_error"></div>
</div>
<div class="col-3">
<!-- <input type="text" placeholder="Last name*">-->
<input type="text" name="lastname" value="" id="lastname"
maxlength="50" size="50" placeholder="Last name*">
<div class="form_error"></div>
</div>
<div class="col-3">
<!-- <input type="text" placeholder="Last name*">-->
<input type="text" name="dob" value="" id="dob" maxlength="50"
size="50" placeholder="Date of birth (DD/MM/YYYY)*">
<div class="form_error"></div>
<!--<input type="text" placeholder="Date of birth (DD/MM/YYYY)*" class="dob">-->
</div>
</div>
<div class="clear"></div>
<div class="row">
<div class="col-3">
<input type="text" name="mobile" value="" id="mobile"
maxlength="50" size="50" placeholder="Mobile*">
<div class="form_error"></div>
<!--<input type="tel" placeholder="Mobile*">-->
</div>
<div class="col-3">
<input type="email" name="email" value="" id="email"
maxlength="50" size="50" placeholder="Email*">
<div class="form_error"></div>
<!--<input type="email" placeholder="Email*">-->
</div>
<div class="col-3">
<input type="text" name="emailconf" value="" id="emailconf"
maxlength="50" size="50" placeholder="Confirm Email*">
<div class="form_error"></div>
<!--<input type="email" placeholder="Confirm Email*">-->
</div>
</div>
<div class="clear"></div>
<div class="row">
<div class="col-1">
<input type="text" name="address1" value="" id="address1"
maxlength="50" size="50" placeholder="Address*">
<div class="form_error"></div>
<!--<input type="text" placeholder="Address*">-->
</div>
</div>
<div class="clear"></div>
<div class="row">
<div class="col-3">
<input type="text" name="suburb" value="" id="suburb"
maxlength="50" size="50" placeholder="Suburb*">
<div class="form_error"></div>
<!--<input type="text" placeholder="Suburb*">-->
</div>
<div class="col-3">
<select name="stateid">
</select>
</div>
<div class="col-3">
<input type="text" name="postcode" value="" id="postcode"
maxlength="4" size="10" placeholder="Postcode*">
<div class="form_error"></div>
</div>
</div>
Any help is greatly appreciated
to make the structure better I would say load bootstrap CSS
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
and use this markup:
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="title">Personal Information</h2>
</div>
</div>
<div class="row">
<div class="col-md-2">
<select>
<option value="mr">Mr.</option>
<option value="mrs">Mrs.</option>
<option value="ms">Ms.</option>
</select>
</div>
<div class="col-md-4">
<input type="text" placeholder="First name">
</div>
<div class="col-md-4">
<input type="text" placeholder="Last name">
</div>
<div class="col-md-2">
<input type="date">
</div>
</div>
<div class="row">
<div class="col-md-4">
<input type="text" placeholder="Mobile">
</div>
<div class="col-md-4">
<input type="email" placeholder="Email">
</div>
<div class="col-md-4">
<input type="email" placeholder="Confirm Email">
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="text" placeholder="Address">
</div>
</div>
<div class="row">
<div class="col-md-4">
<input type="text" placeholder="Suburb">
</div>
<div class="col-md-4">
<select>
<option value="mr">NSW</option>
</select>
</div>
<div class="col-md-4">
<input type="text" placeholder="Post Code">
</div>
</div>
</div>
and you can customize the look of the form fields, just put this code after you load the Bootstrap
input, select { width:100%; padding:14px; margin:10px 0; border:2px solid #6aa295; }
You should use something like this. And bootstrap is responsive so You could see how it look on the expand view.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<form class="form-horizontal">
<div class="row">
<div class="col-md-12">
<h2><p class="text-center">Personal Information</p></h2>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<select class="form-control">
<option value="mr">Mr.</option>
<option value="ms">Ms.</option>
</select>
</div>
<div class="col-md-4">
<input type="text" class="form-control" id="firstname" class="form-control" placeholder="First name *">
</div>
<div class="col-md-4">
<input type="text" class="form-control" id="lastname" class="form-control" placeholder="Last name *">
</div>
<div class="col-md-2">
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<input type="text" id="mobile" class="form-control" placeholder="Mobile *">
</div>
<div class="col-md-4">
<input type="email" id="email" class="form-control" placeholder="Email *">
</div>
<div class="col-md-4">
<input type="email" id="emailconf" class="form-control" placeholder="Confirm Email *">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="text" id="address1" class="form-control" placeholder="Address *">
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<input type="text" id="suburb" class="form-control" placeholder="Suburb *">
</div>
<div class="col-md-4">
<select class="form-control">
<option class="collapse" value="mr">Info</option>
</select>
</div>
<div class="col-md-4">
<input type="text" id="postcode" class="form-control" placeholder="Post Code *">
</div>
</div>
</form>
</div>
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
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>