I'm using Bootstrap 3.3.7. I have a horizontal form with a label-less checkbox, like this:
<div class="container-fluid" style="max-width:600px">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="field1">Field 1:</label>
<div class="col-sm-8">
<input class="form-control" type="text" id="field1"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="field2">Field 2:</label>
<div class="col-sm-8">
<input class="form-control" type="text" id="field2"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="field3">Field 3:</label>
<div class="col-sm-8">
<!-- HERE IS THE CHECKBOX: -->
<input class="form-control" type="checkbox" id="field3"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<button class="btn btn-default btn-primary" type="submit">Apply Changes</button>
</div>
</div>
</form>
</div>
I've created a Bootply demo here.
The problem is the checkbox is centered. I wanted it to be left aligned, so the left edge is aligned with the left edge of the text inputs above it.
How do I do that?
I have tried:
Adding class text-left to the div that contains the checkbox (result: no effect).
Removing the grid width specifiers from the checkbox div (result: it just ends up on the next line).
Enclosing the checkbox input in a label tag, a wild guess after reading this post (result: it disappears).
Random hand-wavey rearrangements of divs (result: spirit crushed, git checkout to revert changes).
I'm out of ideas.
Can you add a class to the checkbox? Try this:
<input class="form-control move-left" type="checkbox" id="field3">
.move-left {
width: auto;
box-shadow: none;
}
Demo: http://www.bootply.com/At8YVfnm5F
Updated as per gyre's comment.
You can change the width initial or auto for the input id LiveOnBootplay
input#field3 {
width: auto;
}
Try changing the class of the div enclosing your checkbox from col-sm-8 to col-sm-1 and then added a class of checkbox-inline to your input element.
Demo: http://www.bootply.com/kjF1gVtWDC
<div class="col-sm-1">
<!-- HERE IS THE CHECKBOX: -->
<input class="form-control checkbox-inline" type="checkbox" id="field3" />
</div>
Related
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.
I need to add an "inline" control inside a form-group class in TB3 but I am not able to do it. This is what I've tried without success meaning it does not work as I want:
<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" />
<div class="container">
<div class="row">
<div class="col-md-12">
<form id="new_question" method="POST" class="form-vertical" role="form">
<div class="form-group">
<label for="field_type_id">Select a Question Type</label>
<select class="form-control" id="field_type_id" name="field_type_id">
<option value="">Select One</option>
</select>
</div>
<div class="form-group">
<label for="field_name">Question Text</label>
<textarea class="form-control" name="field_name" id="field_name" rows="4"></textarea>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Option 1</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="checkbox">
<label>
<input type="checkbox" value=""> Checkbox
</label>
</div>
</form>
</div>
</div>
</div>
From the snippet/example above I would expect:
Keep the first and second element as it's: the label on the top then the HTML element
Make an inline version of the third element: first have the option, then the HTML, then the checkbox which mean everything in one line.
The idea is to have something like:
Label1 Input1 Checkbox1
Label2 Input2 Checkbox2
Does any knows how to achieve this? It has to be done only in a certain lines so the rest of the form behaves as the form basic example.
For example, you might want to use columns from the Grid system:
<form role="form">
<div class="form-group col-sm-2">
<label>Some label</label>
</div>
<div class="form-group col-sm-2">
<label>E-mail</label>
<input type="email" class="form-control">
</div>
<div class="form-group col-sm-2">
<div class="checkbox">
<label>
<input type="checkbox" class="form-check-input"> Check me out
</label>
</div>
</div>
</form>
The above example creates 3 equal-width columns using predefined grid class col-sm-2
Create a
Give it a class of Flex
Set the width
<div class='flex'>
<div> item1</div>
<div> item2</div>
<div> item3</div>
</div>
<div class='flex'>
<div> item4</div>
<div> item5</div>
<div> item6</div>
</div>
.flex {
display:flex;
justify-content:center;
align-items: center;
}
https://codepen.io/Codokk101/pen/goQNOW
I've defined a number of Bootstrap elements and want to position each label and input set in a stacked layout. At the moment the layout positioning forces the label to be positioned left of the corresponding control when the browser in maximized.
In order to re-position to a stacked layout I tried placing the label inside the same div as the input. I also tried setting the col-xs-1 property on the parent div mentioned here or increasing the col size which only pushes the label right covering the input instead of on top.
So the layout at present looks like this where my label is left aligned to the input:
Instead I'm aiming to position like this:
The window does resize to stack the labels when I reduce the size of my browser window, but when it's maximized the labels appear alongside.
Question:
Can someone explain how to stack sets of label and input controls in Bootstrap 3?
Sample of my layout:
<div class="container body-content">
<div class="page-header">
<div class="form-group">
<fieldset>
<form action="" id="createForm" class=
"form-group has-feedback" method="post">
<div class="form-horizontal">
<div class="col-lg-12">
<div class="form-group">
<label class="col-md-1 control-label" for=
"Application">Application</label>
<div class="col-md-4">
<input id="ApplicationID" name="Application"
required="required" type="text" class=
"form-control" />
</div>
</div>
<div class="form-group">
<label class="col-md-1 control-label" for=
"EscID">EM</label>
<div class="col-md-4">
<input id="EscID" name="EM" type="text"
placeholder="(If Applicable)" class=
"form-control" />
</div>
</div>
</div>
</div>
</form><!--END OF FORM ^^-->
</fieldset>
</div>
</div>
</div>
The reason here is you have parent column of 12( col-lg-12 - right inside .form-horizontal) grid. Now the child columns you have is col-md-1 (for label) and col-md-4(for input). So they are suppose to be in same parent row having column size of 12(col-lg-12).
What you could do is as following:
Give the label column of 9 and input column of 4(as it is). So in sum it exceeds 12. Which forces input to bring down(stacked as you want).
But in giving label column of 9 your text would appear on right(far far away...), so don't forget to add CSS: text-align:left; to .control-label. Also this class .control-label must be selected by parent, so it won't effect any other similar class in your document.
UPDATE: Scenario -
Image 1:
Image 2:
Image 3:
.control-label { text-align: left !important; }
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container body-content">
<div class="page-header">
<div class="form-group">
<fieldset>
<form action="" id="createForm" class="form-group has-feedback" method="post">
<div class="form-horizontal">
<div class="col-lg-12">
<div class="form-group">
<label class="col-md-9 control-label" for="Application">Application</label>
<div class="col-md-4">
<input id="ApplicationID" name="Application" required="required" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-md-9 control-label" for="EscID">EM</label>
<div class="col-md-4">
<input id="EscID" name="EM" type="text" placeholder="(If Applicable)" class="form-control" />
</div>
</div>
</div>
</div>
</form>
<!--END OF FORM ^^-->
</fieldset>
</div>
</div>
</div>
See the basic form on Bootstrap's website.
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Just remove:
The div with class="form-horizontal" (and it's closing tag)
Then remove your col-md-4, col-md-9 class references for the label and input tags.
Revised code:
https://jsfiddle.net/4bnndd8b/3/
Edit: if you want your form only 4 cols at md and large adjust your : class="col-lg-12" reference... i.e. col-md-4 (md and larger will only be a 4 col form).
<div class="container body-content">
<div class="page-header">
<div class="form-group">
<fieldset>
<form action="" id="createForm" class=
"form-group has-feedback" method="post">
<div class="col-lg-12">
<div class="form-group">
<label class="control-label" for=
"Application">Application</label>
<div class="">
<input id="ApplicationID" name="Application"
required="required" type="text" class=
"form-control" />
</div>
</div>
<div class="form-group">
<label class="control-label" for=
"EscID">EM</label>
<div class="">
<input id="EscID" name="EM" type="text"
placeholder="(If Applicable)" class=
"form-control" />
</div>
</div>
</div>
</form><!--END OF FORM ^^-->
</fieldset>
</div>
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>
I am trying to align a checkbox with a text input. I would like the text box to be a form control, so that it right aligns with the other inputs on the page. However, if I do this, it becomes a block element and there is a line break after the checkbox. If I don't use the form-control class, the input box isn't wide enough and it doesn't look right compared to the rest of the form. If I use the grid layout, there is too much space in between the checkbox and the text box.
The image below represents the following code:
<div>
<input type="checkbox" />
<input type="text" placeholder="Enter your own vendor name here ..." class="form-control" />
</div>
Simple class like form-inline and form-group would help you on this.
<div class="form-inline">
<div class="form-group">
<input type="checkbox"/>
<input type="text" placeholder="Enter your own vendor name here ..." class="form-control" />
</div>
</div>
Fiddle: http://jsfiddle.net/2yao3x5r/
However, from bootstrap documentation
This only applies to forms within viewports that are at least 768px
wide
Besides, I have a suggestion if your checkbox belongs to your input to use input-group
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div>
If you have a smaller than 768px viewport, I suggest to use .row and .col modifier. e.g.
<div class="row">
<div class="col-xs-2 col-sm-2">
<input type="checkbox"/>
</div>
<div class="col-xs-10 col-sm-10">
<input type="text" placeholder="Enter your own vendor name here ..." class="form-control" />
</div>
</div>
You could use the Input-Group Add-on component for checkboxes/radios. And you can always style the input-group box if it doesn't work for your specific form setup.
See example Snippet.
body {
padding-top: 50px;
}
.input-group-addon.my-addon {
background: white;
padding-top: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="well">Default</div>
<div class="container">
<div class="input-group"> <span class="input-group-addon">
<input type="checkbox" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div>
</div>
<hr>
<div class="well">Added Styling</div>
<div class="container">
<div class="input-group"> <span class="input-group-addon my-addon">
<input type="checkbox" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div>
</div>
You can use form-inline or form-horizontal
Inline-form
http://getbootstrap.com/css/#forms-inline
Horizontal-form
http://getbootstrap.com/css/#forms-horizontal
or
You have to add "display:inline-block" to your input controls
You could use input-group-addon and style the checkbox as a label for the input.
For more precise control, but less clean, you can add some CSS to the controls themselves:
#inputText {
margin-left: 20px;
}
#inputCheckbox {
position: absolute;
top: 0px;
margin-top: 0px;
}
HTML (with grid system):
<div class="col-md-2">XX</div>
<div class="col-md-8">
<input type="text" placeholder="Enter your own vendor name here ..."
class="form-control" id="inputText" />
<input type="checkbox" class="pull-left" id="inputCheckbox" />
</div>
<div class="col-md-2">XX</div>