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
Related
My Form elements are not fitting in correctly and the alignment is
distorted.
.h-100 has been used since the blue back ground is my navigation and I want it to fill the entire height available in the screen.
I would prefer to accept an answer which can explain why my snippet does not work.
Plunker here
HTML
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-2 blue">
</div>
<div class="col-10">
<div class="card h-100">
<div class="card-body">
<form>
<div class="form-group">
<label for="Random">Random 1</label>
<input type="text" class="form-control" id="random1" aria-describedby="emailHelp" placeholder="Enter name">
</div>
<div class="form-group">
<label for="Random">Random 2</label>
<input type="text" class="form-control" id="random2" aria-describedby="emailHelp" placeholder="Enter name">
</div>
<div class="form-group">
<label for="Random">Random 3</label>
<input type="text" class="form-control" id="random3" placeholder="Enter Random">
</div>
<div class="form-group">
<label for="Random">Random 4</label>
<input type="text" class="form-control" id="random4" aria-describedby="employeeCodeHelp" placeholder="Enter random random">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="isActive">
<label class="form-check-label" for="isActive">Is Active</label>
</div>
<div class="form-group">
<label for="Random">Random 5</label>
<input type="text" class="form-control" id="random5" placeholder="Enter Random Random">
</div>
<div class="form-group">
<label for="phoneNumber">Random 6</label>
<input type="number" class="form-control" id="random6" placeholder="Enter phone number">
</div>
<div class="form-group">
<label for="emailId">Email</label>
<input type="number" class="form-control" id="emailId" placeholder="Enter email">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
CSS
.blue {
background-color:blue;
}
html,body {
height: 100%;
}
Screen shot
remove .h-100 class from .container and from .row as its height should be auto instead of 100% , answer is as per what i understand , that your card is going out of your .col right?
if you want to give blue shape than here is the code :
<div class="row">
<div class="col-2 blue">
</div>
<div class="col-10">
<div class="card h-100">
<div class="card-body">
<form>
<div class="form-group">
<label for="Random">Random 1</label>
<input type="text" class="form-control" id="random1" aria-describedby="emailHelp" placeholder="Enter name">
</div>
<div class="form-group">
<label for="Random">Random 2</label>
<input type="text" class="form-control" id="random2" aria-describedby="emailHelp" placeholder="Enter name">
</div>
<div class="form-group">
<label for="Random">Random 3</label>
<input type="text" class="form-control" id="random3" placeholder="Enter Random">
</div>
<div class="form-group">
<label for="Random">Random 4</label>
<input type="text" class="form-control" id="random4" aria-describedby="employeeCodeHelp" placeholder="Enter random random">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="isActive">
<label class="form-check-label" for="isActive">Is Active</label>
</div>
<div class="form-group">
<label for="Random">Random 5</label>
<input type="text" class="form-control" id="random5" placeholder="Enter Random Random">
</div>
<div class="form-group">
<label for="phoneNumber">Random 6</label>
<input type="number" class="form-control" id="random6" placeholder="Enter phone number">
</div>
<div class="form-group">
<label for="emailId">Email</label>
<input type="number" class="form-control" id="emailId" placeholder="Enter email">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
.blue{
min-height: 100px //the height you want to give
}
In the following code, I have an image that I do not want shown on small screens (at the bottom). When the viewport is shrunk, the input fields are a left justified. I'd like them to be in the center of the viewport when the screen is XS. I've tried changing the Bootstrap 4 flex settings, but have yet to find a solution. Is there a way to do this in Bootstrap or SASS?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> {% block body %}
<div class="container d-flex">
<div class="row justify-content-center">
<div class="col-md-8 col-sm-8 col-xs-12">
<form action="{{ url_for('register') }}" method="post" class="my-5" id="registrationForm">
<div class="form-group">
<label class="firstName" for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName" name="firstname" placeholder="First Name">
</div>
<div class="form-group">
<label class="lastName" for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName" name="lastname" placeholder="Last Name">
</div>
<div class="form-group">
<label class="eMail" for="eMail">Email Address</label>
<input type="email" class="form-control" id="eMail" name="email" placeholder="Email">
</div>
<div class="form-group">
<label class="userName" for="userName">Preferred User Name</label>
<input type="text" class="form-control" id="userName" name="username" placeholder="User Name">
</div>
<div class="form-group">
<label class="passWord" for="passWord">Password</label>
<input type="password" class="form-control" id="passWord" name="password" placeholder="Password">
</div>
<div class="form-group">
<label class="passWord_2" for="password_2">Confirm Password</label>
<input type="password" class="form-control" id="password_2" name="password2" placeholder="Confirm Password">
</div>
<div class="form-group text-center">
<button type="submit" class="btn btn-primary custom-btn">Register!</button>
</div>
</form>
</div>
<div class="col-md-4 col-sm-4 flex-column my-5 py-3 align-self-center">
<img class="img-fluid img-thumbnail d-none d-sm-block" src="/static/savoy.jpeg" alt="aubrey beardsley drawing" />
</div>
</div>
</div>
<!-- End form container -->
{% endblock %}
You can use media queries to provide additional styles at specific breakpoints.
#media (max-width: 575px) {
.row.center-on-xs{ margin: 0 auto; }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> {% block body %}
<div class="container d-flex">
<div class="row center-on-xs justify-content-center">
<div class="col-md-8 col-sm-8 col-xs-12">
<form action="{{ url_for('register') }}" method="post" class="my-5" id="registrationForm">
<div class="form-group">
<label class="firstName" for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName" name="firstname" placeholder="First Name">
</div>
<div class="form-group">
<label class="lastName" for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName" name="lastname" placeholder="Last Name">
</div>
<div class="form-group">
<label class="eMail" for="eMail">Email Address</label>
<input type="email" class="form-control" id="eMail" name="email" placeholder="Email">
</div>
<div class="form-group">
<label class="userName" for="userName">Preferred User Name</label>
<input type="text" class="form-control" id="userName" name="username" placeholder="User Name">
</div>
<div class="form-group">
<label class="passWord" for="passWord">Password</label>
<input type="password" class="form-control" id="passWord" name="password" placeholder="Password">
</div>
<div class="form-group">
<label class="passWord_2" for="password_2">Confirm Password</label>
<input type="password" class="form-control" id="password_2" name="password2" placeholder="Confirm Password">
</div>
<div class="form-group text-center">
<button type="submit" class="btn btn-primary custom-btn">Register!</button>
</div>
</form>
</div>
<div class="col-md-4 col-sm-4 flex-column my-5 py-3 align-self-center">
<img class="img-fluid img-thumbnail d-none d-sm-block" src="/static/savoy.jpeg" alt="aubrey beardsley drawing" />
</div>
</div>
</div>
<!-- End form container -->
{% endblock %}
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>
In my form I have two cols with the label on top and a full width input. My problem is that I now have two fields requiring radios. I want to split the col into 2 and have the two labels with their two radios below. I can get that ok but the alignment is then not right on the next field down.
You can see it here in this bootply http://www.bootply.com/VlFHq0daui
Leased property and mesne rate units. The key codes below it is not aligning correctly.
<form>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label for="address_line1" class="control-label">Address 1</label>
<input type="text" class="form-control" id="address_line1">
</div>
<div class="form-group">
<label for="address_line1" class="control-label">Address 2</label>
<input type="text" class="form-control" id="address_line2">
</div>
<div class="form-group">
<label for="town" class="control-label">Town*</label>
<input type="text" class="form-control" id="town">
</div>
<div class="form-group">
<label for="county" class="control-label">County</label>
<input type="text" class="form-control" id="county">
</div>
<div class="form-group">
<label for="eircode" class="control-label">Eircode</label>
<input type="text" class="form-control" id="eircode">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="reference" class="control-label">Reference</label>
<input type="text" class="form-control" id="reference">
</div>
<div class="form-group">
<label for="tax_reference" class="control-label">Tax Reference</label>
<input type="text" class="form-control" id="tax_reference">
</div>
<div class="form-group">
<label for="local_authority" class="control-label">Local Authority</label>
<select name="local_authority" id="local_authority" class="form-control">
<option>Select...</option>
<option value="41">Ahtlone Town Council</option>
<option value="88">Youghal Town Council</option>
</select>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-6">
<label for="leased_property" class="control-label">Leased Property?</label>
<br>
<label class="radio-inline">
<input type="radio" name="leased_property" id="leased_property" value="YES"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="leased_property" id="leased_property" value="NO"> No
</label>
</div>
<div class="col-lg-6">
<label for="mesne_rates_unit" class="control-label">Mesne Rates Unit?</label>
<br>
<label class="radio-inline">
<input type="radio" name="mesne_rates_unit" id="mesne_rates_unit" value="YES"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="mesne_rates_unit" id="mesne_rates_unit" value="NO"> No
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="key_code" class="control-label">Key Code</label>
<input type="text" class="form-control" id="key_code">
</div>
<div class="form-group">
<label for="gprn_number" class="control-label">GPRN Number</label>
<input type="text" class="form-control" id="gprn_number">
</div>
<div class="form-group">
<label for="mprn_number" class="control-label">MPRN Number</label>
<input type="text" class="form-control" id="mprn_number">
</div>
</div>
</div>
</form>
You can warp radios inputs inside a div with same height of input box:
<div class="radios">
<label class="radio-inline">
<input type="radio" name="leased_property" id="leased_property" value="YES"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="leased_property" id="leased_property" value="NO"> No
</label>
</div>
CSS:
.radios{
height: 34px;
padding: 5px;
}
Bootply
Add this to your CSS.
.form-group {
min-height:59px;
}
After some trying I found a solution, its not perfect, but will solve the issue.
You could wrap your radio elements into a row and hardcode the needed margins to align the buttons the way you want. For this I gave the row a custom class align-radios.
HTML:
<div class="row align-radios">
<label class="radio-inline">
<input type="radio" name="leased_property" id="leased_property" value="YES"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="leased_property" id="leased_property" value="NO"> No
</label>
</div>
CSS:
.align-radios {
margin: 7px 0 7px 5px;
}
Hope this helps you a bit.
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