I have a very simple form with Bootstrap 3 which I can easily (automatically) align when I don't use input-group-addons.
After I use them in my form it is impossible to align it (the line with addons is wider because of added addons)
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="product_name" class="col-sm-2 control-label">Product name</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="product_name" placeholder="Product name">
</div>
</div>
<div class="form-group">
<label for="product_price" class="col-sm-2 control-label">Price</label>
<div class="col-sm-4 input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control bfh-number" id="product_price" placeholder="Price" data-min="0" data-max="9999999">
<span class="input-group-addon">.00</span>
</div>
</div>
<div class="form-group">
<label for="product_description" class="col-sm-2 control-label">Description</label>
<div class="col-sm-6">
<textarea class="form-control" id="product_description" placeholder="Description" rows="5"></textarea>
</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>
JsFiddle: http://jsfiddle.net/Yzxy3/
Bootstrap documentation for input groups says :
Don't mix input-group with other components. (see:http://getbootstrap.com/components/#input-groups)
Do not mix form groups or grid column classes directly with input groups. Instead, nest the input group inside of the form group or grid-related element."
So you can't mix "col-sm-4" with "input-group" in the same class. You have to create 2 div class, the first with "col-sm-4" and the other with "input-group"
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control bfh-number" id="product_price" placeholder="Price" data-min="0" data-max="9999999">
<span class="input-group-addon">.00</span>
</div>
</div>
Updated Fiddle
It's because .input-group has default
padding-right: 0;
padding-left: 0;
so your div will stretch to the full width, where as .col-sm-4 has default styles as:
padding-right: 15px;
padding-left: 15px;
So to make it work as expected, you can add this style:
.input-group[class*="col-"] {
padding-right: 15px;
padding-left: 15px;
}
Updated Fiddle
I find that I needed to include: float: left as well. So, the css is:
.input-group[class*="col-"] {
float: left;
padding-right: 15px;
padding-left: 15px;
}
If not, my multi-column rows broke when I upgraded from v3.0.2 to v3.0.3.
--cp
.input-group[class*="col-"] is not useful if you use
<fieldset>
Here is solution!
.makeHorizontal{
float:left;
padding-left:20px;
}
Related
<div class="form-group">
<label class="lable label-default"> Google Location</label>
<input class="form-control" type="text" name='latitude' placeholder="latitude"
[(ngModel)]="tourDetails.latitude">
<input class="form-control" type="text" name='longitude' placeholder="longitude"
[(ngModel)]="tourDetails.longitude">
</div>
My Css code:
label {
display: inline-block;
width: 140px;
text-align: left;
}
input {
display: inline-block;
width: 140px;
text-align: left;
}
I have my Following Output. But I want to align these input text fields one by one with same proper alignment.
Share your css to properly understand the style, but I am assuming the typo lable instead of label may affect the css rules
<div class="form-group">
<label class="label label-default"> Google Location</label>
<input class="form-control" type="text" name='latitude' placeholder="latitude"
[(ngModel)]="tourDetails.latitude">
<input class="form-control" type="text" name='longitude' placeholder="longitude"
[(ngModel)]="tourDetails.longitude">
</div>
I've done only for geo-location. But if like to get the idea of bootstrap, you can refer W3schools or Bootstrap offcial web
The working fiddle Jsfiddle
<div class="container">
<form class="form-horizontal">
<div class="row">
<div class="col-xs-6">
<label class="control-label label-default"> Google Location</label>
</div>
<div class="col-xs-6">
<div class="form-group">
<input class="form-control" type="text" name='latitude' placeholder="latitude"
[(ngModel)]="tourDetails.latitude">
<input class="form-control" type="text" name='longitude' placeholder="longitude"
[(ngModel)]="tourDetails.longitude">
</div>
</div>
</div>
</form>
</div>
Update 1 As you updated the requirement, I've updated the fiddle too. So you can easily remove <div class="row"> and get your expectation
is it possible in bootstrap?
I implement two-line label and input.
<div class="form-group">
<label for="example">LABEL<span style="color:red">*</span></label>
<input id="example" class="form-control" type="text"/>
</div>
But I want to make these in one-line when the display width is over sm size.
So, I edit my code as follows.
<div class="form-group">
<div class="col-md-2">
<label for="example">LABEL<span style="color:red">*</span></label>
</div>
<div class="col-md-10">
<input id="example" class="form-control" type="text"/>
</div>
</div>
It looks fine except for some margin issues.
But I also want that label width size is fixed so that only input width size is flexible to right side.
Is it possible? Thanks in advance.
Try to use form-horizontal or form-inline class of bootstrap
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
</form>
Please apply this code:
label {
width: auto;
display: inline-block;
}
#example {
width: auto;
display: inline-block;
margin-left: 15px;
}
<div class="form-group">
<label for="example">LABEL<span style="color:red">*</span></label>
<input id="example" class="form-control" type="text"/>
</div>
I hope it is helpful for you.
Thanks
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>
I am attempting to create an inline form within a small container (.col-sm-4). Using a default inline form at this size automatically wraps into multiple lines, which I would like to avoid. The look I am aiming for is here:
At this point I have gotten the inputs to throw out their min-width and instead adhere to their bounding columns, but I cannot get the button in the spot I want it (and autosizing with the overarching container).
JSFiddle Here
HTML:
<div class="col-xs-4 well">
<div class="col-xs-7 form-col" id="input-dynamic">
<input type="text"></input>
</div>
<div class="col-xs-4 form-col" id="input-dynamic">
<div class="input-group-addon">$</div>
<input type="number"></input>
</div>
<div class="col-xs-1 form-col" id="input-dynamic">
<button class="btn btn-danger">-</button>
</div>
</div>
CSS:
#input-dynamic input[type=text] {
width: 100%;
box-sizing: border-box;
height: 28px;
}
#input-dynamic input[type=number] {
width: 100%;
box-sizing: border-box;
height: 28px;
}
#input-dynamic button {
width: 100%;
box-sizing: border-box;
height: 28px;
}
.form-col {
padding-right: 2px;
padding-left: 2px;
}
Kfriede, Hi there. You said you want to avoid the form items from stacking.
Here is a Fiddle that will do that for the form.
But just because of the still having it to be used properly on a very small screen.
I added a media breakpoint at 320px to drop the button down below and expand the two inputs to take up 50% width each.
Hope this can help you get started here with this form.
<form class="row-fluid">
<input type="text" class="input-style col-xxs-6 col-xs-4 " id="exampleInputName2" placeholder="Name">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="col-xxs-6 col-xs-5 input-block">
<div class="input-addon input-height col-xs-2">$</div>
<input type="text" class="input-style col-xs-8" id="exampleInputAmount" placeholder="Amount">
</div>
<div class=" col-xxs-12 col-xs-3">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</form>
I forked your JSFiddle.
I Implemented the inline-form techniques discussed here.
And built some of the elements using this Bootstrap form builder. If you google Bootstrap form builder you will see many similar ones.
I also noticed you didn't add all the external resources to the JSFiddle so I did that as well.
If you have a really really small screen it gets scrunched but you could use a media query as discussed HERE to change the layout for a small width.
<div class="container-fluid">
<div class="row">
<div class="col-xs-4">
<form class="form-inline">
<div class="form-group">
<div class="row">
<div class="col-xs-6">
<input id="textinput" name="textinput" type="text" class="form-control input-md"></div>
<div class="col-xs-6"><div class="input-group"> <span class="input-group-addon">$</span>
<input id="prependedtext" name="prependedtext" class="form-control" placeholder="Amount" type="text"> <span class="input-group-btn">
<button class="btn btn-danger" type="button">-</button>
</span>
</div>
</div>
</div>
</form>
</div>
</div>
</div>