I wanted to use the bootstrap and make a horizontal form. Unfortunately, my form generates a normal, normal one. As if form-horizontal does not work (blocks are generated from ReactJS).
<div id="app" class="container">
<block>
<block>
<div class="row">
<header class="col-sm-12 header">
<h1 class="text-center text-uppercase header__title">formularz wprowadzania danych osobowych!</h1>
</header>
</div>
<block>
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="firstName">Imie: </label>
<div class="inputs col-sm-10">
<input class="form-control" type="text" id="firstName" name="firstName" value="">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="lastName">Nazwisko: </label>
<div class="col-sm-10">
<input class="form-control" type="text" id="lastName" name="lastName" value="">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" value="dalej">
</div>
</div>
</form>
</block>
</block>
Dropped the .form-horizontal class requirement.
.form-group no longer applies styles from the .row via mixin, so .row
is now required for horizontal grid layouts (e.g., <div class="form-group row">).
Added new .col-form-label class to vertically center labels with
.form-controls.
Added new .form-row for compact form layouts with the grid classes
(swap your .row for a .form-row and go).
Bootstrap 4 Forms
Related
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 am trying to align textfields with bootstrap however I keep failing to adopt anything I found on sources to my project. What I am trying to do is aligning e-mail and password text-fields but leave 'Remember me' and 'Login' centered.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<form method="POST" action="/auth/login">
<div class="form-group">
<div>
<label for="exampleInputEmail1">Email address</label>
<input type="email" name="email" value="{{ old('email') }}">
</div>
</div>
<div class="form-group">
<div>
<label for="exampleInputPassword1">Password</label>
<input type="password" name="password" id="password">
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Remember me
</label>
</div>
</div>
<div class="form-group">
<div>
<button type="submit" class="btn btn-default">Login</button>
</div>
</div>
</form>
You can use Bootstrap's form-horizontal class to help achieve the layout.
Demo: http://www.bootply.com/nJ2P2gi76B
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Log in</button>
</div>
</div>
</form>
You can access only the text input by using a css attribute selector.
For Example...
input[type="text"] {
...
}
You can get more specific if needed...
#someID input[type="text"] {
...
}
you can use text-center to center the inner content of your div. you can use text-left, text-center, text-right classes to align the contents.
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css);
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css);
<form method="POST" action="/auth/login">
<div class="form-group">
<div>
<label for="exampleInputEmail1">Email address</label>
<input type="email" name="email" value="{{ old('email') }}">
</div>
</div>
<div class="form-group">
<div>
<label for="exampleInputPassword1">Password</label>
<input type="password" name="password" id="password">
</div>
</div>
<div class="form-group text-center">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Remember me
</label>
</div>
</div>
<div class="form-group text-center">
<div>
<button type="submit" class="btn btn-default">Login</button>
</div>
</div>
</form>
It would help if you could post a JSFiddle with the css you are using!
Guessing from what i see:
You could add a class to both fields and override the css.
or put both fields in a div and align them without impacting the rest.
Using an enclosing div:
JSFiddle
CSS:
.input-fields {
width: 300px;
}
.input-fields .form-group {
float: right;
}
.form-group {
clear: both;
text-align: center;
}
HTML:
<form method="POST" action="/auth/login">
<div class="input-fields">
<div class="form-group">
<div>
<label for="exampleInputEmail1">Email address</label>
<input type="email" name="email" value="{{ old('email') }}">
</div>
</div>
<div class="form-group">
<div>
<label for="exampleInputPassword1">Password</label>
<input type="password" name="password" id="password">
</div>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Remember me
</label>
</div>
</div>
<div class="form-group">
<div>
<button type="submit" class="btn btn-default">Login</button>
</div>
</div>
</form>
Is there any way to place the labels closer together to the controls using horizontal forms with the below code?
I've been experimenting with "pull-left", "pull-right", "nopadding" on different controls, but just can't seem to move them together more closely.
<div class="page-header">
<h1>sample</h1>
</div>
<div class="container nopadding">
<div class="row">
<div class="form-group nopadding">
<label for="recordId" class="col-sm-2 control-label">Record Id</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="recordId" placeholder="Record Id">
</div>
</div>
<div class="form-group nopadding">
<label for="id" class="col-sm-2 control-label">Id</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="id" placeholder="Password">
</div>
</div>
<div class="form-group nopadding">
<label for="familyName" class="col-sm-2 control-label">Family Name</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="familyName" placeholder="Family Name" maxlength="30">
</div>
</div>
</div>
</div>
I think this is what you want.
FIDDLE
You can reduce the space between the labels and the inputs by adding a negative margin to the labels.
CSS:
label {
margin-right: -20px;
}
HTML:
<div class="page-header">
<h1>sample</h1>
</div>
<div class="container nopadding">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="recordId" class="col-sm-2 control-label">Record Id</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="recordId" placeholder="Record Id"></input>
</div>
</div>
<div class="form-group">
<label for="id" class="col-sm-2 control-label">Id</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="id" placeholder="Password"></input>
</div>
</div>
<div class="form-group">
<label for="familyName" class="col-sm-2 control-label">Family Name</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="familyName" placeholder="Family Name" maxlength="30"></input>
</div>
</div>
</form>
</div>
Also, not sure why you had a div with class row on there. Should be a form tag. I've adjusted that in the HTML for my answer and Fiddle.
The width of the label is determined by the col-sm-2 classes attached to them. You could modify this to be col-sm-1 instead, but this could cause problems on smaller devices.
Though bootstrap recommends doing the horizontal forms similarly to the way you do them (see here), I don't feel like this approach allows for much flexibility in spacing.
Personally, I'd change the form to behave like this. Because you're declaring the widths yourself in the CSS, you can customize spacing as you wish. This may not collapse down well, but if you wish you can write further CSS to handle low-resolutions.
I want a form to have three controls in each row. But the width of the control in every row is different(less to be exact). Must I always use columns? Is that regular behaviour of css? Sometimes the css feels like a labyrinth to me
Here's what I have so far:
bootply
<form action="" method="post" role="form" class="form-inline">
<div class="container">
<div class="row">
<div class="form-group">
<label for="id_firstname">First Name</label>
<input type="text" name="firstname" class="form-control" id="id_firstname">
</div>
<div class="form-group">
<label for="id_middlename">Middle Name</label>
<input type="text" name="middlename" class="form-control" id="id_middlename">
</div>
<div class="form-group">
<label for="id_lastname">Last Name</label>
<input type="text" name="lastname" class="form-control" id="id_lastname">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="form-group">
<label for="id_address">Address</label>
<input type="text" name="address" class="form-control" id="id_address">
</div>
<div class="form-group">
<label for="id_postalcode">Postal Code</label>
<input type="text" name="postalcode" class="form-control" id="id_postalcode">
</div>
<div class="form-group">
<label for="id_city">City</label>
<input type="text" name="city" class="form-control" id="id_city">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="form-group">
<label for="id_telephone">PHone</label>
<input type="text" name="phone" class="form-control" id="id_telephone">
</div>
<div class="form-group">
<label for="id_mobile">Mobile</label>
<input type="text" name="mobile" class="form-control" id="id_mobile">
</div>
<div class="form-group">
<label for="id_email">E-mail</label>
<input type="text" name="email" class="form-control" id="id_email">
</div>
</div>
</div>
</form>
Sorry thought you only wanted the link. I also wrapped every .form-group with .col-md-4 but still the width of the inputs differ from each other
From Bootstrap Documentation on Inline Forms
Requires custom widths: Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.
Just apply the following css if you want all the inputs to be the same size
.form-group {
width: 300px;
}
.form-group input {
width: 300px;
}
bootply with css
OR fix the width of each of your form groups by adding col-md-4 class to each group like this:
<div class="form-group col-md-4">
<label for="id_telephone">Phone</label>
<input type="text" name="phone" class="form-control" id="id_telephone">
</div>
bootply with classes
How to vertically align label and input in Bootstrap 3? I would like both the label and input on same line. I have played around with different classes and custom CSS but nothing seems to work.
The JSfiddle
<div class="form-group">
<div class="row">
<div class="col-xs-3">
<label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
</div>
<div class="col-xs-2">
<select name="class_type" id="class_type" class=" form-control input-lg" style="width:200px" autocomplete="off">
<option >Economy</option>
<option >Premium Economy</option>
<option >Club World</option>
<option >First Class</option>
</select>
</div>
</div>
</div>
The bootstrap 3 docs for horizontal forms let you use the .form-horizontal class to make your form labels and inputs vertically aligned. The structure for these forms is:
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="input1" class="col-lg-2 control-label">Label1</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="input1" placeholder="Input1">
</div>
</div>
<div class="form-group">
<label for="input2" class="col-lg-2 control-label">Label2</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="input2" placeholder="Input2">
</div>
</div>
</form>
Therefore, your form should look like this:
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-xs-3">
<label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
</div>
<div class="col-xs-2">
<select id="class_type" class="form-control input-lg" autocomplete="off">
<option>Economy</option>
<option>Premium Economy</option>
<option>Club World</option>
<option>First Class</option>
</select>
</div>
</div>
</form>
When input-lg is used, margins mismatch unless you use form-group-lg in addition to form-group class.
Its example is in docs:
<form class="form-horizontal">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
</div>
</div>
</form>
None of these solutions worked for me. But I was able to get vertical centering by using <div class="form-row align-items-center"> for each form row, per the Bootstrap examples.
The problem is that your <label> is inside of an <h2> tag, and header tags have a margin set by the default stylesheet.
This works perfectly for me in Bootstrap 4.
<div class="form-row align-items-center">
<div class="col-md-2">
<label for="FirstName" style="margin-bottom:0rem !important;">First Name</label>
</div>
<div class="col-md-10">
<input type="text" id="FirstName" name="FirstName" class="form-control" val=""/>
/div>
</div>