I have been trying to use horizontal form layout like below:
Enter Email: [field] Enter password: [prepend+field]
I've been trying for an hour but couldn't find any solution. Please tell how I can do that.
I have tried:
<form class="form-horizontal">
<!--<span class="offset2">Sign Into the Email</span>-->
<div class="control-group">
<div class="controls"><span>Welcome to My Email</span></div>
</div>
<div class="control-group input-append">
<label for="emailid" class="control-label">Email id</label>
<div class="controls">
<input type="text" />
<span class="add-on">#</span>
</div>
</div>
<div class="control-group input-append">
<label for="passwd" class="control-label">Password</label>
<div class="controls">
<input type="password" />
<span class="add-on">***</span>
</div>
</div>
<div class="control-group">
<div class="controls" >
<label class="checkbox">
<input type="checkbox" />Remember Me
</label>
<button class="btn">Sign In</button>
</div>
</div>
</form>
You're looking for the form-inline class.
you can use this css to add spacing between the form groups:
.form-inline .form-group {
margin-right: 10px;
}
Related
<div class="row">
<div class="container">
<div class="col-md-4 col-md-offset-4">
<div class="login-wrapper">
<div class="login-head">
<h3 class="text-center"> Log in </h3>
</div>
<form>
<div class="form-group">
<label for="email" class="sr-only"> Email </label>
<input type="text" placeholder="email here" class="form-control">
</div>
<div class="form-group">
<label for="email" class="sr-only"> Password </label>
<input type="text" placeholder="Password here" class="form-control">
</div>
<button type="button" class="btn btn-danger center-block"> Login </button>
</form>
</div>
</div>
</div>
</div>
After this code i got scroll bar in my browser so i inspect and found that if i make change
.row { margin-right: 0;}
it is just fine. It is nothing to do with my css i removed my css and tried. so should i change the value of .row all the time which is provided by bootstrap? default value is
.row{margin-right: -15px;}
EDIT: Code is formatted like code now
As mentioned in Bootstrap docs, container should be a top level wrapping class, which should contain class row. You've swapped these classes. I think this is the reason of issue.
First rule of bootstrap introduction says:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
Code should look:
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="login-wrapper">
<div class="login-head">
<h3 class="text-center"> Log in </h3>
</div>
<form>
<div class="form-group">
<label for="email" class="sr-only"> Email </label>
<input type="text" placeholder="email here" class="form-control">
</div>
<div class="form-group">
<label for="email" class="sr-only"> Password </label>
<input type="text" placeholder="Password here" class="form-control">
</div>
<button type="button" class="btn btn-danger center-block"> Login </button>
</form>
</div>
</div>
</div>
</div>
I use horizontal form and custom errors:
<div class="form-horizontal">
<form name="ctrl.myForm" ng-submit="ctrl.save()">
<div class="form-group col-sm-12 text-center">
<color-picker selected="ctrl.selectedColor"></color-picker>
</div>
<div class="form-group has-error">
<label for="logName" class="col-sm-3 control-label">Log Name</label>
<div class="col-sm-9">
<label ng-show="ctrl.logNameHasError" class="control-label" for="logName">
<i class="fa fa-times-circle-o"></i> Input with error
</label>
<input type="text" ng-model="ctrl.logName" class="form-control" id="logName"
placeholder="Enter a new log name" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="ctrl.isDailyDigestEmail"> Daily Digest Email
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="ctrl.isNewErrorEmail"> New Error Email
</label>
</div>
</div>
</div>
</form>
Open DEMO please and you will see that Log Name field has wrong alignment. How to center it?
Make output window in JSBIN as 768px minimum to see what I mean.
Use can add css when .has-error class is exists:
.form-group.has-error .col-sm-3.control-label {
padding-top: 34px;
}
I have created a form for online admissions using the Bootstrap framework. I am having a problem with putting two input fields in separate columns; those two fields are not adjusted according to the other fields' width. Here is my form code and also image of this problem:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form method="post" action="">
<h3>Personal Information</h3>
<div class="form-group">
<span>Name</span>
<span><input type="username" class="form-control" id="userName"></span>
</div>
<div class="form-group">
<span>Father Name</span>
<span><input type="username" class="form-control" id="userName"></span>
</div>
<div class="form-group">
<div class="col-xs-6">
<span>Nationality</span>
<span><input type="username" class="form-control" id="userName"></span>
</div>
<div class="col-xs-6">
<span>Region</span>
<span><input type="username" class="form-control" id="userName"></span>
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<span>Date of Birth</span>
<span><input type="username" class="form-control" id="userName"></span>
</div>
<div class="col-xs-6">
<span>Place of Birth</span>
<span><input type="username" class="form-control" id="userName"></span>
</div>
<h3></h3>
</div>
<div class="form-group">
<span>Permanent Home Address</span>
<span><input type="username" class="form-control" id="userName"></span>
</div>
<div class="form-group">
<span>e-mail</span>
<span><input type="email" class="form-control" id="inputEmail3"></span>
</div>
<div>
<label class="fa-btn btn-1 btn-1e"><input type="submit" value="submit us"></label>
</div>
</form>
Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form (which doesn't have to be a ). Doing so changes .form-groups to behave as grid rows, so no need for .row.
HTML
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</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">Sign in</button>
</div>
</div>
</form>
To be using the boostrap form grid system correctly, you just need to warp the content of your first two inputs in a .col-xs-12 class.
Like this:
<div class="form-group">
<div class="col-xs-12">
<span>Name</span>
<span><input type="username" class="form-control" id="userName">
</span>
</div>
</div>
col-xs-6 is adding the padding. You can wrap your groups in col-xs-12, or add a col-xs-12 to each form group which should be full width.
Here is my plunker
Working demo
Wrap the form-groups in a <div class="row"></div>. This will remove the padding added by the col-xs-6 classes.
I have the current setup.
<div class="container" data-ng-controller="publicHome">
<div class="col-md-4 col-md-offset-4" style="background: black;">
<form data-ng-submit="signIn()" class="form-horizontal">
<div class="form-group">
<input type="email" data-ng-model="email" placeholder="email" class="form-control">
</div>
<div class="form-group">
<input type="password" data-ng-model="password" placeholder="password" class="form-control">
</div>
<label class="checkbox pull-right">
remember me
<input type="checkbox" data-ng-model="rememberMe">
</label>
<div class="form-group center-block">
<button type="submit" class="btn btn-success center-block">sign in</button>
</div>
</form>
<div data-ng-bind="message" class="text-center">
</div>
</div>
</div>
I am trying to:
Get the check box on the right side of the remember me text AND have both of the right side of the form
Have the button on it's own row underneath the remember me
As you can see I'm nearly there!
Use:
<div class="form-group mycheckboxdiv">
<label>
remember me
<input type="checkbox" data-ng-model="rememberMe" class="pull-right mycheckbox">
</label>
</div>
and for your own css:
.mycheckbox{
margin-top:5px;
margin-left:5px;
}
.mycheckboxdiv{
text-align:right;
}
See this:
http://www.bootply.com/a6Jl6EDD8R
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" />
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label><input type="file" id="exampleInputFile" />
<p class="help-block">
Example block-level help text here.
</p>
</div>
<div class="checkbox">
<label><input type="checkbox" /> Check me out</label>
</div> <button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
I am using bootstrap.
And I want to align the form in the middle of this div col-md-12 column.
Any solutions for this?
Demo http://bootply.com/103569
Could use an offset like:
<div class="container">
<div class="row clearfix">
<div class="col-md-6 col-md-offset-3 column">
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" />
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label><input type="file" id="exampleInputFile" />
<p class="help-block">
Example block-level help text here.
</p>
</div>
<div class="checkbox">
<label><input type="checkbox" /> Check me out</label>
</div> <button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
</div>
</div>
</div>
or
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<div class="col-md-6 col-md-offset-3 column">
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" />
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label><input type="file" id="exampleInputFile" />
<p class="help-block">
Example block-level help text here.
</p>
</div>
<div class="checkbox">
<label><input type="checkbox" /> Check me out</label>
</div> <button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
</div>
http://getbootstrap.com/css/#grid-offsetting
You can have two solutions here with the property display.
One with inline-block:
.col-md-12 column {
text-align:center;
}
.col-md-12 column form {
display:inline-block;
}
Two with table :
.col-md-12 column form {
display:table;
margin:auto;
}
If you have a fixed width for the form you only need to add the margin:auto
Give your form a class
<form role="form" class="myForm">
and add the following style to it
.myForm
{
width: 480px;
margin-left: auto;
margin-right: auto;
}
http://bootply.com/103575
I would try adding
class="center"
to
<form role="form">
ending up with
<form role="form" class="center">
and creating the style declaration:
.center{margin:0px auto;}
keeping in mind that .center must have a set width that is less than the width of it's container.
Hope that helps.