I am using a form builder. It presented the below syntax. I was of the belief that bootstrap 3 used a column system that must add up to 12. I see from the below it only adds up to 10. Could some explain to be why the below is correct. Maybe I am just confused...
<!-- Contact Info -->
<div class="tab-pane fade active in" id="contactinfo1">
<br>
<form class="form-horizontal">
<fieldset>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="firstname">First Name</label>
<div class="col-md-6">
<input id="firstname" name="firstname" type="text" placeholder="First Name" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="lastname">Last Name</label>
<div class="col-md-6">
<input id="lastname" name="lastname" type="text" placeholder="Last Name" class="form-control input-md" required="">
</div>
</div>
In Twitter Bootstrap you can add "UPTO 12" columns that means you can include not more than 12 columns but you can involve less than 12 or actually 12 columns (NO hard-n-fast rule to make it 12 ONLY).
col-md-6 and col-md-4 adds to 10 COLUMNS.
So now you can add "col-md-2" if you want (not necessary) and this will come in the same row as the initial DIV 'col-md-4' and 'col-md-6'.
But if you add anything above 'col-md-2' i.e 'col-md-3' it will be shifted beneath.
Hope this is helpful.
Related
I have a form group with both a label and input
<div class="col-md-12 form-group">
<label class="col-sm-2 col-form-label" for="name">Name</label>
<input type="text" class="form-control" name="name" id="name" [(ngModel)]="person.name" disabled/>
</div>
However the label displays above the input field, i need it at its side. I have bootstrap 4.0 installed.
I've tried with class="col-sm-2 col-form-label" and does not work either.
Any suggestions?
The col-sm-2 shouldn't be nested directly in col-md-12. Use the grid like this...
https://www.codeply.com/go/Gdt1BZs9Hg
<form class="col-12">
<div class="form-row">
<label class="col-sm-2 col-form-label" for="name">Name</label>
<input type="text" class="form-control col-sm-10" name="name" id="name" [(ngModel)]="person.name" disabled/>
</div>
</form>
Notice that form-row must used to contain the col-. The col-sm-10 controls the width of the input, so you can change that as needed. Read more in the docs: https://getbootstrap.com/docs/4.0/components/forms/#form-grid
Also, note the correct use of the grid row > columns from the Bootstrap docs...
In a grid layout, content must be placed within columns and only
columns may be immediate children of rows... You may also swap .row for .form-row, a variation of our standard grid row that overrides the default column gutters for tighter and more compact layouts.
You can achieve it by using class form-inline
<div class="form-inline">
<div class="col-md-12 form-group">
<label class="col-sm-2 col-form-label" for="name">Name</label>
<input type="text" class="form-control" name="name" id="name" [(ngModel)]="person.name" disabled/>
</div>
</div>
The suggestions in other posts didn't work in Bootstrap 5. So I tested it by updating one of the demos in the Bootstrap 5 documentation and it worked. With this demo application, <label>, <input> and <button> elements can be defined in a single line:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<form role="form">
<div class="input-group flex-nowrap">
<span class="input-group-text" id="addon-wrapping">Article Title</span>
<input type="text" class="form-control" placeholder="Please enter the new article name..." aria-label="Username" aria-describedby="addon-wrapping">
<button class="btn btn-primary" type="submit" id="article-update-button">Update</button>
</div>
</form>
The form screenshot is available below: For more information, visit the Bootstrap 5 Input Group page.
See Bootstrap 4 documentation about Forms and use form-inline
<div class="col-md-12 form-group form-inline">
<label class="col-sm-2 col-form-label" for="name">Name</label>
<input type="text" class="form-control" name="name" id="name" [(ngModel)]="person.name" disabled/>
</div>
I am using Twitter Bootstrap 3.3.6. I am new to it. I have designed a form with following input fields.
<div class="form-group row">
<label for="address1" class="col-xs-2 col-md-1 control-label">Address 1:</label>
<div class="col-xs-10 col-md-4">
<input type="text" name="address1" id="" class="form-control" maxlength="55" value="" />
</div>
<label for="address2" class="col-xs-2 col-md-1 control-label">Address 2:</label>
<div class="col-xs-10 col-md-4">
<input type="text" name="address2" id="" class="form-control" maxlength="55" value="" />
</div>
</div>
When I check above using Firefox responsive design mode for width less than 768 Second label "Address 2:" is wrapped to a new line but it shows some margin on left. I don't see any problem when I check inspect using firebug.
EDIT: Actually I want above 2 labels and inputs on same line for large screens but broken down to 2 lines for screens below 768px.
I have added col-xs-12 do the label and also 'text-center' class for better positioning on small, but this is up to you.
<div class="form-group row">
<label for="address1" class="col-xs-12 col-md-1 control-label text-center">Address 1:</label>
<div class="col-xs-10 col-md-4">
<input type="text" name="address1" id="" class="form-control" maxlength="55" value="" />
</div>
<label for="address2" class="col-xs-12 col-md-1 control-label text-center">Address 2:</label>
<div class="col-xs-10 col-md-4">
<input type="text" name="address2" id="" class="form-control" maxlength="55" value="" />
</div>
</div>
You don't need to put that input inside another div. Just put your input after label tag and use two different .form-groups for two inputs. Your code should be like this.
<div class="form-group">
<label for="address1" class="col-xs-2 col-md-1 control-label">Address 1:</label>
<input type="text" name="address1" id="" class="form-control" maxlength="55" value="" />
</div>
<div class="form-group">
<label for="address1" class="col-xs-2 col-md-1 control-label">Address 1:</label>
<input type="text" name="address1" id="" class="form-control" maxlength="55" value="" />
</div>
If you need to make a inline form , add form-inline class to your <form> element.
<form class="form-inline">
Best Regards !
I'm new to Bootstrap, I'm creating a registration form with two input fields:
<div class="input-group">
<div class="form-group">
<label class="control-label" for="user_password">Password</label>
<div class="controls">
<input type="{{passwordType}}" data-ng-change="passwordChanged();" data-ng-model="user.password"
class="form-control" id="user_password" name="user_password"
placeholder="Password" required>
</div>
</div>
<div class="form-group">
<label class="control-label">Show Password</label>
<div class="controls">
<input type="checkbox" data-ng-model="showPassword" data-ng-checked="showPassword"
data-ng-click="switchPasswordType()">
</div>
</div>
However I don't know what css style I'm missing but the label and the input field appeas one below the other at the left of the grid-container, so no like usual form. I have tried to put both inside a "" with the style="display:inline-block" and still same problem.
Any ideas how to sove that?
Thank you for your time.
Found the solution, I just created a row with two columns inside one for the label and other for the input and it made the job.
<div class="row">
<div class="col-sm-6">
<label class="control-label" class="" for="user_email">Email</label>
</div>
<div class="col-sm-6">
<div class="controls">
<input type="email" auto-focus autofocus="true" data-ng-model="user.email"
id="user_email" name="user_email"
placeholder="Insert your email" required>
</div>
</div>
</div>
I want to narrow the size of input boxes in the horizontal form.
I used col-sm-4 to make text boxes narrower.
<form class="form-horizontal">
<div class=" form-group">
<label class="col-sm-2 control-label">date</label>
<div class="col-sm-4">
<input name="date" type="text" class="form-control" />
</div>
</div>
</form>
For big size it works, however when I resize the form and make it smaller, suddenly, the length of input box will stretch and become larger. So for big screens the input will have 230px and for smaller screen it will have 608px
The fiddel http://jsfiddle.net/3YWkd/
I want that the size of text box remain the same during page shrink.
You just need to add the mobile (xs) classes, like so:
<div class="col-sm-4 col-xs-4">
<input name="fromDate" type="text" class="form-control" />
</div>
Or just leave the col-xs-4, no need for the sm in this case.
Edit:
Re: your comment, you may use slightly different html, like soQ
<div class=" form-group">
<div class="col-xs-2">
<label class="control-label" for="fromDate">date</label>
</div>
<div class="col-xs-4">
<input name="fromDate" type="text" class="form-control" />
</div>
</div>
fiddle
This should do it:
<form class="form-horizontal">
<div class=" form-group">
<label class="col-sm-2 col-xs-12 control-label">date</label>
<div class="col-sm-4 col-xs-4">
<input name="date" type="text" class="form-control" />
</div>
</div>
</form>
I have a bootstrap 3 form.
when its in the tabled and larger media query state, the middle input field is somehow overlaying the two inputs above making them none clickable jsfiddle.net/wT7gp/.
I have put an example in jsfiddle. (remember to make it wide enough to see the problem)
Repro:
Open link.
make the outwindow large.
click the input for firstname.
Expected it to start typing state, but nothing happens.
Hope someone here can explan what I did to cause it :) I failed at finding the issue. (other then yes the middle element is overlaying the two others.
You should be wrapping your rows of form groups in div with row class like so:
Fiddle: http://jsfiddle.net/wT7gp/1/
HTML
<div class="row">
<div class="form-group col-sm-6">
<input class="form-control input-lg " placeholder="First Name" id="first-name" tabindex="1" name="FirstName" data-bind="value: firstName" type="text" maxlength="50" />
<label for="first-name" style="display:none;" data-bind="validationMessage: firstName, css: { error: !firstName.isValid() }" class="error"></label>
</div>
<div class=" form-group col-sm-6">
<input class="form-control input-lg " placeholder="Last Name" id="last-name" tabindex="2" name="LastName" data-bind="value: lastName" type="text" maxlength="50" />
<label for="last-name" style="display:none;" data-bind="validationMessage: lastName, css: { error: !lastName.isValid() }" class="error"></label>
</div>
</div>
<div class="row">
<div class="col-sm-12 form-group">
<input class="form-control input-lg " placeholder="Email" id="email" tabindex="3" name="Email" data-bind="value: email" type="email" maxlength="50" />
<label for="email" style="display:none;" data-bind="validationMessage: email, css: { error: !email.isValid() }" class="error"></label>
</div>
</div>
<div class="row">
<div class="col-sm-6 form-group">
<input class="form-control input-lg " placeholder="Choose a password" id="password1" tabindex="4" name="Password" data-bind="value: password" type="password" />
<label for="#Html.CamelCaseName(Name)" style="display:none;" data-bind="validationMessage: password , css: { error: !password.isValid() }" class="error"></label>
</div>
<div class="col-sm-6 form-group">
<input class="form-control input-lg " placeholder="password, again" id="password2" tabindex="5" name="ConfirmPassword" data-bind="value: confirmPassword" type="password" />
<label for="#Html.CamelCaseName(Name)" style="display:none;" data-bind="validationMessage: confirmPassword , css: { error: !confirmPassword.isValid() }" class="error"></label>
</div>
</div>
I had the same problem. It was caused by a div covering my input controls. It seemed the div 'knew no bounds'.
So when I worked out which div was causing the problem I applied the overflow:hidden; style.
I'm guessing that's why the row class worked for Kevin Pei - maybe it keeps the col divs contained.
Aside: I used Firefox Firebug to show me which div was covering my controls.
We had a very similar problem within our web application. Using bootstrap 3.3.7 our signup form did not work any more on iPhones. The initial form looked like this:
<form ...>
<div class="col-xs-12 col-sm-6">
<div class="form-group string required">
<input ...>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="form-group string required">
<input ...>
</div>
</div>
<div class="col-sm-6 col-md-8">
<div class="form-group string required">
<input ...>
</div>
</div>
<div class="col-sm-6 col-md-4">
<input type="submit" value="Register">
</div>
</form>
The problem was caused by the last two div elements which did not have corresponding class definitions for the xs-size. So on iPhone the <div class="col-sm-6 col-md-4"> class resulted in a very big div overlaying the whole form and preventing touch events for input fields beneath the div.
The solution is simply adding a xs-size class to the div and everything worked well on iPhones. In our case we adjusted the form like that:
<div class="col-xs-12 col-sm-6 col-md-8">
<div class="form-group string required">
<input ...>
</div>
</div>
In my case i set z-index:1 for the controls not allowing inputs and no z-index setting for the controls allowing inputs.