I have
<form action="#" method="post" class="well">
<fieldset>
<div class="control-group">
<label class="control-label" for="FirstName">Name</label>
<div class="controls row-fluid">
<div class="span2 row">
<input class="span12" id="FirstName" name="FirstName" placeholder="Firstname" type="text" value=""/>
</div>
<div class="span2 row">
<input class="span12" id="MiddleName" name="MiddleName" placeholder="Middlename" type="text" value=""/>
</div>
<div class="span2 row">
<input class="span12" id="LastName" name="LastName" placeholder="Lastname" type="text" value=""/>
</div>
</div>
</div>
</fieldset>
</form>
jsfiddle: http://jsfiddle.net/bWGfb/
I want to add label for Last Name, so I want to have labels for First and Last Name only. How is it possible with bootstrap?
UPDATE:
I can make something like that:
<div class="row-fluid">
<div class="span12">
<div class="span4">
<label>First Name</label>
<input type="text" class="span12" placeholder="First Name">
</div>
<div class="span4" style="margin-top: 25px;">
// field without label
<input type="text" class="span12" placeholder="Last Name">
</div>
<div class="span4 ">
<label>First Name</label>
<input type="text" class="span12" placeholder="Last Name">
</div>
</div>
</div>
http://jsfiddle.net/bWGfb/1/
but it adds extra margin style.
Something like this:
<form action="#" method="post" class="well">
<fieldset>
<div class="control-group">
<div class="row-fluid">
<div class="span3">
<label for="FirstName">First name</label>
<input class="span12" id="FirstName" name="FirstName" placeholder="Firstname" type="text" value=""/>
</div>
<div class="span3">
<label for="MiddleName"> </label>
<input class="span12" id="MiddleName" name="MiddleName" placeholder="Middlename" type="text" value=""/>
</div>
<div class="span3">
<label for="LastName">Last name</label>
<input class="span12" id="LastName" name="LastName" placeholder="Lastname" type="text" value=""/>
</div>
</div>
</div>
</fieldset>
</form>
Just override the label style in bootstrap.css (line 946) in your own CSS
It has 5px bottom margin, just set it to what you need, but tbh a little spacing is good ;)
Related
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>
I've made 5 rows using bootstrap, they got placed neatly, but there is a small issue. The rows are getting in contact without leaving any gap. I should not use , this will bring a big gap, and the textboxes in each row should be vertically align, if there is no radio button in that row, that corresponding place should be kept empty and textbox should get aligned properly with all rows. The starting textbox in all rows should start at the same place where the first row textbox has started. Here is my code
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="form-inline">
<div class="radio" style="width: 100px;">
<label><input type="radio" name="optradio">Option
1</label>
</div>
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-inline">
<div class="radio" style="width: 100px;">
<label><input type="radio" name="optradio">Option
1</label>
</div>
<input type="text" class="form-control" /> <input type="text"
class="form-control" />
<div class="form-group">
<label for="sel1">Select list:</label> <select
class="form-control" id="sel1">
<option>Apple</option>
<option>Mango</option>
<option>Orange</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-inline">
<input type="text" class="form-control" /> <input type="text"
class="form-control" /> <input type="text" class="form-control" />
<input type="text" class="form-control" /> <input type="text"
class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-inline">
<div class="radio" style="width: 100px;">
<label><input type="radio" name="optradio">Option
1</label>
</div>
<input type="text" class="form-control" /> <input type="text"
class="form-control" />
<div class="form-group">
<label for="sel1">Select list:</label> <select
class="form-control" id="sel1">
<option>Apple</option>
<option>Mango</option>
<option>Orange</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-inline">
<input type="text" class="form-control" /> <input type="text"
class="form-control" /> <input type="text" class="form-control" />
<input type="text" class="form-control" /> <input type="text"
class="form-control" />
</div>
</div>
</div>
</div>
Please check in browser not in fiddle because it changes alignments .
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="form-inline form-group">
<div class="radio" style="width:95px;" >
<label><input type="radio" name="optradio" style="vertical-align:middle;"> Option
1</label>
</div>
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-inline form-group">
<div class="radio" style="width:95px;" >
<label><input type="radio" name="optradio">Option
1</label>
</div>
<input type="text" class="form-control" /> <input type="text"
class="form-control" />
<div class="form-group">
<label for="sel1">Select list:</label> <select
class="form-control" id="sel1">
<option>Apple</option>
<option>Mango</option>
<option>Orange</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-offset-1">
<div class="form-inline form-group">
<input type="text" class="form-control" /> <input type="text"
class="form-control" /> <input type="text" class="form-control" />
<input type="text" class="form-control" /> <input type="text"
class="form-control" />
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-inline form-group">
<div class="radio" style="width:95px;">
<label><input type="radio" name="optradio">Option
1</label>
</div>
<input type="text" class="form-control" /> <input type="text"
class="form-control" />
<div class="form-group">
<label for="sel1">Select list:</label> <select
class="form-control" id="sel1">
<option>Apple</option>
<option>Mango</option>
<option>Orange</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-offset-1">
<div class="form-inline form-group">
<input type="text" class="form-control" /> <input type="text"
class="form-control" /> <input type="text" class="form-control" />
<input type="text" class="form-control" /> <input type="text"
class="form-control" />
</div>
</div>
</div>
</div>
Here is JSFIDDLE
I have the following markup:
<form accept-charset="UTF-8" action="/task_categories/1" class="form-horizontal" id="edit_task_category_1" method="post">
<div class="row">
<div class="col-md-4">
<div class="well">
<div class="form-group"><label class="control-label col-sm-6" for="task_category_task_category_users_attributes_0_Enable">Enable?</label><div class="col-sm-6"><input name="task_category[task_category_users_attributes][0][enable]" type="hidden" value="0"><input class="form-control" id="task_category_task_category_users_attributes_0_enable" name="task_category[task_category_users_attributes][0][enable]" type="checkbox" value="true"></div></div>
<div class="form-group"><label class="control-label col-sm-6" for="task_category_task_category_users_attributes_0_Enable Comment">Enable comment?</label><div class="col-sm-6"><input name="task_category[task_category_users_attributes][0][comments_enabled]" type="hidden" value="0"><input class="form-control" id="task_category_task_category_users_attributes_0_comments_enabled" name="task_category[task_category_users_attributes][0][comments_enabled]" type="checkbox" value="true"></div></div>
<input id="task_category_task_category_users_attributes_0_user_id" name="task_category[task_category_users_attributes][0][user_id]" type="hidden" value="1">
</div>
</div>
<div class="col-md-4">
<div class="well">
<div class="form-group"><label class="control-label col-sm-6" for="task_category_task_category_users_attributes_1_Enable">Enable?</label><div class="col-sm-6"><input name="task_category[task_category_users_attributes][1][enable]" type="hidden" value="0"><input class="form-control" id="task_category_task_category_users_attributes_1_enable" name="task_category[task_category_users_attributes][1][enable]" type="checkbox" value="true"></div></div>
<div class="form-group"><label class="control-label col-sm-6" for="task_category_task_category_users_attributes_1_Enable Comment">Enable comment?</label><div class="col-sm-6"><input name="task_category[task_category_users_attributes][1][comments_enabled]" type="hidden" value="0"><input class="form-control" id="task_category_task_category_users_attributes_1_comments_enabled" name="task_category[task_category_users_attributes][1][comments_enabled]" type="checkbox" value="true"></div></div>
<input id="task_category_task_category_users_attributes_1_user_id" name="task_category[task_category_users_attributes][1][user_id]" type="hidden" value="2">
</div>
</div>
</div>
</form>
The problem is the label text does not float left. Even when I add a text-align: left to the containing div, it still does not align left. What may I be doing wrong?
You need to add a text-align: left style to .control-label.
Because bootstrap gives labels within horizontal forms the text align style using the selector .form-horizontal .control-label, you need to use the same or a more specific selector:
.form-horizontal .control-label{
text-align: left;
}
JSFiddle
Set the text-align property to the .control-label. View output in Full screen.
.form-horizontal .control-label {
text-align: left !important; /* !important added for priority in SO snippet. */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<form accept-charset="UTF-8" action="/task_categories/1" class="form-horizontal" id="edit_task_category_1" method="post">
<div class="row">
<div class="col-md-4">
<div class="well">
<div class="form-group">
<label class="control-label col-sm-6" for="task_category_task_category_users_attributes_0_Enable">Enable?</label>
<div class="col-sm-6">
<input name="task_category[task_category_users_attributes][0][enable]" type="hidden" value="0">
<input class="form-control" id="task_category_task_category_users_attributes_0_enable" name="task_category[task_category_users_attributes][0][enable]" type="checkbox" value="true">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-6" for="task_category_task_category_users_attributes_0_Enable Comment">Enable comment?</label>
<div class="col-sm-6">
<input name="task_category[task_category_users_attributes][0][comments_enabled]" type="hidden" value="0">
<input class="form-control" id="task_category_task_category_users_attributes_0_comments_enabled" name="task_category[task_category_users_attributes][0][comments_enabled]" type="checkbox" value="true">
</div>
</div>
<input id="task_category_task_category_users_attributes_0_user_id" name="task_category[task_category_users_attributes][0][user_id]" type="hidden" value="1">
</div>
</div>
<div class="col-md-4">
<div class="well">
<div class="form-group">
<label class="control-label col-sm-6" for="task_category_task_category_users_attributes_1_Enable">Enable?</label>
<div class="col-sm-6">
<input name="task_category[task_category_users_attributes][1][enable]" type="hidden" value="0">
<input class="form-control" id="task_category_task_category_users_attributes_1_enable" name="task_category[task_category_users_attributes][1][enable]" type="checkbox" value="true">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-6" for="task_category_task_category_users_attributes_1_Enable Comment">Enable comment?</label>
<div class="col-sm-6">
<input name="task_category[task_category_users_attributes][1][comments_enabled]" type="hidden" value="0">
<input class="form-control" id="task_category_task_category_users_attributes_1_comments_enabled" name="task_category[task_category_users_attributes][1][comments_enabled]" type="checkbox" value="true">
</div>
</div>
<input id="task_category_task_category_users_attributes_1_user_id" name="task_category[task_category_users_attributes][1][user_id]" type="hidden" value="2">
</div>
</div>
</div>
</form>
Okay. I'm trying to recreate this form in particular using as much default bootstrap styling as possible.
The problem I'm having is having the left and right sidelooking like this.
I'm using a Modal class for the dark background.
<div class="panel-footer modal_custom">
<div class="container">
<h2>Talk to us</h2>
<h4>What's on your mind?</h4>
<form action="" role="form">
<div class="form-group col-lg-3">
<label for="form-elem-1"> Name</label>
<input type="text" id="form-elem-1" class="form-control" placeholder="Enter Your name" />
</div>
<div class="form-group col-lg-3">
<label for="form-elem-2"> Telephone</label>
<input type="text" id="form-elem-2" class="form-control" placeholder="Enter Your telephone number" />
</div>
<div class="form-group col-lg-3">
<label for="form-elem-3"> Email</label>
<input type="text" id="form-elem-3" class="form-control" placeholder="Enter Your e-mail" />
</div>
<div class="form-group col-lg-3">
<label for="form-elem-4"> Company</label>
<input type="text" id="form-elem-4" class="form-control" placeholder="Enter Your company name" />
</div><br />
<div class="form-group>
<label for="form-elem-4"> Enquiry</label>
<input type="text" id="form-elem-4" class="form-control" placeholder="Enter Your enquiry" />
</div>
</form>
</div>
</div>
I don't need much help on the color and those smaller things. just on how to position the Enquiry to the right and making it looks as close to the example as possible.
There isn't any css yet that affects much of the code above. And I'm failry new to the fomr function. How would I have the form actually work too.
Is this what you need, now you have add some your styles for button, and background
<div class="panel-footer modal_custom">
<div class="container">
<h2>Talk to us</h2>
<h4>What's on your mind?</h4>
<form action="" role="form">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label for="form-elem-1"> Name</label>
<input type="text" id="form-elem-1" class="form-control" placeholder="Enter Your name" />
</div>
<div class="form-group">
<label for="form-elem-2"> Telephone</label>
<input type="text" id="form-elem-2" class="form-control" placeholder="Enter Your telephone number" />
</div>
<div class="form-group">
<label for="form-elem-3"> Email</label>
<input type="text" id="form-elem-3" class="form-control" placeholder="Enter Your e-mail" />
</div>
<div class="form-group">
<label for="form-elem-4"> Company</label>
<input type="text" id="form-elem-4" class="form-control" placeholder="Enter Your company name" />
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label class="col-md-3" for="comment">Comment:</label>
<div class="col-md-9">
<textarea class="form-control" rows="13" id="comment"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-right">
<div class="form-group">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
Working fiddle
http://jsfiddle.net/52VtD/9098/
Try to re-build that form using responsive Table. Set the table with two columns and get the required design without change in CSS.
I have a quick Bootstrap issue. I am setting up a form and it seems that the form label is not aligning to the input field. I have had an issue like this before which was solved by adding clearfix to the class. This did not resolve the issue.
Fiddle example:
http://jsfiddle.net/mwoods98/P6ux2/1/
<div id="pane2" class="tab-pane">
<div class="well">
<label class="control-label" for="interview">Label 1</label>
<div class="controls">
<div>
<input type="text" id="interview" name="FDFINTERVIEW" class="" />
</div>
</div>
<label class="control-label" for="resume">Label 2</label>
<div class="controls">
<div>
<input type="text" id="resume" name="FDFMEMOSENT" class="" />
</div>
</div>
<label class="control-label" for="memoreceived">Label 3</label>
<div class="controls">
<div>
<input type="text" id="memoreceived" name="FDFMEMORECV" class="" />
</div>
</div>
<label class="control-label" for="selectionemail">Label 4</label>
<div class="controls">
<div>
<input type="text" id="selectionemail" name="fdfEmailSent" class="" />
</div>
</div>
<label class="control-label" for="fdfSECSbmt">Label 5</label>
<div class="controls">
<div>
<input type="text" id="fdfSECSbmt" name="fdfSECSbmt" class="" />
</div>
</div>
<label class="control-label" for="fdfInSECGrnt">Label 6</label>
<div class="controls">
<div>
<input type="text" id="fdfInSECGrnt" name="fdfInSECGrnt" class="" />
</div>
</div>
<label class="control-label" for="fdfInSECDeny">Label 1=7</label>
<div class="controls">
<div>
<input type="text" id="fdfInSECDeny" name="fdfInSECDeny" class="" />
</div>
</div>
<label class="control-label" for="fdfFullSECGrnt">Label 8</label>
<div class="controls">
<div>
<input type="text" id="fdfFullSECGrnt" name="fdfFullSECGrnt" class="" />
</div>
</div>
<label class="control-label" for="fdfMEDGrnt">Label 9</label>
<div class="controls">
<div>
<input type="text" id="fdfMEDGrnt" name="fdfMEDGrnt" class="" />
</div>
</div>
<label class="control-label" for="fdfEOD">Label 10</label>
<div class="controls">
<div>
<input type="text" id="fdfEOD" name="fdfEOD" class="" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="textarea">Label 11</label>
<div class="controls">
<textarea class="input-xlarge" id="textarea" rows="3"></textarea>
</div>
</div>
</div>
<!-- end of well -->
</div>
TIA
You have to put the element in a control-group class and add to your form the form-horizontal class, you also don't need an extra div for your input.
<div class="form-horizontal">
<div class="control-group">
<label class="control-label" for="interview">Label 1</label>
<div class="controls">
<input type="text" id="interview" name="FDFINTERVIEW" class="" /></div>
</div>
</div>
</div>
Add .form-horizontal to the form.
Wrap labels and controls in .control-group
Add .control-label to the label
Wrap any associated controls in .controls for proper alignment
Twitter Bootstrap doc - Horizontal Form