Using Bootstrap 3 forms. In a normal Bootstrap form with field labels on top on input fields (no form-inline, no form-horizontal) I want to be able to display a flexible number of controls in the same row. For example:
4 controls on a full width screen
2 controls on a medium size screen
1 control on small screens
To get this we can use a Bootstrap row to group all four controls and appropiate col-xx-x classes for each control. See code below.
The problem with this layout is that when the controls are displayed stacked (more than one row) and the help-block used to display errors in controls is displayed the layout of the control just below the help text is pushed one position to the right. The reason for this is that those controls share the same row and the extra height added by the help message fills one space in the lower row. See the example provided.
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<form>
<div class="row">
<div class="form-group col-xs-6 col-md-4 col-lg-3">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
<span id="errorMessage" class="help-block" style="display: none">This is the error message</span>
</div>
<div class="form-group col-xs-6 col-md-4 col-lg-3">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group col-xs-6 col-md-4 col-lg-3">
<label for="other">Other</label>
<input type="text" class="form-control" id="exampleInputPassword1" placeholder="Other">
</div>
</div>
</form>
<button class="btn btn-default" onclick="function showError() {document.getElementById('errorMessage').style.display = 'inline'};showError();">
Show error message in email control
</button>
</div>
</body>
</html>
I have experimented with form-inline forms, but then the help text is displayed on the right side of the control instead of below.
I hope this is what you are looking for...
.no-padding {
padding-left: 0 !important;
padding-right: 0 !important;
}
.no-right-margin {
margin-right: 0 !important;
}
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<form>
<div class="row">
<div class="form-group col-xs-6 col-md-4 col-lg-3">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
<span id="errorMessage" class="help-text" style="display: none">This is the error message</span>
</div>
<div class="form-group col-xs-6 col-md-4 col-lg-3">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
</div>
<div class="col-xs-6 col-md-4 col-lg-3 no-padding">
<div class="row no-right-margin">
<div class="form-group col-xs-12 col-md-12 col-lg-12">
<label for="other">Other</label>
<input type="text" class="form-control" id="exampleInputPassword1" placeholder="Other">
</div>
</div>
</div>
</form>
<button class="btn btn-default" onclick="function showError() {document.getElementById('errorMessage').style.display = 'inline'};showError();">
Show error message in email control
</button>
</div>
</body>
</html>
I ran into this same issue and went with the absolute positioning you hinted at. Here is my bootstrap override
.form-group {
position: relative;
.help-block { position: absolute; right: 2rem; bottom: -3rem }
}
I put it the right so when the field are stacked it doesn't clutter with the label.
I haven't determined the full consequences of this in all contexts but for the issue at hand it seems to work well. Future pages may make me tweak the values for one reason or another.
Related
I want to center the .input-group inside a <div>. When I use the class center-block, the <span> takes the full width and pushes down the input field below it. I want to center them together.
<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
<div class="input-group input-group-lg inv-amount-block">
<span class="input-group-addon" id="inv-rs">Rs</span>
<input type="text" class="form-control" placeholder="Your Amount" aria-describedby="basic-addon1">
</div>
</div>
I want to center them together like how they are by default.
Here is the fiddle
Just change the display property in the CSS for the .center-block
Edited: Difference between display: block and display: table is that - . display: block - will extend to 100% of the available space, while display: table - will only be as wide as its contents.
So in the latter case your span and input field would only be as wide as its content and won't take up the entire 40% width that is specified.
.center-block {
display: table; /* Instead of display:block */
margin-left: auto;
margin-right: auto;
}
<div class = "col-lg-12 col-sm-12 col-md-12 col-xs-12 ">
<div class="input-group input-group-lg inv-amount-block center-block ">
<span class="input-group-addon " id="inv-rs">Rs</span>
<input type="text" class="form-control" placeholder="Your Amount" aria-describedby="basic-addon1">
</div>
</div><br>
<div class = "col-lg-12 col-sm-12 col-md-12 col-xs-12 ">
<div class="input-group input-group-lg inv-amount-block ">
<span class="input-group-addon " id="inv-rs">Rs</span>
<input type="text" class="form-control" placeholder="Your Amount" aria-describedby="basic-addon1">
</div>
</div>
In Bootstrap 4, center-block has been replaced by mx-auto, and input-group has changed to display:flex. Here's how to center in Bootstrap 4...
<div class="col-12">
<div class="input-group input-group-lg w-25 mx-auto">
<div class="input-group-prepend">
<span class="input-group-text">Rs</span>
</div>
<input type="text" class="form-control" placeholder="Your Amount">
</div>
</div>
Remember that input-group will fill the width of the parent, so in this case I added w-25 (width:25%) to demonstrate the centering.
Demo on Codeply
Copy below code and paste in your file and run check this input box is align center and responsive also.
This example is based in bootstrap v3.4
<!DOCTYPE html>
<html>
<head>
<title>Center Input box demo</title>
<link href="https://getbootstrap.com/docs/3.4/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<form class="row" action="" method="post" id="search_project_form">
<div class="col-md-4 col-sm-2 col-sm-offset-4 col-xs-offset-2">
<input type="text" name="search_group" id="search_group" class="form-control" placeholder="Group Number" required>
</div>
<button type="submit" class="btn btn-primary">Download Data</button>
</form>
</div>
</body>
</html>
Use display: grid for input-group-text element.
<div class="input-group">
<div class="form-floating" style="width: 85%;">
<input type="text" class="form-control" id="abc" placeholder="Description">
<label for="abc">Description</label>
</div>
<div class="input-group-text" style="display: grid; width: 15%;">Hello</div>
</div>
I want a form in Bootstrap that renders two text fields on the same line, with text following each input:
Label 1A Input 1A Text 1A Label 1B Input 1B Text 1B
Label 2A Input 2A Text 2A Label 2B Input 2B Text 2B
Basically, the two inputs on the same line are related, so I want them next to each other. I've sort of accomplished that using this markup:
<form class="inline-form">
<div class="col-sm-8">
<div class="form-group">
<label for="input1" class="control-label">ABCDEFG</label>
<input type="text" name="input1" id="input1"> units
<label for="input1_max" class="control-label"></label>
<input type="text" name="input1_max" id="input1_max"> units
</div>
<div class="form-group">
<label for="input2" class="control-label">ABCD</label>
<input type="text" name="input2" id="input2"> units
<label for="input2_max" class="control-label"></label>
<input type="text" name="input2_max" id="input2_max"> units
</div>
</div>
</form>
Also see this fiddle. If you widen the HTML output you should see the effect I'm describing.
The problem with this is the form fields are not aligned, and the layout gets really screwy for small screen sizes.
First and foremost, I'd like the fields to all align nicely when viewed in a standard desktop browser. I've tried various classes with no success.
But if there's a better way to do this, I'd love to hear that too.
Thank you for any and all help!
If I understand what you want it will work.
Try this approach:
The idea is playing with the grid, dividing each row (using grid´s bootstrap) and inside of each row, dividing again as you need.
It should be enough, but if you have any problem, you can add pull-right and pull-left class where you need it. These classes set to left or right inside a column of grid´s bootstrap.
Besides, you can add this style or class for being secure you are not overlapping layers/div.
white-space : nowrap;
<form class="form-inline" role="form">
<div class="form-group col-lg-6 col-md-6 col-xs-6">
<div class="form-group col-lg-8 col-md-8 col-xs-8">
<label for="input1" class="control-label first-label pull-left">ABCDEFG</label>
<input type="text" name="input1" id="input1" class="pull-right"> units
</div>
<div class="form-group col-lg-4 col-md-4 col-xs-4">
<label for="input1_max" class="control-label"></label>
<input type="text" name="input1_max" id="input1_max" class="pull-right"> units
</div>
</div>
<div class="form-group col-lg-6 col-md-6 col-xs-6 pull-right">
<!-- REPEAT THE SAME IDEA -->
</div>
</form>
With this code, you have one row with 2 parts with the same size. Inside the first part you have two part as well, one of them double than the other one. Inside of these part, you have a label at the left(pull-left) and it input at thee right(pull-right).
If you have any doubt, please let me know.
Cheers mate
<style>
label { width: 12%; }
</style>
<form class="inline-form">
<div class="col-sm-8">
<div class="form-group">
<label for="input1" class="control-label">ABCDEFG</label>
<input type="text" name="input1" id="input1"> units
<input type="text" name="input1_max" id="input1_max"> units
</div>
<div class="form-group">
<label for="input2" class="control-label">ABCD</label>
<input type="text" name="input2" id="input2"> units
<input type="text" name="input2_max" id="input2_max"> units
</div>
</div>
</form>
To align them input boxes you need to set equal width on the labels. As the labels are inline element, while your labels got different texts their sizes will be different so the following boxes will be just right after it.
For the above example you can have this following
label{
width: 80px;
}
But the above css will widen the width of the text "units" to solve this you may update your markup a bit by assigning class to the not equal labels & then declaring width on them like the follwoing
<form class="inline-form">
<div class="col-sm-8">
<div class="form-group">
<label for="input1" class="control-label first-label">ABCDEFG</label>
<input type="text" name="input1" id="input1"> units
<label for="input1_max" class="control-label"></label>
<input type="text" name="input1_max" id="input1_max"> units
</div>
<div class="form-group">
<label for="input2" class="control-label first-label">ABCD</label>
<input type="text" name="input2" id="input2"> units
<label for="input2_max" class="control-label"></label>
<input type="text" name="input2_max" id="input2_max"> units
</div>
</div>
</form>
And assigning width to the class
.first-label{
width: 80px;
}
There is one more solution without the markup change
.form-group label:first-of-type{
width: 80px;
}
Need to add a fixed width for your control-label
.control-label {
width: 15%;
text-align: center;
}
<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>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="inline-form">
<div class="col-sm-8">
<div class="form-group">
<label for="input1" class="control-label">Label 1A</label>
<input type="text" name="input1" id="input1">units
<label for="input1_max" class="control-label">Label 1B</label>
<input type="text" name="input1_max" id="input1_max">units
</div>
<div class="form-group">
<label for="input2" class="control-label">Label 2A</label>
<input type="text" name="input2" id="input2">units
<label for="input2_max" class="control-label">Label 2B</label>
<input type="text" name="input2_max" id="input2_max">units
</div>
</div>
</form>
try this code it may solve your problem.you need to define cols inside row .so in this i define 2 row and each of them have 4 column for mobile as well as desktop.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form class="inline-form">
<div class="form-group">
<div class="row">
<div class="col-md-3 col-xs-3 ">
<label for="input1" class="control-label">ABCDE35</label>
</div>
<div class="col-md-3 col-xs-3 ">
<input type="text" name="input1" id="input1"> units
</div>
<div class="col-md-3 col-xs-3 ">
<label for="input1_max" class="control-label"></label>
</div>
<div class="col-md-3 col-xs-3 ">
<input type="text" name="input1_max" id="input1_max"> units
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-3 col-xs-3 ">
<label for="input2" class="control-label">ABCD</label>
</div>
<div class="col-md-3 col-xs-3 ">
<input type="text" name="input3" id="input3"> units
</div>
<div class="col-md-3 col-xs-3 ">
<label for="input3_max" class="control-label"></label>
</div>
<div class="col-md-3 col-xs-3 ">
<input type="text" name="input3_max" id="input3_max"> units
</div>
</div>
</div>
</form>
</body>
</html>
I'm trying to create a simple form using Bootstrap 3 where people can sign up for a small event.
On this form, they should also be able to indicate if they want one or more T-shirts, and which size(s) they want to order.
I'm not new to HTML, CSS and Javascript, but I am quite new to Bootstrap. Also while I'm a programmer by day, I'm mainly writing REST services so my design skills are fairly limited.
Using w3schools and other tutorial sites I have arrived at this:
<div class="form-group form-group-sm">
<p class="help-block">Please select the number of T-shirts per size you would like to order.</p>
<label class="col-xs-1" for="shirt-s">S</label>
<div class="col-xs-1">
<input class="form-control" type="text" id="shirt-s">
</div>
<label class="col-xs-1" for="shirt-m">M</label>
<div class="col-xs-1">
<input class="form-control" type="text" id="shirt-m">
</div>
<label class="col-xs-1" for="shirt-l">L</label>
<div class="col-xs-1">
<input class="form-control" type="text" id="shirt-l">
</div>
<label class="col-xs-1" for="shirt-xl">XL</label>
<div class="col-xs-1">
<input class="form-control" type="text" id="shirt-xl">
</div>
<label class="col-xs-1" for="shirt-xxl">XXL</label>
<div class="col-xs-1">
<input class="form-control" type="text" id="shirt-xxl">
</div>
<div class="col-xs-2"> </div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Submit</button>
</div>
See jsfiddle:
https://jsfiddle.net/tonvanbart/83nbny8h/5/
Not the prettiest in the world, but I can live with it. My main question is: why is the 'submit' button not in it's own row but inlined after the input fields? At first I thought I had to get to a total of 12 columns and I only had 10. But adding a 2-column div with a non-breaking space didn't help, and adding a <br> tag had no effect either.
Also, while I can live with this (it's for an informal, small group of people who know each other well) if anybody could give me a pointer on how to get the T-shirt size indicators closer to their respective input fields, that would be great. Thank you in advance.
Feel free to let me know if you need more information.
Here's the fixed code:
https://jsfiddle.net/ccx9x7om/1/
I added the following CSS
.row .form-group label, .row .form-group input {
display: inline-block;
}
.row .form-group input {
width: 50%;
}
button {
margin: 25px;
}
In order to use bootstrap's columns properly, you need to wrap them in a row, and wrap all rows inside either a .container or a .container-fluid. I moved the labels inside their respective .col-xs-2 then wrapped everything in the needed aforementioned divs.
Another way you could do this is by nesting your columns as to split the form in half which will greatly reduce the screen space it's using and bring your inputs closer while remaining responsive across viewports.
This is simply following the container/row/column layout that Bootstrap generally follows. See Nesting Columns.
*Note: The form-group class isn't necessary, it simply adds padding around your inputs.
See working Snippet at FullPage.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form>
<h2>Order a Shirt</h2>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="name">Name</label>
<input type="password" class="form-control" id="name" placeholder="Your Name">
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Email address (never shown)">
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-xs-4 col-sm-4">
<div class="form-group">
<label for="shirt-s">S</label>
<input class="form-control" type="text" id="shirt-s">
</div>
</div>
<div class="col-xs-4 col-sm-4">
<div class="form-group">
<label for="shirt-m">M</label>
<input class="form-control" type="text" id="shirt-m">
</div>
</div>
<div class="col-xs-4 col-sm-4">
<div class="form-group">
<label for="shirt-l">L</label>
<input class="form-control" type="text" id="shirt-l">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-4">
<div class="form-group">
<label for="shirt-xl">XL</label>
<input class="form-control" type="text" id="shirt-xl">
</div>
</div>
<div class="col-xs-4 col-sm-4">
<div class="form-group">
<label for="shirt-xxl">XXL</label>
<input class="form-control" type="text" id="shirt-xxl">
</div>
</div>
<div class="col-xs-4 col-sm-4">
<div class="form-group">
<label>Order Now</label>
<button type="submit" class="btn btn-success btn-block btn-submit">Submit</button>
</div>
</div>
<div class="col-xs-12">
<p class="help-block">Please select the number of T-shirts per size you would like to order.</p>
</div>
</div>
</div>
</div>
</form>
</div>
After searching everywhere i couldnt see exactly how i can design an inline form that has the following design: (using bootstrap 3 classes instead of css customizations when possible)
When the user has a wide screen:
Form-Legend
LabelFieldA: InputFieldA LabelFieldB: InputFieldB LabelFieldC: InputFieldC <Submit Button>
When the user has a smaller screen:
Form-Legend
LabelFieldA: InputFieldA LabelFieldB: InputFieldB
LabelFieldC: InputFieldC <Submit Button>
The idea is that the design initially puts all the fields in one line and if it doesnt fit the controls would jump to the next line, but maintaining the Label + Field together.
Also if there is a way so the spacing between each Label + Input is greater than the spacing between the Label and its Field.
And lastly if there is a way of having more vertical margin between the Label + Field when it jumps to the next line.
Option #1 : fixed columns
You can use a structure mixing col-xs-12, col-sm-6 and col-lg-3 to get 1, 2 or 4 columns. Inside your form-group, remember to fix label/input sizes with col-xs-4 and col-xs-8 :
<div class="container">
<form class="form form-inline" role="form">
<legend>Form legend</legend>
<div class="form-group col-xs-12 col-sm-6 col-lg-3">
<label for="InputFieldA" class="col-xs-4">Field A</label>
<div class="col-xs-8">
<input type="text" class="form-control" id="InputFieldA" placeholder="InputFieldA">
</div>
</div>
<div class="form-group col-xs-12 col-sm-6 col-lg-3">
<label for="InputFieldB" class="col-xs-4">Field B</label>
<div class="col-xs-8">
<input type="text" class="form-control" id="InputFieldB" placeholder="InputFieldB">
</div>
</div>
<div class="form-group col-xs-12 col-sm-6 col-lg-3">
<label for="InputFieldC" class="col-xs-4">Field C</label>
<div class="col-xs-8">
<input type="text" class="form-control" id="InputFieldC" placeholder="InputFieldC">
</div>
</div>
<div class="form-group col-xs-12 col-sm-6 col-lg-3">
<button type="submit" class="btn btn-default col-xs-8 col-xs-offset-4">Submit Button</button>
</div>
</form>
</div>
You still need a few CSS :
// get a larger input, and align it with submit button
.form-inline .form-group > div.col-xs-8 {
padding-left: 0;
padding-right: 0;
}
// vertical align label
.form-inline label {
line-height: 34px;
}
// force inline control to fit container width
// http://getbootstrap.com/css/#forms-inline
.form-inline .form-control {
width: 100%;
}
// Reset margin-bottom for our multiline form
#media (min-width: 768px) {
.form-inline .form-group {
margin-bottom: 15px;
}
}
You can add as many inputs as you want.
Bootply
Option #2 : fluid columns
To be able to not care of the number of fields per row, you can use this structure :
<div class="container">
<form class="form form-inline form-multiline" role="form">
<legend>Form legend</legend>
<div class="form-group">
<label for="InputFieldA">Field A</label>
<input type="text" class="form-control" id="InputFieldA" placeholder="InputFieldA">
</div>
<div class="form-group">
<label for="InputFieldB">Very Long Label For Field B</label>
<input type="text" class="form-control" id="InputFieldB" placeholder="InputFieldB">
</div>
<div class="form-group">
<label for="InputFieldC">F. C</label>
<input type="text" class="form-control" id="InputFieldC" placeholder="InputFieldC">
</div>
<div class="form-group">
<label for="InputFieldD">Very Long Label For Field D</label>
<input type="text" class="form-control" id="InputFieldD" placeholder="InputFieldD">
</div>
<div class="form-group">
<label for="InputFieldE">Very Long Label For Field E</label>
<input type="text" class="form-control" id="InputFieldE" placeholder="InputFieldE">
</div>
<div class="form-group">
<label for="InputFieldF">Field F</label>
<input type="text" class="form-control" id="InputFieldF" placeholder="InputFieldF">
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Submit Button</button>
</div>
</form>
</div>
And a few CSS lines to fix margins :
.form-multiline .form-group {
margin-bottom: 15px;
margin-right: 30px;
}
.form-multiline label,
.form-multiline .form-control {
margin-right: 15px;
}
Bootply
The same as option #1 from #zessx, but without overriding CSS. This one also aligns labels to the right to increase space between label-control pairs. Class "media" is there to add top margin without creating a custom class, but in general case it is better to have a custom one.
<div class="form-horizontal">
<legend>Form legend</legend>
<div class="media col-xs-12 col-sm-6 col-lg-3">
<label for="InputFieldA" class="control-label text-right col-xs-4">Field A</label>
<div class="input-group col-xs-8">
<input type="text" class="form-control" id="InputFieldA" placeholder="InputFieldA">
</div>
</div>
<div class="media col-xs-12 col-sm-6 col-lg-3">
<label for="InputFieldB" class="control-label text-right col-xs-4">Field B</label>
<div class="input-group col-xs-8">
<input type="text" class="form-control" id="InputFieldB" placeholder="InputFieldB">
</div>
</div>
<div class="media col-xs-12 col-sm-6 col-lg-3">
<label for="InputFieldC" class="control-label text-right col-xs-4">Field C</label>
<div class="input-group col-xs-8">
<input type="text" class="form-control" id="InputFieldC" placeholder="InputFieldC">
</div>
</div>
<div class="media col-xs-12 col-sm-6 col-lg-3">
<button type="submit" class="btn btn-default col-xs-8 col-xs-offset-4">Submit Button</button>
</div>
</div>
Bootply
I would propose something completely different, wrap the labels and fields inside inline divs:
<div style="display:inline-block">
Label:input
</div>
This way, when they are about to break, they break in pairs, labels+inputs.
Alright I played with the grid system and this is as close as I could get to your setup.
<div class="container">
<form role="form" class="form-horizontal">
<div class="form-group col-sm-5">
<label for="inputPassword" class="col-xs-4 control-label">Email</label>
<div class="col-xs-8">
<input type="password" class="form-control" id="inputPassword" placeholder="Password" />
</div>
</div>
<div class="form-group col-sm-5">
<label for="inputPassword" class="col-xs-4 control-label">Password</label>
<div class="col-xs-8">
<input type="password" class="form-control" id="inputPassword" placeholder="Password" />
</div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
This has two fields only. You might want to change the col classes to fit your layout.
jsFiddle
You can try below
Working here- http://www.bootply.com/117807
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-md-4 col-xs-3 col-sm-4"><label>First Name</label></div>
<div class="col-md-8 col-xs-9 col-sm-8"><input type="text"></div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-4 col-xs-3 col-sm-4"><label>Last Name</label></div>
<div class="col-md-8 col-xs-9 col-sm-8"><input type="text"></div>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-4 col-xs-3 col-sm-4"><label>Contact</label></div>
<div class="col-md-8 col-xs-9 col-sm-8"><input type="text"></div>
</div>
</div>
</div>
</div>
The simplest way is to put both label and text input in cols div. Hope this will save time for all others :)
<div class="col-md-3 text-right">
<label>City</label>
</div>
<div class="col-md-3 text-right">
<asp:TextBox data-toggle="tooltip" pbpo-validation-type="required" title="City" runat="server" ID="textbox_city" CssClass="form-control input-sm" ClientIDMode="Static" placeholder=""></asp:TextBox>
</div>
I am having trouble with boostrap 3 causing deactivated/read-only inputs in desktop mode. Once you resize the browser window to a smaller size bootstrap activates the inputs to read-write. I am clueless why, of course they should be activated on all devices. Any help will be appreciated!
I tried having the .form-group arround the .col-sm-x .col-md-x .col-lg-x divs and a few other tweaks, the inputs only enable once they are completely outside of the .col-sm-x .col-md-x .col-lg-x, which destroys the layout. Is there any way of making this layout work in bs3?
Here's a fiddle, problem shows up in Safari, Firefox and Chrome:
http://jsfiddle.net/Au5vM/3/
The form code looks like this, I am not so familiar with bs3 forms and grid, maybe someone might spot the problem:
<form class="form-horizontal" role="form">
<div class="row">
<div class="col-sm-2 col-md-2 col-lg-2">
<div class="form-group">
<label for="inputAcademicTitle">Degree</label>
<input type="text" class="form-control" id="inputAcademicTitle" placeholder="Titel" value="Resizing causes me to disable">
</div>
</div>
<div class="col-sm-1 col-md-1 col-lg-1"></div>
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="form-group">
<label for="inputFirstName">First name</label>
<input type="text" class="form-control" id="firstName" placeholder="Your first name" value="Resizing causes me to disable">
</div>
</div>
<div class="col-sm-1 col-md-1 col-lg-1"></div>
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="form-group">
<label for="inputLastName">Last name</label>
<input type="text" class="form-control" id="lastName" placeholder="Your last name" value="Resizing causes me to disable">
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="form-group">
<label for="inputMotto">Comment</label>
<textarea class="form-control" rows="3" id="motto" placeholder="Your comment">textareas are not affected</textarea>
</div>
</div>
</div>
</div>
</form>
They're not disabled. The problem is that you're nesting class="row". You can verify this by opening your browser's web tools, you'll see that the row containing the textarea overlaps the textboxes.
</div>
<div class="row">
should become
</div>
</div>
<div class="row">
And
</div>
</form>
should become
</form>