I have code like below. How to make buttons in-line with input ? Now buttons are inline with adjacent column and looks ugly. Live demo here
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="x" class="control-label">Function</label>
<input type="text" id="x" class="form-control" placeholder="x"/>
</div>
</div>
<div class="col-md-1">
Get
</div>
<div class="col-md-1">
Stat
</div>
</div>
You can use an input group (though bootstrap say you shouldn't use input groups with selects because it doesn't always behave)
http://getbootstrap.com/components/#input-groups-buttons
edit: for the label above the input group:
<div class="container" style="width: 600px;">
<form id="form" role="form">
<div class="row">
<label for="x" class="control-label">Function</label>
<div class="input-group">
<select id="x" class="form-control" placeholder="x">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<span class="input-group-btn">
Get
Stat
</span>
</div>
</div>
</form>
</div>
or for the label as part of the input group:
<div class="container" style="width: 600px;">
<form id="form" role="form">
<div class="row">
<div class="input-group">
<span class="input-group-addon"><label for="x" class="control-label">Function</label></span>
<select id="x" class="form-control" placeholder="x">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<span class="input-group-btn">
Get
Stat
</span>
</div>
</div>
</form>
</div>
I added an update to your fiddle:
input above group: http://jsfiddle.net/ced7k0hq/11/
input as part of group: http://jsfiddle.net/ced7k0hq/12/
From the bootstrap docs: http://getbootstrap.com/components/#input-groups
Textual <input>s only
Avoid using <select> elements here as they cannot be fully styled in WebKit browsers.
Avoid using <textarea> elements here as their rows attribute will not be respected in some cases.
thanks #ovitinho for comment about joining the two anchors inside a single input-group-btn :D
Related
I have four inputs in the same row and one of the input is conditionally visible by clicking "Click" button.
So if all four inputs are visible, the inputs datepicker1 and datepicker2 are sticked on the inputs above.
What is the correct bootstrap way to arrange and beautify the distances between the inputs?.
Gutters are not available on bootstrap 3.
<div class="col-md-3">
<select class="lookup-type-select form-control" name="created_lookup_type_1">
<option value="range">Range</option>
<option value="range__exclude">Exclude Range</option>
</select>
</div>
<div class="lookup-value">
<div class="col-md-3">
<select name="created__1_0" class="filter-input shortcut form-control" id="id_created__1_0">
</select>
</div>
<div class="col-md-8 row custom" style="display: inline;">
<div class="col-md-6">
<div class="datetimepicker input-group start-date date" data-date-format="YYYY-MM-DD HH:mm:ss">
<input class="filter-input form-control" name="created__1_1" value="" type="text" id="datepicker1" placeholder="From">
<span class="input-group-addon">
<span class="glyphicon-calendar glyphicon"></span>
</span>
</div>
</div>
<div class="col-md-6">
<div class="datetimepicker input-group end-date date" data-date-format="YYYY-MM-DD HH:mm:ss">
<input class="filter-input form-control" name="created__1_2" value="" type="text" id="datepicker2" placeholder="To">
<span class="input-group-addon">
<span class="glyphicon-calendar glyphicon"></span>
</span>
</div>
</div>
</div>
<div class="col-md-3 row month_only" style="display: none;">
<div>
<div class="datetimepicker input-group start-date date month_only" style="display: none;">
<input class="filter-input form-control" name="created__1_3" value="" type="text" id="id_created__1_3" placeholder="Month">
<span class="input-group-addon">
<span class="glyphicon-calendar glyphicon"></span>
</span>
</div>
</div>
</div>
</div>
<button type="button" class="btn remove-button">
<span class="glyphicon glyphicon-remove"></span>
</button>
<button onclick="myFunction()">Ckick</button>
<script>
function myFunction() {
if (document.getElementById('id_created__1_0').style.display != "none") {
document.getElementById("id_created__1_0").style.display = "none";
} else {
document.getElementById("id_created__1_0").style.display = "inline";
}
}
</script>
Jsfiddle example
Should be like the following pic
I can't seem to get my checkboxes to align with the labels and select options inside a well using bootstrap 3.3.5. My code is:
<div class="well">
<div class="row">
<div class="col-md-6">
<label class="control-label">Checkboxes</label>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="checkbox">
<input type="checkbox" id="1">1
</div>
<div class="checkbox">
<input type="checkbox" id="2">2
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">Select</label>
</div>
</div>
<div class="row">
<div class="col-md-6">
<select id="2" class="form_control">
<option value="A">A</option>
<option value="B">B</option>
</select>
</div>
</div>
</div>
Fiddle illustrating misalignment:
https://jsfiddle.net/dwzvsoax/
I'm pretty new to bootstrap, so I'm probably doing something dumb! Thank you in advance.
Wrap your form elements and labels together with a .form-group element.
jsFiddle
Also, you should read the Boostrap Documentation on Forms
<div class="well">
<div class="form-group">
<label>Check Boxes</label>
<div class="checkbox">
<label>
<input type="checkbox" /> 1
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" /> 2
</label>
</div>
</div>
<div class="form-group">
<label>select</label>
<select id="2" class="form-control">
<option value="A">A</option>
<option value="B">B</option>
</select>
</div>
</div>
you could add in to the .checkbox class an attribute margin-left:22px; in the css file and that should give you the desired effect. If it's just on one page though, just add it in style tags at the top of the page, as it may not be desirable everywhere.
I updated your fiddle
I'm trying to get hands over Bootstrap 3 and I'm kindof struggling with the new classes for the grid. Previous versions of Bootstrap let you set the width of a input by adding the span-* class so if you wanted to put two inputs on the same form column, adding span-2 and span-10 did the job. I'm trying to do this with bootstrap 3 but I don't get the same result as you can see in this fiddle, I want to set the select and the input on the same col. I want the labels at top of the inputs so adding the inline class to the form don't work.
What I'm missing here?
Cheers and thanks in advance
http://jsbin.com/esewOyo/1/
Most people can't believe how many classes are involved but form-control is always 100% so each one must go inside a col-- class and if you want to put elements on the same row, in this situation, then you'd use a nested row with columns as follows:
<div class="container">
<form role="form">
<div class="row my-row">
<div class="col-sm-4">
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label>C-Band</label>
<select class="form-control">
<option value="C15+">C15+</option>
<option value="C12-14">C12-14</option>
<option>
</select>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label> </label>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label>C-Band</label>
<select class="form-control">
<option value="C15+">C15+</option>
<option value="C12-14">C12-14</option>
<option>
</select>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label>C-Band</label>
<select class="form-control">
<option value="C15+">C15+</option>
<option value="C12-14">C12-14</option>
<option>
</select>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label>C-Band</label>
<select class="form-control">
<option value="C15+">C15+</option>
<option value="C12-14">C12-14</option>
<option>
</select>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label>C-Band</label>
<select class="form-control">
<option value="C15+">C15+</option>
<option value="C12-14">C12-14</option>
<option>
</select>
</div>
</div>
</div>
</form>
</div>
Because the gutter is too wide for my taste:
.row.my-row, .row.my-row .row {
margin-left:-1%;
margin-right:-1%
}
.row.my-row [class*="col-"] {
padding-left: 1%;
padding-right: 1%;
}
.row.my-row .row [class*="col-"] {
padding-left: 1%;
padding-right: 1%;
}
I wish to have labels right-aligned next to its input box (with a space in between). However, labels are still left-aligned. According to Boostrap3 documentation and this question, the form-horizontal class should be used, but still result is not right.
The django template code below does generate fields in a two-column fashion, but with left-aligned labels:
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-md-3 col-md-offset-1 input-md">
{{ form.code|bootstrap_horizontal }}
</div>
<div class="col-md-3 col-md-offset-2 input-md">
{{ form.name|bootstrap_horizontal }}
</div>
<div class="col-md-3 col-md-offset-1 input-md">
{{ form.company|bootstrap_horizontal }}
</div>
</div>
<div class="btn-group btn-group-lg">
<button class="btn" type="submit">Crear Marca</button>
</div>
</form>
I guess I'm missing something. Thanks in advance for your help.
EDITED:
Output HTML in jsfiddle.
Image of actual output included as well in this link. As you can see, Code & Company are left-aligned.
I think your text is right-aligned but the effect is not visible due to the nesting of your grid classes.
Try something like:
<form class="form-horizontal container" role="form">
<div class="form-group">
<label for="inputEmail1" class="col-sm-2 control-label">Code</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
<label for="inputPassword1" class="col-sm-2 control-label">Name</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="inputPassword1" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="inputEmail1" class="col-sm-2 control-label">Company</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
<div class="btn-group btn-group-lg">
<button class="btn" type="submit">Crear Marca</button>
</div>
</form>
When you nest your grid classes (col--) a child get a percentage of the width of its parent. When you nest a col-lg-6 in a col-lg-6 its with will be 25% of the viewport 50% of 50%.
In the case you want to input next to each other with a float left (your col-- classes add this float) they can't be in different input-groups. The .from-group has a clearfix which undo the float left. So try something like:
<div class="col-sm-6">
<div class="form-group">
<label for="inputEmail1" class="col-sm-4 control-label">Company</label>
<div class="col-sm-8">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputEmail1" class="col-sm-4 control-label">Company 2</label>
<div class="col-sm-8">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
</div>
They've provided the example markup for a regular input-text form:
<form class="form-horizontal">
<fieldset>
<legend>Legend text</legend>
<div class="control-group">
<label class="control-label" for="input01">Text input</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01">
<p class="help-block">Supporting help text</p>
</div>
</div>
</fieldset>
</form>
But how could I get something like
Just a bit confused on how the markup would look for a select list. Thanks!
Bootstrap 2.3.2:
<form class="form-horizontal">
<fieldset>
<div class="control-group">
<label class="control-label">Select:</label>
<div class="controls">
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
</fieldset>
</form>
Bootstrap 3.x:
<form role="form" class="form-horizontal">
<fieldset>
<div class="form-group">
<label class="col-sm-2 control-label">Select:</label>
<div class="col-sm-3">
<select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
</fieldset>
</form>
col-sm-2 and col-sm-3 define the widths for you can change accordingly. Have a look at the Grid system on the Bootstrap site to see the different variations.
Hope this helps
The answer by Lodder is correct for Bootstrap 2.x, but it will not work for Bootstrap 3. This will work Bootstrap 3:
<form class="form-horizontal">
<fieldset>
<div class="form-group">
<label class="control-label col-lg-2">Select:</label>
<div class="col-lg-3">
<select class="form-control">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
</fieldset>
</form>
And work without value - Bootstrap 3.
<form class="form-horizontal">
<fieldset>
<div class="form-group">
<label class="control-label col-lg-2">Select:</label>
<div class="col-lg-3">
<select class="form-control">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
</fieldset>
</form>