I am trying to align the html elements in my page in a single line.
Demo:
http://plnkr.co/edit/ulLyUxj9C9PxxvpTnm3N?p=preview
In the demo plunker, when clicked 'Launch the window in separate window' icon on right hand side, a separate window is opened which shows the form elements(not aligned in a single line).
I want the two text elements and the submit buttons to be on the same line, but with the demo code, submit and reset buttons are not aligned with the
text fields.
Below is the sample code:
<div class="col-sm-10">
<div class="">
<div class="row"><div class="form-group col-md-2">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email" style="width:130px">
</div>
<div class="form-group col-md-2">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd" style="width:130px">
</div>
<button type="submit" class="btn-primary">Submit</button>
<button type="submit" class="btn-primary">Reset</button>
</div>
</div>
</div>
</div>
You can solve this by adding a class="form-inline" to your row div, like:
<div class="col-sm-10">
<div class="form-inline">
<div class="row"><div class="form-group col-md-2">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email" style="width:130px">
</div>
<div class="form-group col-md-2">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd" style="width:130px">
</div>
<button type="submit" class="btn-primary">Submit</button>
<button type="submit" class="btn-primary">Reset</button>
</div>
Plunkr: http://next.plnkr.co/edit/ddVOoneUlEUSM2EO
I did a few things here:
Added the btn class to your buttons so they would have the same height as the text fields.
I added an empty label that only shows at the medium breakpoint or greater to fill out vertical space.
Wrapped buttons in their own div (since labels are inline)
Wrapped the empty label and new div in their own div.form-group.col
<div>
<div class="col-sm-10">
<div class="">
<div class="row">
<div class="form-group col-md-2">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email" style="width:130px">
</div>
<div class="form-group col-md-2">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd" style="width:130px">
</div>
<div class="form-group col">
<label class="visible-md visible-lg"> </label>
<div>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="submit" class="btn btn-primary">Reset</button>
</div>
</div>
</div>
</div>
</div>
</div>
Add bootstraps form-control class to the two buttons and add some margin between the two buttons to make it looks a bit aesthetic.
<button type="submit" class="btn-primary form-control">Submit</button>
<button type="submit" class="btn-primary form-control">Reset</button>
Its just the bootstrap grid class issue.
Make sure You wrap the col's ( ie. <div class="col-md-2"> ) with the row class.
Please see the div structured given below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="form-group col-md-2">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email" style="width:130px">
</div>
<div class="form-group col-md-2">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd" style="width:130px">
</div>
<div class="form-group col-md-2">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="submit" class="btn btn-primary">Reset</button>
</div>
</div>
</div>
</body>
</html>
<div class="col-md-12">
<div class="row">
<div class="form-group col-md-2"><label for="email">Email:</label></div>
<div class="form-group col-md-10"><input type="email" class="form-control" id="email" placeholder="Enter email" name="email" style="width:130px"></div>
</div>
<div class="row">
<div class="form-group col-md-2"><label for="pwd">Password:</label></div>
<div class="form-group col-md-10"><input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd" style="width:130px"></div>
</div>
<div class="row">
<div class="form-group col-md-2"></div>
<div class="form-group col-md-10"><button type="submit" class="btn-primary">Submit</button> <button type="submit" class="btn-primary">Reset</button></div>
</div>
</div>
Related
In the following Bootstrap Horizontal form if I want to add a caption right below Order label as <small class="text-muted">Must be at least 200</small> where do I place it? NOTE: Question is related to how to place a muted caption in small muted font right underneath a Bootstrap horizontal form's label. I know the role of placeholder attribute but in actual app I do need to place such a caption underneath a form's label.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h2>Horizontal form</h2>
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox" name="remember"> 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">Submit</button>
</div>
</div>
</form>
</div>
You can put wrap the <label> with a new div, move the col-sm-2 to that div and add the small element inside:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h2>Horizontal form</h2>
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<div class="col-sm-2">
<label class="control-label" for="email">Email:</label><br />
<small class="text-muted">Must be at least 200</small>
</div>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
</div>
<div class="form-group">
<div class="col-sm-2">
<label class="control-label" for="pwd">Password:</label><br />
<small class="text-muted">Must be at least 200</small>
</div>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox" name="remember"> 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">Submit</button>
</div>
</div>
</form>
</div>
Open in Full page to see the actual result
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 an interesting problem here.
I have two forms on the same page, the exact same code copy and pasted. Each form has a hidden input to identify the form on the backend, and each form has an <input type="submit"> for submission.
The only difference between the two is that the first form has one less <input type="text">.
The problem is that the form with 3 <input type="text"> fields is centered while the form with 2 <input type="text"> is not. When I add a third <input type="text"> the form is centered.
It seems as if the form has has to have a certain amount of inputs for it to center.
Here is a JSFiddle
Make sure to stretch your browser so you can see the whitespace on the right side of the top form.
And my HTML...
<div class="content-area">
<div class="row">
<div class="col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-12 text-center">
<div class="huge">Change Email</div>
<form id="changeEmailForm" method="post" action="/resources/submit.php">
<div class="input-group text-center">
<input type="hidden" name="changeEmail"> <!-- Hidden input to identify the form -->
<input class="form-control input-lg" id="newEmail" name="newEmail" minlength="2" type="text" required placeholder="New Email">
<input class="form-control input-lg" id="confirmEmail" name="confirmEmail" minlength="2" type="text" required placeholder="Confirm Email">
<input class="btn btn-large btn-success" type="submit">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-12 text-center">
<div class="huge">Change Password</div>
<form id="changePasswordForm" method="post" action="/resources/submit.php">
<div class="input-group text-center">
<input type="hidden" name="changePassword"> <!-- Hidden input to identify the form -->
<input class="form-control input-lg" id="currentPassword" name="currentPassword" minlength="2" type="text" required placeholder="Current Password">
<input class="form-control input-lg" id="newPassword" name="newPassword" minlength="2" type="text" required placeholder="New Password">
<input class="form-control input-lg" id="confirmPassword" name="confirmPassword" minlength="2" type="text" required placeholder="Confirm Password">
<input class="btn btn-large btn-success" type="submit">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here is an updated Fiddle
Changing your text-center to center-block will center the element. I added it to the second because it wasn't a true center either.
<div class="content-area">
<div class="row">
<div class="col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-12 text-center">
<div class="huge">Change Email</div>
<form id="changeEmailForm" method="post" action="/resources/submit.php">
<div class="input-group center-block">
<input type="hidden" name="changeEmail">
<!-- Hidden input to identify the form -->
<!--<input class="form-control input-lg" id="newEmail" name="newEmail" minlength="2" type="text" required placeholder="New Email">-->
<input class="form-control input-lg" id="newEmail" name="newEmail" minlength="2" type="text" required placeholder="New Email">
<input class="form-control input-lg" id="confirmEmail" name="confirmEmail" minlength="2" type="text" required placeholder="Confirm Email">
<input class="btn btn-large btn-success" type="submit">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-12 text-center">
<div class="huge">Change Password</div>
<form id="changePasswordForm" method="post" action="/resources/submit.php">
<div class="input-group center-block">
<input type="hidden" name="changePassword">
<!-- Hidden input to identify the form -->
<input class="form-control input-lg" id="currentPassword" name="currentPassword" minlength="2" type="text" required placeholder="Current Password">
<input class="form-control input-lg" id="newPassword" name="newPassword" minlength="2" type="text" required placeholder="New Password">
<input class="form-control input-lg" id="confirmPassword" name="confirmPassword" minlength="2" type="text" required placeholder="Confirm Password">
<input class="btn btn-large btn-success" type="submit">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I'm attempting to produce this form with Bootstrap 3:
I'm having trouble making First Name and Last Name inline AND making them together take up the same width as the other fields. Currently I have the following
<form role="form" class="form-horizontal">
<h4>Administrator</h4>
<div class="form-group">
<div class="col-sm-6 col-md-6">
<input type="text" class="form-control" placeholder="First Name" />
</div>
</div>
<div class="form-group">
<div class="col-sm-6 col-md-6">
<input type="text" class="form-control" placeholder="Last Name" />
</div>
</div>
<div class="form-group">
<div class="col-sm-6 col-md-6">
<input type="text" class="form-control"placeholder="Email Address" />
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-default">Cancel</button>
</form>
which outputs a simple form with no inlining. Any ideas how to adjust this to look like in the picture? Here is a jsfiddle: http://jsfiddle.net/gJdyb/1/
Here's a jsFiddle. Use class row on the form-group you'd like to inline:
Administrator
<div class="form-group">
<div class="col-md-12">
<div class="form-group row">
<div class="col-md-6">
<input type="text" class="form-control" placeholder="First Name" />
</div>
<div class="col-md-6">
<input type="text" class="form-control" placeholder="Last Name" />
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="text" class="form-control"placeholder="Email Address" />
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-default">Cancel</button>
Try this one
<form role="form" class="form-horizontal">
<h4>Administrator</h4>
<div class="form-group row">
<div class="col-xs-6 col-md-6">
<input type="text" class="form-control" placeholder="First Name" />
</div>
<div class="col-xs-6 col-md-6">
<input type="text" class="form-control" placeholder="Last Name" />
</div>
</div>
<div class="Form-group">
<input type="text" class="form-control"placeholder="Email Address" />
</div>
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-default">Cancel</button>
</form>
http://jsfiddle.net/gJdyb/4/
it use the col-xs-6.. it is us
read this for documentation of grid system of bootstrap
http://getbootstrap.com/css/#grid
I want to align TextBox which will be used as Searchbox and button.
Problem is when I use inline form class on div the textbox is loosing its width.
<div class="col-lg-6">
<input type="text" id="test" name="city" class="form-control input-lg" placeholder="E.g. Manchester">
<div class="form-inline">
<div class="form-group ">
<input type="text" id="city" name="city" class="form-control input-lg" placeholder="E.g. Manchester">
<input type="button" value="Search" class="form-control btn-lg"/>
</div>
</div>
</div>
what I'm missing here..
here is a good solution for you:
Screenshot:
Code:
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="E.g. Manchester" />
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="E.g. Manchester" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">Search</button>
</span>
</div>
Result:
http://jsfiddle.net/j9EdZ/
You might be best using the col-md-* values here, e.g.:
<div class='col-lg-6'>
<form class='form'>
<div class='row'>
<div class='form-group'>
<div class='col-md-10'>
<input class='form-control input-lg' type='text' placeholder='E.g. Manchester'>
</div>
<div class='col-md-2'>
<input type='button' class='form-control btn btn-block' value='Search'>
</div>
</div>
</div>
</form>
</div>
Text-box is not loosing its width you can check here.
CODE : http://jsfiddle.net/Jaysinh/awYm3/
As per the Bootstrap documentation of Form you have to set the width of the element. Default is 100 % wide.
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.
Here, check this out.
Demo
HTML
<div class="col-lg-6">
<form class="form-horizontal" role="form">
<div class="form-group">
<input type="text" id="test" name="city" class="form-control input-lg" placeholder="E.g. Manchester" />
</div>
<div class="form-inline">
<div class="form-group ">
<input type="text" id="city" name="city" class="form-control input-lg" placeholder="E.g. Manchester" />
<input type="button" value="Search" class=" btn btn-lg btn-default" />
</div>
<div class="form-group "></div>
</div>
</form>
</div>