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>
Related
I've changed something, somewhere and now col-sm-offset-*s aren't working at all. For example, if I wanted to split the screen in half, and display content only on the right hand side, I would usually use:
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-6">
This content isn't on the right hand side, it's on the left as if the col-sm-offset-6 isn't even there.
</div>
</div>
</div>
How can I check what's wrong?
I'm using NPM and Laravel Elixir (gulp) to minify (make production ready) the files and short of me copying the entire CSS file here, I don't know what else to do. Is there anything obvious? Has anyone come across this before?
Update
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-6">
<div class="row">
<form role="form" method="POST" action="/register">
<input type="hidden" name="_token" value="abcdefghij">
<div class="col-xs-12">
<fieldset class="form-group">
<label for="username" class="form-control-label">Username</label>
<input name="username" type="text" class="form-control " id="username" placeholder="Enter a username" value="j">
</fieldset>
</div>
<div class="col-sm-6">
<fieldset class="form-group">
<label for="first_name" class="form-control-label">First Name</label>
<input name="first_name" type="text" class="form-control " id="first_name" placeholder="Enter your first name" value="John">
</fieldset>
</div>
<div class="col-sm-6">
<fieldset class="form-group">
<label for="last_name" class="form-control-label">Last Name</label>
<input name="last_name" type="text" class="form-control " id="last_name" placeholder="Enter your last name" value="Appleseed">
</fieldset>
</div>
<div class="col-sm-6">
<fieldset class="form-group">
<label for="email" class="form-control-label">Email Address</label>
<input name="email" type="email" class="form-control " id="email" placeholder="Enter your email address" value="j#a.com">
</fieldset>
</div>
<div class="col-sm-6">
<fieldset class="form-group">
<label for="password" class="form-control-label">Password</label>
<input name="password" type="password" class="form-control " id="password" placeholder="Enter a password" value="password">
</fieldset>
</div>
<div class="col-sm-6">
<fieldset class="form-group">
<label for="password_confirmation" class="form-control-label">Confirm Password</label>
<input name="password_confirmation" type="password" class="form-control " id="password_confirmation" placeholder="Please confirm your password" value="password">
</fieldset>
</div>
<div class="col-sm-6">
<div class="form-group">
<button type="submit" class="btn btn-primary pull-right">Register</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Web Inspector
CSS Computed Properties
Update 2
I've submitted an issue on GitHub as this may have been intentional.
The current correct offset class for Bootstrap v4 Alpha:
class="col-md-6 offset-md-3"
GitHub have officially changed their col-bp-offset-* names although the documentation is currently outdated.
See issues: #19099, #19368, #19267, and my own #19562.
I'll close the question and update my GitHub issue too.
I'm having trouble styling the following form using Twitter Bootstrap 2.3.2
I can't seem to right-align the button with the other labels. Also, I can't get the last textbox to be in line with the button.
This is the form I have so far: JSFiddle example
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputFirstname">First name</label>
<div class="controls">
<input type="text" id="inputFirstname" placeholder="First name">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputSurname">Surname</label>
<div class="controls">
<input type="text" id="inputSurname" placeholder="Surname">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="control-group">
<button class="btn btn-primary">Browse</button>
<div class="controls">
<input type="text" id="inputSomeText" placeholder="Some text">
</div>
</div>
This is the end result which I trying to achieve:
Any help is greatly appreciated!!
Change your last control-group and also add margin-top:-5px; to the button (shown below via class label-btn):
HTML for last control-group:
<div class="control-group">
<label class="control-label"><button class="btn btn-primary inline label-btn">Browse</button></label>
<div class="controls">
<input type="text" id="inputSomeText" placeholder="Some text">
</div>
</div>
CSS
.label-btn {
margin-top: -5px;
}
Updated fiddle
Change last control-group to this
<div class="control-group">
<label class="control-label">
<button class="btn btn-primary inline">Browse</button>
</label>
<div class="controls">
<input type="text" id="inputSomeText" placeholder="Some text">
</div>
</div>
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>
<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
What is the proper way to mark up help-inline or help-block for a radio or chechbox field?
This is not displaying as I would expect it to:
<div class="control-group">
<div class="controls">
<label class="radio" for="foo">
<input type="radio" name="foobar" value="foo" id="foo">
Foo label
</label>
<span class="help-inline">Foo inline help</span>
</div>
</div>
EDIT 1:
Follow up question: how do I mark up the second radio option? Wrapped in another div.controls?
See Simbirsk's answer - helped me:
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputType">Type</label>
<div class="controls">
<input type="text" id="inputType" placeholder="Type">
</div>
</div>
<div class="control-group">
<span class="control-label">Metadata</span>
<div class="controls form-inline">
<label for="inputKey">Key</label>
<input type="text" class="input-small" placeholder="Key" id="inputKey">
<label for="inputValue">Value</label>
<input type="password" class="input-small" placeholder="Value" id="inputValue">
</div>
</div>
</form>
Note that I'm using .form-inline to get the propper styling inside a .controls.
You can test it on this jsfiddle
It would be nice to also write what do you actually expect. I'll have to guess on your expectations here and propose the following solution:
<div class="control-group">
<div class="controls">
<label class="radio" for="foo">
<input id="IsActivated" name="IsActivated" type="radio" value="true">
Is Activated
<span class="help-inline">Foo inline help</span>
</label>
</div>
</div>
We implemented it as follows:
<div class="control-group">
<label class="control-label" for="foo">Foo label</label>
<div class="controls">
<label class="checkbox">
<input id="foo" name="foo" type="radio">
Foo message
</label>
</div>
</div>