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>
Related
I was looking up this style on bootswatch: https://bootswatch.com/simplex/
And especially looked for styling forms, like here:
But when I add the code that you get when clicking on the little red icon in the top right of the form example on bootswatch to my website, it looks like this:
So the text labels and input fields have a line break inbetween them, the a little darker shaded background box isnt shown and other things are misaligned, too. How does that come?
This is the entire code of my Page:
#model WebProto.ViewModels.NewChartConfigViewModel
#using MaschinenModell;
#{
ViewBag.Title = "Neues Diagramm";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<form class="form-horizontal">
<fieldset>
<legend>Legend</legend>
<div class="form-group">
<label for="inputEmail" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-lg-2 control-label">Password</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
<div class="checkbox">
<label>
<input type="checkbox"> Checkbox
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="textArea" class="col-lg-2 control-label">Textarea</label>
<div class="col-lg-10">
<textarea class="form-control" rows="3" id="textArea"></textarea>
<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">Radios</label>
<div class="col-lg-10">
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
Option one is this
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="select" class="col-lg-2 control-label">Selects</label>
<div class="col-lg-10">
<select class="form-control" id="select">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<br>
<select multiple="" class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button type="reset" class="btn btn-default">Cancel</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</fieldset>
</form>
Okay im so flipping stupid. Its because I displayed the webpage I created in internet explorer. My fault! :D
Firefox, Opera and Chrome show it correctly.
https://jsfiddle.net/w0bekp8q/
<form class="form" role="form" method="post" action="">
<div class="form-group">
<div class="col-md-4">
<label for="reportee_first_name" class="control-label">First Name</label>
<input type="text" class="form-control" id="reportee_first_name" name="reportee_first_name" placeholder="First Name" value="">
</div>
<div class="col-md-4">
<label for="reportee_middle_name" class="control-label">Middle Name</label>
<input type="text" class="form-control" id="reportee_middle_name" name="reportee_middle_name" placeholder="Middle Name" value="">
</div>
<div class="col-md-4">
<label for="reportee_last_name" class="control-label">Last Name</label>
<input type="text" class="form-control" id="reportee_last_name" name="reportee_last_name" placeholder="Last Name" value="">
</div>
</div>
<div class="form-group">
<div class="col-md-6">
<label for="reportee_address_1" class="control-label">Address</label>
<input type="text" class="form-control" id="reportee_address_1" name="reportee_address_1" placeholder="Address" value="">
</div>
<div class="col-md-6">
<label for="reportee_address_2" class="control-label">Address 2</label>
<input type="text" class="form-control" id="reportee_address_2" name="reportee_address_2" placeholder="Address 2" value="">
</div>
</div>
<div class="form-group">
<div class="col-md-6">
<label for="reportee_city" class="control-label">City</label>
<input type="text" class="form-control" id="reportee_city" name="reportee_city" placeholder="City" value="">
</div>
<div class="col-md-6">
<label for="reportee_zip" class="control-label">Zip</label>
<input type="text" class="form-control" id="reportee_zip" name="reportee_zip" placeholder="Zip" value="">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<label for="reportee_phone" class="control-label">Phone</label>
<input type="text" class="form-control" id="reportee_phone" name="reportee_phone" placeholder="Phone" value="">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<label for="reportee_email" class="control-label">Email Address</label>
<input type="email" class="form-control" id="reportee_email" name="reportee_email" placeholder="Email Address" value="">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<button id="submit" name="submit" type="submit" class="btn btn-primary btn-sm">Send</button>
</div>
</div>
</form>
In my above JSFIDDLE, if you drag it out, you can see that my submit button butts up against the Email Address Input Box.
This is how it looks on my dev site -
What am I missing here that causes my submit button to not have space between it and the input?
just change the form class to form-horizontal:
<form class="form" role="form" method="post" action="">
to
<form class="form-horizontal" role="form" method="post" action="">
EDIT:
when you use form class all col-md-* classes you used inside form-group will get a float: left; in large screens which causes the form-group doesn't take it's children height. so it goes to top of the root element, so the margin-bottom of the form-group will not apply exactly on above of your button and instead on top of the root element. using form-horizontal prevents that behaviour.
I don't know why but your .form-group is losing it's height from bootstraps md view port width and large. There is a few things you can do. You can apply you margin-bottom to the inner div, with the col-md-12, instead of .form-group.
.col-md-12 {
margin-bottom: 15px;
}
You can also try using col-xs-12, instead of md. Then you have consistent styles and can add the needed margins without any #media.
<div class="form-group">
<div class="col-xs-12">
.....
</div>
</div>
Edit: Adam pointed out the redundant bootstrap classes.
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 have troubles with creating a "form-horizontal" with bootstrap.
http://jsfiddle.net/frauger/jo0b6yod/
As you can see in the jsfiddle the label "date of birth" is not correctly aligned above the "date of birth select"
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-xs-2 control-label">Name</label>
<div class="col-xs-10">
<input type="text" class="form-control col-sm-10" name="name" placeholder="name"/>
</div>
</div>
<div class="form-group">
<label for="birthday" class="col-xs-3 col-sm-2 control-label">Birthday</label>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="year"/>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="month"/>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="day"/>
</div>
</div>
Thanks
Wrap all of your existing select divs in a new container div that has the form-group class.
<div class="form-group">
<div class="col-xs-4">
<select type="text" class="form-control" id="field-day" required>
<option>DD</option>
</select>
</div>
<div class="col-xs-4">
<select type="text" class="form-control" id="field-month" required>
<option>MM</option>
</select>
</div>
<div class="col-xs-4">
<select type="text" class="form-control" id="field-year" required>
<option>YYY</option>
</select>
</div>
</div>
working fiddle:
http://jsfiddle.net/jo0b6yod/2/
Include the label within div tag, that should make the label within a block level, and takes of 100% of its parent.
ex:
<div class="form-group">
<div><label for="birthday" class="col-xs-3 col-sm-2 control-label">Birthday</label></div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="year"/>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="month"/>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="day"/>
</div>
</div>
<div class="control-group">
<label for="name" class="control-label"><p class="text-info">Name <i class="icon-star"></i></p></label>
<div class="controls">
<input type="text" id="name" placeholder="Enter your name" class="span3">
</div>
this is not working for me, I dont wanna use 'form-horizontal' class or a table for this. I have tried with row and row-fluid class but its not working.
You can wrap your code with <div class="form-horizontal">. You don't need to have a form to use form-horizontal.
Example:
<div class="form-horizontal">
<div class="control-group row-fluid form-inline">
<label for="name" class="control-label"><p class="text-info">Name <i class="icon-star"></i></p></label>
<div class="controls">
<input type="text" id="name" placeholder="Enter your name" class="span3">
</div>
</div>
</div>
You want horizontal form layout. This can be achieved by wrappping your code between a div having class as form-horizontal.
<div class="form-horizontal">
<div class="control-group">
<label for="name" class="control-label"><p class="text-info">Name <i class="icon-star"></i></p></label>
<div class="controls">
<input type="text" id="name" placeholder="Enter your name" class="span3">
</div>
</div>
To learn more click here