I've noticed that when using control group addons with Bootstrap that the total width of the control group is larger than those controls that do not have addons. This width change does not seem to be affected by the number of addons used.
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" />
<div class="container-fluid">
<form role="form" class="form-horizontal">
<div class="form-group">
<label for="inputElementName" class="control-label col-sm-4">Element Name</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="inputElementName" placeholder="Enter name for element" />
</div>
</div>
<div class="form-group">
<label for="inputElementFrequency" class="control-label col-sm-4">Element Frequency</label>
<div class="col-sm-6 input-group"> <span class="input-group-addon">Every</span>
<input type="number" class="form-control" id="inputElementFrequency" placeholder="Enter how often this element appears." /> <span class="input-group-addon">numbers</span>
</div>
</div>
<div class="form-group">
<label for="inputElementData" class="control-label col-sm-4">Element Data</label>
<div class="col-sm-6 input-group">
<input type="number" class="form-control" id="inputElementData" placeholder="Enter this element's data." /> <span class="input-group-addon">Data</span>
</div>
</div>
</form>
</div>
How can I ensure my controls fill the same width, regardless of addons?
The .input-group div should be part of its own element instead of lumped in with .col-xs-6. Remember, an .input-group div is taking the place of an input control. So use them interchangeably.
Instead of this:
<div class="col-sm-6 input-group">
<span class="input-group-addon">Every</span>
<input type="number" class="form-control" />
</div>
Do this:
<div class="col-sm-6 ">
<div class="input-group">
<span class="input-group-addon">Every</span>
<input type="number" class="form-control" />
</div>
</div>
Demo in Stack Snippets
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<form role="form" class="form-horizontal">
<div class="form-group">
<label for="inputElementName" class="control-label col-sm-4">Element Name</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="inputElementName" placeholder="Enter name for element" />
</div>
</div>
<div class="form-group">
<label for="inputElementFrequency" class="control-label col-sm-4">Element Frequency</label>
<div class="col-sm-6 ">
<div class="input-group">
<span class="input-group-addon">Every</span>
<input type="number" class="form-control" id="inputElementFrequency" placeholder="Enter how often this element appears." /> <span class="input-group-addon">numbers</span>
</div>
</div>
</div>
<div class="form-group">
<label for="inputElementData" class="control-label col-sm-4">Element Data</label>
<div class="col-sm-6 ">
<div class="input-group">
<input type="number" class="form-control" id="inputElementData" placeholder="Enter this element's data." /> <span class="input-group-addon">Data</span>
</div>
</div>
</div>
</form>
</div>
Related
I trying to create a horizontal form in bootstrap and have used the code they've given in the documentation. In the example they have given the input boxes fill the entire column space. For some reason this does not happen for me even if I copy the code. How to I get mine to be the same format?
Here is how it looks on the bootstap website
Here is an image of how this looks in my code
Here is my code:
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2>Account Details</h2>
<form action="/account" method="post" class="form-horizontal">
<div class="form-group row">
<label for="height" class="col-sm-2 col-form-label">Height</label>
<div class="col-sm-10">
<input class="form-control" type="number" value="{{ account_details[0].height }}" id="height" name="height" min=0 max=300 step=1>
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
</form>
</div>
</div>
</div>
It happened because of max='300'; when you set max condition for an input, size of that input change to max width that it needs to fill input for max value and because of that width change to a smaller input:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2>Account Details</h2>
<form action="/account" method="post" class="form-horizontal">
<div class="form-group row">
<label for="height" class="col-sm-2 col-form-label">Height</label>
<div class="col-sm-10">
<input class="form-control" type="number" id="heightname="height" min=0 step=1>
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
The result with this should be like :
Thanks for the help, found bootstrap was interacting with something in my css page
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.
I want this kind of a setup as in the below screenshot.
But currently with the code that I have written, I am getting the below output. I tried various options but unable to get the same output as above.
My current HTML Code:
<form role="form" class="form-horizontal">
<div class="form-group">
<label style="" for="inputPackageName" class="col-sm-2 control-label">Package Name
</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inputPackageName" placeholder="Package Name">
</div>
<label style="" for="inputApplicationName" class="col-sm-2 control-label">Application
Name</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inputApplicationName"
placeholder="Package Name">
</div>
</div>
</form>
Any idea as to how to get the required layout as in screenshot. Also how to utilize the white space effectively. i.e. Some labels might require more space, some might require less space. How to have the consistency in bootstrap?
Just don't give the class col-sm-2 (in your case) to the labels.
Try to use this layout for the input fields:
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>...</label>
<input class="form-control" .../>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>...</label>
<input class="form-control" .../>
</div>
</div>
This will render a row with 2 columns. To add more rows just copy the layout
Try this:
`.
< div class="col-sm-6">
...
< div class="col-sm-6">
...
<div class="col-md-12">
< div class="col-sm-6">
<div class="form-group">
<label>...</label>
<input class="form-control" .../>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>...</label>
<input class="form-control" .../>
</div>
</div>
</div>
<div class="col-md-12">
< div class="col-md-12">
<div class="form-group">
<label>...</label>
<input class="form-control" .../>
</div>
</div>
</div>
`
This should give you what you want (as long as you don't have other CSS rules that could override Bootstrap):
<form class="form-horizontal">
<div class="form-group">
<label for="inputProjectId" class="col-sm-2 control-label">Project ID</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inputProjectId" placeholder="Project ID">
</div>
<label for="inputProjectName" class="col-sm-2 control-label">Project Name</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inputProjectName" placeholder="Project Name">
</div>
</div>
<div class="form-group">
<label for="inputReleaseDate" class="col-sm-2 control-label">Release Date</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inputReleaseDate" placeholder="Release Date (mm/dd/yyyy)">
</div>
<label for="inputSupervisor" class="col-sm-2 control-label">Supervisor</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inputSupervisor" placeholder="Supervisor">
</div>
</div>
<div class="form-group">
<label for="inputProjectDescriptiond" class="col-sm-2 control-label">Project Description</label>
<div class="col-sm-10">
<textarea class="form-control" id="inputProjectDescriptiond" rows="3" placeholder="Enter Project Description"></textarea>
</div>
</div>
</form>
Just paste this code:
<form role="form" class="form-horizontal">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="inputProjectID" class="col-sm-4 control-label">Project ID</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputProjectID" placeholder="Project ID">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputProjectName" class="col-sm-4 control-label">Project Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputProjectName"
placeholder="Project Name">
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="inputReleaseDate" class="col-sm-4 control-label">Release Date</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputReleaseDate" placeholder="Release Date (mm/dd/yyyy)">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputSupervisor" class="col-sm-4 control-label">Supervisor</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputSupervisor" placeholder="Supervisor">
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label for="inputProjectDescription" class="col-sm-2 control-label">Project Description</label>
<div class="col-sm-10">
<textarea class="form-control" id="inputProjectDescription" rows="3" placeholder="Enter Project Description"></textarea>
</div>
</div>
</div>
</form>
Hope this will help you!!
Finally got a better & easy implementation the same way I wanted.Below is the code!
<form class="form-horizontal" id="main-form" role="form" data- toggle="validator" action="blank.html" method="post">
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label" for="inputProjectID">Project ID </label>
<div class="col-md-3 col-3-input">
<input id="inputProjectID" name="inputProjectID" type="text" placeholder="Your Project ID" class="form-control input-md">
</div>
<label class="col-md-2 control-label" for="inputProjectName">Project Name </label>
<div class="col-md-3 col-3-input">
<input id="inputProjectName" name="inputProjectName" type="text" placeholder="Your Project Name" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<div class="group">
<label class="col-md-2 control-label" for="datepicker">Release Date </label>
<div class="col-md-3 col-3-input">
<input id="datepicker" name="inputReleaseDate" type="text" placeholder="Select Release Date" class="form-control input-md">
</div>
</div>
<div class="group">
<label class="col-md-2 control-label" for="inputSupervisor">Supervisor </label>
<div class="col-md-3 col-3-input">
<input id="textinput" name="textinput" type="text" placeholder="Your Supervisor's Name" class="form-control input-md">
</div>
</div>
</div>
<!-- Text area -->
<div class="form-group">
<label class="col-md-2 control-label" for="inputProjectDesc">Project Description </label>
<div class="col-md-9 col-9-input">
<textarea style="resize: none;" rows="3" class="form-control" id="inputProjectDesc" name="inputProjectDesc" placeholder="Your Project Description"></textarea>
</div>
</div>
</form>
I am having a hard time figuring out how to figure out how to make my contact form-control match the edge of my Work form-control. I'm still new with Bootstrap and not sure what I am doing wrong or how to fix the issue. I need my Contact and Email form-control to go all the way to the edge of my Work form-control.
Here is a screen to better explain. As you can see my layout is off in the Contact fieldset
Here is my markup
<div class="col-md-12">
<div class="col-lg-6">
<form>
<fieldset>
<legend>Add Customer</legend>
<div class="form-horizontal">
<div class="container col-md-12">
<div class="form-group">
<label for="txtCustomer" class="control-label col-md-2">Customer</label>
<div class="col-md-10">
<input id="txtCustomer" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="txtAddress1" class="control-label col-md-2">Address</label>
<div class="col-md-10">
<input id="txtAddress1" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="txtAddress2" class="control-label col-md-2">Address2</label>
<div class="col-md-10">
<input id="txtAddress2" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="txtCity" class="control-label col-md-2">City</label>
<div class="col-md-10">
<input id="txtCity" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="txtState" class="control-label col-md-2">State</label>
<div class="col-md-2">
<input id="txtState" type="text" class="form-control" />
</div>
<label for="txtZip" class="control-label col-md-2">Zip/Postal</label>
<div class="col-md-3">
<input id="txtZip" type="text" class="form-control" />
</div>
</div>
</div>
</div>
</fieldset>
</form>
</div>
<div class="col-lg-6">
<div class="form-horizontal">
<div class="container col-md-12">
<form>
<fieldset>
<legend>Contact</legend>
<div class="form-group">
<label for="txtContactName" class="control-label col-md-2">Contact</label>
<div class="col-md-10 RemovingPadding">
<input id="txtContactName" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="txtEmail" class="control-label col-md-2">Email</label>
<div class="col-md-10">
<input id="txtEmail" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="txtPhone" class="control-label col-md-2">Phone</label>
<div class="col-md-4">
<input id="txtPhone" type="text" class="form-control" />
</div>
<label for="txtWork" class="control-label col-md-2">Work</label>
<div class="col-md-4">
<input id="txtWork" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="txtMobile" class="control-label col-md-2">Mobile</label>
<div class="col-md-4">
<input id="txtMobile" type="text" class="form-control" />
</div>
<label for="txtFax" class="control-label col-md-2">Fax</label>
<div class="col-md-4">
<input id="txtFax" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="txtOther" class="control-label col-md-2">Other</label>
<div class="col-md-4">
<input id="txtOther" type="text" class="form-control" />
</div>
<label for="txtOther2" class="control-label col-md-2">Other 2</label>
<div class="col-md-4">
<input id="txtOther2" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="txtOther3" class="control-label col-md-2">Other 3</label>
<div class="col-md-4">
<input id="txtOther3" type="text" class="form-control" />
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
I want to build a form in Bootstrap 3 like this:
My site (not the above link) just updates from Bootstrap 2.3.2 and the format is not correct anymore.
I cannot find any doc about this type of form on getbootstrap.com.
Could anyone tell me how to do this? Only 'Username' would be OK.
Thanks.
PS There is a similar question but it's using Bootstrap 2.3.2.
I have created a demo for you.
Here is how your nested structure should be in Bootstrap 3:
<div class="form-group">
<label for="birthday" class="col-xs-2 control-label">Birthday</label>
<div class="col-xs-10">
<div class="form-inline">
<div class="form-group">
<input type="text" class="form-control" placeholder="year"/>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="month"/>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="day"/>
</div>
</div>
</div>
</div>
Notice how the whole form-inline is nested within the col-xs-10 div containing the control of the horizontal form. In other terms, the whole form-inline is the "control" of the birthday label in the main horizontal form.
Note that you will encounter a left and right margin problem by nesting the inline form within the horizontal form. To fix this, add this to your css:
.form-inline .form-group{
margin-left: 0;
margin-right: 0;
}
Another option is to put all of the fields that you want on a single line within a single form-group.
See demo here
<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>
</form>
This Bootply example seems like a much better option. Only thing is that the labels are a little too high so I added padding-top:5px to center them with my inputs.
<div class="container">
<h2>Bootstrap Mixed Form <p class="lead">with horizontal and inline fields</p></h2>
<form role="form" class="form-horizontal">
<div class="form-group">
<label class="col-sm-1" for="inputEmail1">Email</label>
<div class="col-sm-5"><input type="email" class="form-control" id="inputEmail1" placeholder="Email"></div>
</div>
<div class="form-group">
<label class="col-sm-1" for="inputPassword1">Password</label>
<div class="col-sm-5"><input type="password" class="form-control" id="inputPassword1" placeholder="Password"></div>
</div>
<div class="form-group">
<label class="col-sm-12" for="TextArea">Textarea</label>
<div class="col-sm-6"><textarea class="form-control" id="TextArea"></textarea></div>
</div>
<div class="form-group">
<div class="col-sm-3"><label>First name</label><input type="text" class="form-control" placeholder="First"></div>
<div class="col-sm-3"><label>Last name</label><input type="text" class="form-control" placeholder="Last"></div>
</div>
<div class="form-group">
<label class="col-sm-12">Phone number</label>
<div class="col-sm-1"><input type="text" class="form-control" placeholder="000"><div class="help">area</div></div>
<div class="col-sm-1"><input type="text" class="form-control" placeholder="000"><div class="help">local</div></div>
<div class="col-sm-2"><input type="text" class="form-control" placeholder="1111"><div class="help">number</div></div>
<div class="col-sm-2"><input type="text" class="form-control" placeholder="123"><div class="help">ext</div></div>
</div>
<div class="form-group">
<label class="col-sm-1">Options</label>
<div class="col-sm-2"><input type="text" class="form-control" placeholder="Option 1"></div>
<div class="col-sm-3"><input type="text" class="form-control" placeholder="Option 2"></div>
</div>
<div class="form-group">
<div class="col-sm-6">
<button type="submit" class="btn btn-info pull-right">Submit</button>
</div>
</div>
</form>
<hr>
</div>
To make it work in Chrome (and bootply) i had to change code in this way:
<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-2 control-label">Birthday</label>
<div class="col-xs-10">
<div class="form-inline">
<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>
</div>
</div>
</form>
A much simpler solution, without all the inside form-group elements
<div class="form-group">
<label for="birthday" class="col-xs-2 control-label">Birthday</label>
<div class="col-xs-10">
<div class="form-inline">
<input type="text" class="form-control" placeholder="year" style="width:70px;"/>
<input type="text" class="form-control" placeholder="month" style="width:80px;"/>
<input type="text" class="form-control" placeholder="day" style="width:100px;"/>
</div>
</div>
</div>
... and it will look like this,
Cheers!
I had problems aligning the label to the input(s) elements so I transferred the label element inside the form-inline and form-group too...and it works..
<div class="form-group">
<div class="col-xs-10">
<div class="form-inline">
<div class="form-group">
<label for="birthday" class="col-xs-2 control-label">Birthday:</label>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="year"/>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="month"/>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="day"/>
</div>
</div>
</div>
</div>