I am coming from a C# background where i do basically winform to Web where i have to make good UI and a good form, now i am trying to make a Form using Bootstrap as i know how to do backend and all. now i want to learn how to use Bootstrap for Frontend as i see , most jobs are Web Based now.
Now My code Looks like this, and its very scattered.
<!doctype html>
<html>
<head>
<title>New Bootstrap test</title>
<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.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<h3>Test Form </h3>
<body>
<form class="form-hotizontal" role="form" method="post" action="index.php"/>
<div class="form-group">
<label for ="fullname" class="col-sm-2 control-label">Name</label>
<div class ="col-sm-10">
<input type="text" class="form-control" id="name" name="fullname" placeholder="Name in Full" value="" />
</div>
<div class="form-group">
<label for ="telephone" class="col-sm-2 control-label">Telephone</label>
<div class ="col-sm-10">
<input type="text" class="form-control" id="telephone" name="telephone" placeholder="Telephone" value="" />
</div>
<div class="form-group">
<label for ="email" class="col-sm-2 control-label">Email</label>
<div class ="col-sm-10">
<input type="text" class="form-control" id="email" name="email" placeholder="E-Mail" value="" />
</div>
<div class="form-group">
<label for ="name" class="col-sm-2 control-label">ID Number</label>
<div class ="col-sm-10">
<input type="text" class="form-control" id="idnumber" name="idnumber" placeholder="ID Number" value="" />
</div>
<div class="form-group">
<div class ="col-sm-10">
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</body>
</html>
When i run it in browser instead of displaying a correct form, it just arranges them like staircases. I am new to this hence, I need help in this case.
You're missing div tags. There was also a typo in the form-horizontal class. Here is the corrected version. Here is a codepen for a demo. For every starting div tag, there should be a closing div.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<form class="form-horizontal" role="form" method="post" action="index.php" />
<div class="form-group">
<label for="fullname" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="fullname" placeholder="Name in Full" value="" />
</div>
</div>
<div class="form-group">
<label for="telephone" class="col-sm-2 control-label">Telephone</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="telephone" name="telephone" placeholder="Telephone" value="" />
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="email" name="email" placeholder="E-Mail" value="" />
</div>
</div>
<div class="form-group">
<label for="name" class="col-sm-2 control-label">ID Number</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="idnumber" name="idnumber" placeholder="ID Number" value="" />
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I am trying to move my "Seller" container right below my "Corporation Store" container. I added a visual presentation.
I tried using clear:bothand clear:left; however, it was messing the other containers: "Customer" and "Product".
So, I tried putting the "Seller" container into a new row and tried using clear:both to put the "Seller" container below "Corporation" container.
Because the "Customer" container is big, it creates a huge gap between "Seller" and "Corporation" containers. Is there a way I can fix this problem or approach this problem different?
Thank you
jsfiddle
I achieved what your end result by wrapping both "Corporation Store" and "Seller ID" in their own "col-xs-3" container and then stripping them of that same class.
<!DOCTYPE html>
<html>
<head>
<title>Corp Simulator</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
<link rel="stylesheet" href="../css/sweetalert2.min.css">
<link rel="stylesheet" href="../css/home.css">
</head>
<body>
<!-- navigation -->
<nav class="navbar navbar-default">
<!-- container -->
<div class="container">
<!-- header -->
<div class="navbar-header">
<div class="col-xs-12 navbar-header-padding">
<span class="col-xs-3"><img src="../img/corp-logo-flat.png"/></span>
<span class="col-xs-9"><a class="navbar-brand">Corp Simulator</a><a type="button" data-toggle="modal" data-target="#buildModal" class="label label-default pull-right ">Build</a></span>
</div>
</div>
</div>
</nav>
<!-- begin content -->
<div class="col-sm-12">
<div class="col-xs-8">
<!-- corporation -->
<div class="col-xs-12">
<h2>Corporation</h2>
<!-- begin form -->
<form id="cForm">
<!-- begin row -->
<div class="row">
<div class="col-xs-3">
<!-- corporation store -->
<div>
<div class="panel panel-default">
<div class="panel-heading">Corporation Store</div>
<div class="panel-body">
<div class="col-xs-12 no-left-right-padding">
<div class="col-xs-6 no-right-padding">
<div class="form-group">
<label for="corpId">Corporation ID #</label>
<input type="text" class="form-control" tabindex="1" name="corpId" id="corpId" schoolId="corpId">
</div>
</div>
</div>
<div class="form-group">
<label for="startDate">Start Date</label>
<input type="datetime-local" class="form-control" tabindex="2" name="startDate" id="startDate" placeholder="Start Date">
</div>
<div class="form-group">
<label for="endTime">End Time</label>
<input type="datetime-local" class="form-control" tabindex="3" name="endTime" id="endTime" placeholder="End Time">
</div>
</div>
</div>
</div>
<!-- seller info -->
<div>
<div class="panel panel-default">
<div class="panel-heading">Seller ID</div>
<div class="panel-body">
<div class="form-group">
<label for="sellerId">SE ID</label>
<input type="text" class="form-control" tabindex="4" name="sellerId" id="sellerId" placeholder="SE ID">
</div>
<div class="form-group">
<label for="seFirstName">SE First Name</label>
<input type="text" class="form-control" tabindex="5" name="seFirstName" id="seFirstName" placeholder="SE First Name">
</div>
<div class="form-group">
<label for="seLastName">SE Last Name</label>
<input type="text" class="form-control" tabindex="6" name="seLastName" id="seLastName" placeholder="SE Last Name">
</div>
</div>
</div>
</div>
<div style="clear: both;"></div>
</div>
<!--customer -->
<div class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">Customer</div>
<div class="panel-body">
<div class="col-xs-6">
<div class="form-group">
<label for="customerId">Customer ID</label>
<input type="text" class="form-control" tabindex="7" name="customerId" id="customerId" placeholder="Customer ID">
</div>
<div class="form-group">
<label for="companyName">Company Name</label>
<input type="text" class="form-control" tabindex="9" name="companyName" id="companyName" placeholder="Company Name">
</div>
<div class="form-group">
<label for="customerFirstName">First Name</label>
<input type="text" class="form-control" tabindex="11" name="customerFirstName" id="customerFirstName" placeholder="First Name">
</div>
<div class="form-group">
<label for="customerAddress1">Address 1</label>
<input type="text" class="form-control" tabindex="13" name="customerAddress1" id="customerAddress1" placeholder="Address 1">
</div>
<div class="form-group">
<label for="customerCity">City</label>
<input type="text" class="form-control" tabindex="15" name="customerCity" id="customerCity" placeholder="City">
</div>
<div class="form-group">
<label for="customerPostalCode">Postal Code</label>
<input type="text" class="form-control" tabindex="17" name="customerPostalCode" id="customerPostalCode" placeholder="Postal Code">
</div>
<div class="form-group">
<label for="customerPhone1">Phone 1</label>
<input type="text" class="form-control" tabindex="19" name="customerPhone1" id="customerPhone1" placeholder="Phone 1">
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="relationshipType">Relationship</label>
<input type="text" class="form-control" tabindex="8" name="relationship" id="relationship" placeholder="Relationship">
</div>
<div class="form-group">
<label for="nationalId">National Identifier</label>
<input type="text" class="form-control" tabindex="10" name="nationalId" id="nationalId" placeholder="National ID">
</div>
<div class="form-group">
<label for="customerLastName">Last Name</label>
<input type="text" class="form-control" tabindex="12" name="customerLastName" id="customerLastName" placeholder="Last Name">
</div>
<div class="form-group">
<label for="customerAddress2">Address 2</label>
<input type="text" class="form-control" tabindex="14" name="customerAddress2" id="customerAddress2" placeholder="Address 2">
</div>
<div class="form-group">
<label for="customerState">State/Province</label>
<input type="text" class="form-control" tabindex="16" name="customerState" id="customerState" placeholder="State/Province">
</div>
<div class="form-group">
<label for="customerCountryCode">Country Code</label>
<input type="text" class="form-control" tabindex="18" name="customerCountryCode" id="customerCountryCode" placeholder="Country Code">
</div>
<div class="form-group">
<label for="customerPhone2">Phone 2</label>
<input type="text" class="form-control" tabindex="20" name="customerPhone2" id="customerPhone2" placeholder="Phone 2">
</div>
</div>
<div class="col-xs-12">
<div class="form-group">
<label for="customerEmail">Email</label>
<input type="email" class="form-control" tabindex="22" name="customerEmail" id="customerEmail" placeholder="Email">
</div>
</div>
</div>
</div>
</div>
<!-- product -->
<div class="col-xs-3">
<div class="panel panel-default">
<div class="panel-heading">Product</div>
<div class="panel-body">
<div class="form-group">
<label for="prodId">Product ID</label>
<input type="text" class="form-control" tabindex="23" name="prodId" id="prodId" placeholder="PRODUCT ID">
</div>
<div class="form-group">
<label for="modelYear">Year</label>
<input type="text" class="form-control" tabindex="24" name="modelYear" id="modelYear" placeholder="Year">
</div>
<div class="form-group">
<label for="model">Model</label>
<input type="text" class="form-control" tabindex="25" name="model" id="model" placeholder="Model">
</div>
</div>
</div>
</div>
</div>
<!-- end row -->
</form>
<!-- end form -->
</div>
</div>
</div>
</body>
</html>
The snippet is limited in its view, but you will see the layout you wanted to achieve.
In the following Bootstrap Horizontal form if I want to add a caption right below Order label as <small class="text-muted">Must be at least 200</small> where do I place it? NOTE: Question is related to how to place a muted caption in small muted font right underneath a Bootstrap horizontal form's label. I know the role of placeholder attribute but in actual app I do need to place such a caption underneath a form's label.
<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h2>Horizontal form</h2>
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox" name="remember"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
You can put wrap the <label> with a new div, move the col-sm-2 to that div and add the small element inside:
<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h2>Horizontal form</h2>
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<div class="col-sm-2">
<label class="control-label" for="email">Email:</label><br />
<small class="text-muted">Must be at least 200</small>
</div>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
</div>
<div class="form-group">
<div class="col-sm-2">
<label class="control-label" for="pwd">Password:</label><br />
<small class="text-muted">Must be at least 200</small>
</div>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox" name="remember"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
Open in Full page to see the actual result
How can I move down the search button at the same level with other textfields?
<form>
<div class="col-md-3 form-group">
<label for="search">Title</label>
<input type="text" name="search" id="search" class="form-control" />
</div>
<div class="col-md-2 form-group">
<label for="created_at_gt">Created at from</label>
<input type="text" name="created_at_gt" id="created_at_gt" class="form-control" />
</div>
<div class="col-md-2 form-group">
<label for="created_at_lt">To</label>
<input type="text" name="created_at_lt" id="created_at_lt" class="form-control" />
</div>
<div class="row align-center">
<input type="submit" value="search" class="btn btn-primary" />
</div>
</form>
An easy way to fix is to add same structure as other input fields (also avoid to add additional CSS which may not cover all cases), for the label, use as a placeholder.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<br><br><br><br><br><!-- ignore those br, just for stackoverflow full page view -->
<form>
<div class="col-md-3 form-group">
<label for="search">Title</label>
<input type="text" name="search" id="search" class="form-control" />
</div>
<div class="col-md-2 form-group">
<label for="created_at_gt">Created at from</label>
<input type="text" name="created_at_gt" id="created_at_gt" class="form-control" />
</div>
<div class="col-md-2 form-group">
<label for="created_at_lt">To</label>
<input type="text" name="created_at_lt" id="created_at_lt" class="form-control" />
</div>
<div class="col-md-1 form-group align-center">
<label for="created_at_lt"> </label>
<input type="submit" value="search" class="btn btn-primary form-control" />
</div>
</form>
Another simple way would be to add the height of the label as a margin.
Make sure you go into fullpage view of the snippet to see the proper result:
.lowered {
margin-top: 25px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<br><br><br><br><br><!-- ignore those br, just for stackoverflow full page view -->
<form>
<div class="col-md-3 form-group">
<label for="search">Title</label>
<input type="text" name="search" id="search" class="form-control" />
</div>
<div class="col-md-2 form-group">
<label for="created_at_gt">Created at from</label>
<input type="text" name="created_at_gt" id="created_at_gt" class="form-control" />
</div>
<div class="col-md-2 form-group">
<label for="created_at_lt">To</label>
<input type="text" name="created_at_lt" id="created_at_lt" class="form-control" />
</div>
<div class="col-md-2 form-group align-center">
<input type="submit" value="search" class="btn btn-primary form-control lowered" />
</div>
</form>
Try using br tag at end of label tag
<div class="row">
<div class="col-md-6">
<label for="search">Title</label><br>
<input type="text" name="search" id="search" class="form-control" />
</div>
<div class="col-md-6">
<label for="year">Year</label><br>
<input type="text" name="year" id="year" class="form-control" />
</div>
</div>
How to make multiple text fields in the same line.
This is my code:
<div class="col-lg-2">
<div class="form-group">
<label>Working experience</label>
<input type="text" class="form-control " placeholder="Year"/>Year
<input type="text" class="form-control " placeholder="Month"/>Month
<input type="text" class="form-control " placeholder="Day" />Day
</div>
</div>
It's by default. input is inline element.
<div class="col-lg-2">
<div class="form-group">
<label>Working experience</label>
<input type="text" class="form-control " placeholder="Year" />Year
<input type="text" class="form-control " placeholder="Month" />Month
<input type="text" class="form-control " placeholder="Day"
Day
</div>
</div>
In bootstrap you can put all of the fields that you want on a single line within a single form-group
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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>
It seems, you are using Bootstrap, if yes, then;
Add class .form-inline to the <form> element.
else, Add these css properties to <form>,
display: inline-block;
width: auto;
You can try this way too.
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="col-lg-2">
<div class="form-group" >
<label style="width:25%; float:left;">Working experience</label>
<div style="width:25%; float:left;">
<input type="text" class="form-control " placeholder="Year"/>Year
</div>
<div style="width:25%; float:left;">
<input type="text" class="form-control " placeholder="Month"/>Month
</div>
<div style="width:25%; float:left;">
<input type="text" class="form-control " placeholder="Day"/>Day
</div>
</div>
</div>
</body>
</html>
Use Bootstrap:
<form class="form-inline" action="/action_page.php">
<label>Working experience : </label>
<div class="form-group">
<input type="text" class="form-control" id="year" placeholder="Year" name="year">
</div>
<div class="form-group">
<input type="text" class="form-control" id="month" placeholder="Month" name="month">
</div>
<div class="form-group">
<input type="text" class="form-control" id="day" placeholder="Day" name="day">
</div>
</form>
You could use inline form class.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<form class="form-inline">
<div class="form-group">
<label>Working experience</label>
<input type="text" class="form-control" placeholder="Year">
<input type="text" class="form-control" placeholder="Month">
<input type="text" class="form-control " placeholder="Day">
</div>
</form>
Use Expand snippet to see actual result.
I'm a bit of a novice when it comes to Bootstrap and I'm struggling to get some form fields to conform to my desired layout. My sample snippet of HTML code is here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Registration</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
<body>
<form id="frmRegister" class="form-horizontal">
<div id="divContainer" class="container-fluid" style="width: 90%">
<h2 id="h2Registration" style="background-color: #F76803; color: white; margin: 3px 3px 3px 3px"></h2>
<div id="divChild1">
<div class="form-group">
<label for="txtChildLastName1" class="control-label col-xs-1">Last Name *</label>
<div class="col-xs-3">
<input type="text" class="form-control" id="txtChildLastName1" maxlength="25" />
</div>
<label for="txtChildFirstName1" class="control-label col-xs-1">First Name *</label>
<div class="col-xs-3">
<input type="text" class="form-control" id="txtChildFirstName1" maxlength="25" />
</div>
<label for="txtChildMiddleInit1" class="control-label col-xs-1">Initial</label>
<div class="col-xs-1">
<input type="text" class="form-control" id="txtChildMiddleInit1" maxlength="1" />
</div>
<label for="txtChildSuffix1" class="control-label col-xs-1">Suffix</label>
<div class="col-xs-1">
<input type="text" class="form-control" id="txtChildSuffix1" maxlength="5" />
</div>
</div>
<div class="form-group">
<label for="groupGender" class="control-label col-xs-1">Gender *</label>
<div class="col-xs-2">
<label class="radio-inline">
<input type="radio" name="groupGender1" id="rbGenderMale1" value="M" />Male
</label>
<label class="radio-inline">
<input type="radio" name="groupGender1" id="rbGenderFemale1" value="F" />Female
</label>
</div>
<label for="txtChildDOB1" class="control-label col-xs-1">DOB *</label>
<div class="col-xs-1">
<input type="date" class="form-control dateTextBox" style="position: absolute; z-index: 999" id="txtChildDOB1" name="txtChildDOB1" value="" />
</div>
<label for="txtDoctorName1" class="control-label col-xs-1">Doctor Name</label>
<div class="col-xs-3">
<input type="text" class="form-control" id="txtDoctorName1" maxlength="50" />
</div>
<label for="txtDoctorPhone1" class="control-label col-xs-1">Doctor Phone</label>
<div class="col-xs-2">
<input type="text" class="form-control" id="txtDoctorPhone1" maxlength="50" />
</div>
</div>
<div class="form-group">
<label for="txtAthleteDues1" class="control-label col-xs-1">Registration Fee</label>
<div class="col-xs-1 input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="txtAthleteDues1" placeholder="85" maxlength="2" />
</div>
<label for="txtUniform1" class="control-label col-xs-1">Uniform</label>
<div class="col-xs-2">
<input type="text" class="form-control" id="txtUniform1" maxlength="50" placeholder="Estimate size, if needed" />
</div>
<label for="txtUniformFee1" class="control-label col-xs-1">Uniform Fee</label>
<div class="col-xs-1 input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="txtUniformFee1" placeholder="80" maxlength="2" />
</div>
</div>
<div class="form-group">
<label for="txtAthleteFees1" class="control-label col-xs-1">Athlete Fees</label>
<div class="col-xs-11">
<input type="text" class="form-control" id="txtAthleteFees1" disabled="disabled" value="Some descriptive text goes here" />
</div>
</div>
</div>
</div>
</form>
</body>
</html>
The culprit appears to be my use of the input-group/input-group-addon classes which prepend the field with the dollar sign (Registration Fee). The result is that the subsequent fields for Uniform and Uniform Fee wrap to the next row rather than appearing inline on the same row with Registration Fee. The first two rows, which don't use input-group/input-group-addon do not have this problem.
Instead of using col-* and input group together, put the input-group inside the col-* like this..
<div class="col-xs-1">
<div class="input-group">
<div class="input-group-addon"> .. </div>
http://www.bootply.com/g6rtaYL4fy