I am just learning and coding the same time with Boostrap and the layout I am thinking is something like this:
Row
<SmallerColumn that hold label 1> <Larger Column that hold the control 1>
<SmallerColumn that hold label 2> <Larger Column that hold the control 2>
EndRow
So for example a combobox and a label that says what is that conmbox for.
For example: Country: Combobox of Countries
form-horizontal class of bootstrap is what you need. However different rows will be taken care of by the form-group class. But using a form-control class will lead you to have a border around the text as:
In order not to have a border, using control-label as the class.
Try this code:
<div class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2">Islands:</label>
<div class="col-sm-10">
<label class="control-label" id="l1" >Combobox of Islands 1</label>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Countries:</label>
<div class="col-sm-10">
<label class="control-label" id="l2" >Combobox of Countries 1</label>
</div>
</div>
</div>
Here is a jsfiddle: https://jsfiddle.net/mayank_shubham/an197vva/
The question is very simple, but somehow confusing for first timers, don't sweat it, it only requires a quick read on Bootstrap's documentation regarding form control layout.
An extract of the layout would be:
<form class="form-horizontal">
<div class="form-group">
<label for="inputField" class="col-sm-2 control-label">LabelText</label>
<div class="col-sm-10">
<select class="form-control">
<option>1</option>
<option>2</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputField" class="col-sm-2 control-label">LabelText</label>
<div class="col-sm-10">
<select class="form-control">
<option>1</option>
<option>2</option>
</select>
</div>
</div>
</form>
No need for .row as .form-group will take care of newly appended elements.
Related
I have done the code which able to select only
<div class="form-group">
<label for="editAppointmentContact" class="col-sm-2 control-label">Customer Name</label>
<div class="col-sm-10">
<select class="form-control select2contact" id="editAppointmentContact" ></select>
</div>
</div>
and the other line to input
<div class="form-group">
<label for="editAppointmentContact" class="col-sm-2 control-label">Customer Name</label>
<div class="col-sm-10">
<input class="form-control" id="editAppointmentContact" type="text" >
</div>
</div>
How can I make these two select and input at the same time in the same line?
Like you use bootstrap, you can use form-inline. Look the docs :
https://getbootstrap.com/docs/4.0/components/forms/#inline-forms
Try to adapt this layout to your case.
(And I give you an advice, you shouldn't use 2 times the same id in html for different element, as you did with select and text input)
Hope it will helps,
Best regards !
Why is one input box full width and the others so short? This is my html. I am using bootstrap:
<form action="https://www.example.net/auth/create_user" class="form-horizontal" id="login-attempts-form-admin method="post" accept-charset="utf-8">
<div class="container">
<div class="row">
<div class="col-sm-6 col-xs-6">
<!-- id -->
<div class="form-group">
<label for="id">
Reference Id
</label>
<div class="input-group">
<input type="text" name="id" value="" id="id" style="" class="form-control" placeholder="" disabled="disabled" />
<div class="input-group-addon"><i class="ti-info"></i>
</div>
</div> <!-- end input group -->
<span class="help-block">
The Reference Id is created automatically.
</span>
</div> <!-- end form-group Id -->
<!-- ip_address -->
<div class="form-group">
<label for="ip_address">
IP Address
</label>
<div class="input-group">
<input type="text" name="ip_address" value="" id="ip_address" style="max-width:none !important" class="form-control input-xlarge" placeholder="" />
</div> <!-- end input group -->
</div> <!-- end form-group ip_address -->
<!-- login -->
<div class="form-group">
<label for="login">
Login
</label>
<div class="input-group">
<input type="text" name="login" value="" id="login" style="" class="form-control" placeholder="" />
</div> <!-- end input group -->
</div> <!-- end form-group login -->
</div>
</div> <!-- end of row -->
</div> <!-- end of container. -->
</form>
I even tried to make the ip_address field wider by stating style="max-width:none !important" but no use. Is there any way to make the fields wider? Is there a preset width in bootstrap? I was of the belief the default was max width.
This is what my final output looks like:
Low rep to add as a comment, but trying your code end up with same length input fields. So don't see a problem from my end.
One thing maybe the version of bootstrap you are using, as I used the latest from the Bootstrap page (4.1.3), as older versions might have some changes within the CSS.
You could add your CSS which would give a better view if you are not changing something.
Another thing is to try:
input {
max-width: 100%;
}
When I tested the code I didn't see any different widths with the inputs.
On ip_address field, I am using style="max-width:none !important"... Any CSS you add will not work with the inline style max-width:none; !important.
It will override any changes you are making in the CSS file or any where else. Inline styles especially !important will override any attached style sheets or classes.
I think the problem may be you have this on your input style="max-width:none !important"It is overriding the default bootstrap setting and not setting your input to max width.
That's if you want them wider, shorter wrap in a <div> then manipulate the <div> with CSS or the "col-sm-6" etc.. classes.
Example from Bootstrap website version 4. Also, version 3 has the "form-control" class as well. It makes your form 100% width then you can manipulate it by wrapping in a <div> of your choice or another suitable element or CSS.
EXAMPLE:
<form>
<div class="form-group">
<label for="exampleFormControlInput1">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name#example.com">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlSelect2">Example multiple select</label>
<select multiple class="form-control" id="exampleFormControlSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</form>
https://getbootstrap.com/docs/4.0/components/forms/
When I tested the input field lengths weren't different.
But if it happens try styling the input tag with
<input style="max-width: 100%">
or add this to css
I have 3 columns in my form for inputting the user's phone:
<div class="col-md-5">
<label class="control-label">Phone</label>
<div class="row">
<div class="col-md-4">
<label for="phone_code" class="sr-only"><fmt:message key="phoneCode"/></label>
<select class="form-control" name="phoneCode" id="phone_code">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<span class="col-md-2 text-center">-</span>
<div class="col-md-6">
<label for="phone_number" class="sr-only">phone number</label>
<input type="tel" class="form-control" name="phoneNumber" id="phone_number" dir="LTR" value="${phoneNumber}">
</div>
</div>
</div>
http://www.bootply.com/jgFqaA4r6o
When I include the bootstrap css for rtl:
https://github.com/morteza/bootstrap-rtl
this flips the order of the columns, which in most cases is the desired result. However, I would like the phone input columns to remain in the same order (unaltered).
Including the pull-left class to the first two columns fixes the problem but causes errors when resizing (specifically, shrinking) the screen.
I have tried using/learning the col--pull-/col--push- classes but I couldn't figure out how to make them work here.
Does anybody have any suggestions?
I am also open to changing the general layout if there are improvements on that as well.
Thank you.
I changed the html and used a small "hack" to solve this.
There is still probably a better solution out there. This is my html:
<div class="col-md-5">
<div class="col-sm-4 col-xs-12 pull-left">
<label for="phone_code" class="control-label">phone code</label>
<input type="text" class="form-control">
</div>
<div class="col-sm-8 col-xs-12">
<label for="phone_number" class="control-label">phone number</label>
<input type="tel" class="form-control">
</div>
</div>
http://www.bootply.com/tIW6xBHVGB
The "hack" is the "col-xs-12" class added to the <div> elements. If not added, the divs don't expand to take up the entire row as they should due to the "pull-left" class.
I'm open to hearing other suggestions.
I am creating a form which looks like this
How will I get the 3 columns and the rows within ? I tried using class="col-md-4"
then within it I created two divs with float left
<label for="Halves">Halves</label> <label for="Quantity">Quantity:</label><input name="qty" id="qty" type="text" size="10"/>
but still not sure how to get the rates under Halves (as per image)
Are you looking for something like this? Js Fiddle
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label class="control-label col-md-6"> Halves</label>
<label class="control-label"> Quantity</label>
<input name="qty" id="qty" type="text" size="10"/>
<div class="input-group">
<i>$14.5 per LB</i>
</div>
</div>
</div>
</div
The above structure can be expanded to multiple columns/rows.
I'm trying to create a download form where users can download and filter data according to the date. I want the form to be wrapped inside a box as shown in the example below taken from this link.
I followed the example code, wrapping my form content inside <fieldset> tags but my form looks like this:
I don't know if this is a bug within bootstrap or if some additional styling must be done.
Here is my html code:
<form role="form" method="post">
<fieldset>
<legend> Download Details</legend>
<div class="form-group">
<label for="startdate" class="col-sm-2 control-label">Start date</label>
<div class="col-sm-10">
<select >
<option>Select Date --</option>
</select>
</div>
</div>
<br><br>
<div class="form-group">
<label for="startdate" class="col-sm-2 control-label">End date</label>
<div class="col-sm-10">
<select >
<option>Select Date --</option>
</select>
</div>
</div>
<br>
<button type="submit" class="btn btn-primary">Download</button>
</fieldset>
</form>
Bootstrap is adding styles to fieldset and legend
You can create a stylesheet that overrides those styles and include that stylesheet after bootstrap.
You can also check this Stackoverflow Answer.