Can't seem to horizontally align my form elements with bootstrap 3. I tried adding .form-inline but still no results. Heres my form.
<form>
<input type="input" />
<select></select>
<select name="something">
<option value="1">1</option>
</select>
<input type="submit" value="submit" />
</form>
I think you're missing <div class="form-group"> around your form elements and you need to add a form-control class to your fields. From the docs:
<form class="form-inline" role="form">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
...
</form>
http://getbootstrap.com/css/#forms-inline
Related
I have a form with a few fields that need to be inline. Bootstrap is not letting me do this, it renders the form fields on a entire line. Also, I would like the labels to be next to the field.
Is it feasible to wrap a subset of fields in a form tag that is set to form-inline, and how do I get the form fields not to break on their own lines. Here is what I am trying to achieve:
Here is what I've tried:
<div class="form-group">
Zipcode <input type="text" data-bind="value: Zipcode" class="form-control">
Response Time <input type="text" data-bind="value: ResponseNumber" class="form-control"> <select data-bind="options: ResponseUnits" />
</div>'
Also, I have not wrapped the form in <form> because I am using <form> to wrap a file dropzone. I am using knockout and ajax, so I don't need to use forms (unless they are required for bootstrap).
looks like from your example you are more after a horizontal style form. use form groups.
https://jsfiddle.net/whxf78zw/1/
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Zipcode:</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="zipcode" placeholder="Enter zip">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="responseTime">Response Time:</label>
<div class="col-sm-3">
<input type="number" class="form-control" id="responseTime" placeholder="Enter response time">
</div>
<div class="col-sm-3">
<select class="form-control">
<option>Hours</option>
<option>Days</option>
<option>Weeks</option>
<option>Months</option>
<option>Years</option>
</select>
</div>
</div>
</form>
I'm using bootstrap to display a form-inline. However, I cannot figure how to remove the spaces between the form inputs, it always leaves a ~4p blank. I tried to adjust it using margin, in vain. Any idea why ?
Here's the form
<div class="container">
<form id="msform" class="form-inline" role="form" method="post">
<!-- progressbar -->
<div class="form-group">
<input type="hidden" id="form_departure" name="form[departure]" required="required" placeholder="Départ" class="form-control"><input type="text" id="autocompleter_form_departure" name="autocompleter_form[departure]" required="required" placeholder="Départ" class="form-control ui-autocomplete-input" autocomplete="off">
</div>
<div class="form-group">
<input type="hidden" id="form_arrival" name="form[arrival]" required="required" placeholder="Arrivée" class="form-control"><input type="text" id="autocompleter_form_arrival" name="autocompleter_form[arrival]" required="required" placeholder="Arrivée" class="form-control ui-autocomplete-input" autocomplete="off">
</div>
<div class="form-group">
<select id="form_passengers" name="form[passengers]" required="required" class="fly_confirm form-control"><option value="1" selected="selected">1 passager</option><option value="2">2 passagers</option><option value="3">3 passagers</option><option value="4">4 passagers</option><option value="5">5 passagers</option></select>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">CHERCHER</button>
</div>
</form>
</div>
Inline elements are sensitive to the white space in your code. The easiest solution is to simply remove it.
Ex: </div><div class="form-group">
bootply example
An alternative is to float the inputs:
.form-group {
float:left;
}
bootply example
I have a forw, in which i need to display two field near each other: select + input. My code is:
<div role="form">
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter date" id="maps-filter-input-date">
</div>
<div class="form-group" id="maps-filter-select-track">
<select class="form-control" class="display-inline-block">
<option>Select date</option>
</select>
<input type="text" class="form-control" placeholder="Enter date">
</div>
<div class="form-group" id="maps-filter-select-track">
<select class="form-control">
<option>Select date</option>
</select>
<input type="text" class="form-control" placeholder="Enter date">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</div>
Looks it like this:
With black color is show where it should be. So is it possible to do with default bootstrap classes?
From the Bootstrap doc:
Add .form-inline to your for left-aligned and inline-block controls.
You will also need to set custom width to your form elements, see details here
Change
<div class="form-group" id="maps-filter-select-track">
to
<div class="form-group form-inline" id="maps-filter-select-track">
here's bootply
http://www.bootply.com/e2BS204U7b
I was my form labels to appear to the left of my textboxes (labels all right aligned and textboxes all left aligned).
Right now they are all appearing on top of my textboxes:
<form action="" method="post">
<div class="form-horizontal">
<label for="test">Test</label>
<input id="test" type="text" class="form-control" disabled/>
</div>
<div class="form-horizontal">
<label for="more">More</label>
<input id="more" type="text" class="form-control" disabled/>
</div>
</form>
Using bootstrap's grid. Here is a link to bootply.
<form class="form-horizontal" action="" method="post">
<label class="col-sm-2 control-label" for="test">Test</label>
<div class="col-sm-10">
<input id="test" type="text" class="form-control" disabled/>
</div>
<label class="col-sm-2 control-label" for="more">More</label>
<div class="col-sm-10">
<input id="more" type="text" class="form-control" disabled/>
</div>
</form>
Without your CSS I won't be able to tell for sure, but try:
label {
display: inline;
}
It would be helpful if you provided the CSS as well as the HTML.
Answer / example is right in the bootstrap examples:
http://getbootstrap.com/css/#forms-horizontal
You can match your form structure to it.
I tried to use Bootstrap's inline form but oddly the submit button can't be put on the same line with other input items. I had been searching for solutions but didn't find one yet.
Here is my HTML code:
<form class="form-inline" role="form" method="post" action="">
<div class="form-group">
<input type="text" class="input-small" id="startDate" placeholder="Start Date" name="startDate">
</div>
<div class="form-group">
<input type="text" class="input-small" id="endDate" placeholder="End Date" name="endDate">
</div>
<div class="form-group">
<input type="text" class="input-small"" id="number" placeholder="Number" name="number">
</div>
<div class="form-group">
Status: <select class="selectpicker" id="status" name="status" >
<option value="All">ALL</option>
<option value="Successful">Successful</option>
<option value="Unsuccessful">Unsuccessful</option>
</select>
</div>
<div class="form-group">
Direction: <select class="selectpicker" id="direction" name="direction">
<option value="All">All</option>
<option value="IN">In</option>
<option value="OUT">Out</option>
</select>
</div>
<button type="submit" class="btn btn-success" id="submit" name="submit"/>Submit</button>
</form>
Can somebody help me to inline the submit button with the other items? Thanks a lot!
Put your button inside the <div class="form-group">
<form class="form-inline" role="form" method="post" action="">
<div class="form-group">
<input type="text" class="input-small" id="startDate" placeholder="Start Date" name="startDate">
</div>
<div class="form-group">
<input type="text" class="input-small" id="endDate" placeholder="End Date" name="endDate">
</div>
<div class="form-group">
<input type="text" class="input-small"" id="number" placeholder="Number" name="number">
</div>
<div class="form-group">
Status: <select class="selectpicker" id="status" name="status" >
<option value="All">ALL</option>
<option value="Successful">Successful</option>
<option value="Unsuccessful">Unsuccessful</option>
</select>
</div>
<div class="form-group">
Direction: <select class="selectpicker" id="direction" name="direction">
<option value="All">All</option>
<option value="IN">In</option>
<option value="OUT">Out</option>
</select>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success" id="submit" name="submit"/>Submit</button>
</div>
</form>
I copied your form into a test project and bootstrap properly inlined the submit button. In addition, I made some changes to your html above. I removed the terminator from the "button" element on your submit button and I removed the extra quote on the textbox with an id of "number". Moving the button inside or outside of a form-group made no difference for me.
While testing, and looking at your link, I noticed that bootstrap wrapped your form on the appropriate media width boundary. Make sure that your form is not just wrapping, like it's supposed to. If it's wrapping, reduce the horizontal footprint of your form using collapse.
There is an example in the bootstrap docs here...
http://getbootstrap.com/components/#navbar-default