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
Related
I am new in Bootstrap 4 and need some help. I want that my first two inputfiels are at the same line (horizontal) and not among themselves. Like this:
enter image description here
Here is my HTML code:
<div class="container">
<div class="row">
<div class="form-group col-md-6 offset-md-3">
<input class="form-control transparent-input" type="text" name="name" placeholder="Name" required>
</div>
<div class="form-group col-md-6 offset-md-3">
<input class="form-control transparent-input" type="text" name="surname" placeholder="Vorname" required>
</div>
<div class="form-group col-md-6 offset-md-3">
<textarea class="form-control transparent-input" cols="20" rows="10" placeholder="Enter your message"></textarea>
</div>
</div>
<div class="row">
<div class="form-group col-md-6 offset-md-3">
<button type="button" class="btn btn-primary">Send</button>
<!--<button type="submit" class="btn btn-default">Send invitation</button>-->
</div>
</div>
</div>
Can somebody help me out?
Please try this way. I hope you will get your desired style.
<div class="container">
<div class="row">
<div class="form-group col-md-6">
<input class="form-control transparent-input" type="text" name="name" placeholder="Name" required>
</div>
<div class="form-group col-md-6">
<input class="form-control transparent-input" type="text" name="surname" placeholder="Vorname" required>
</div>
<div class="form-group col-md-12">
<textarea class="form-control transparent-input" cols="20" rows="10" placeholder="Enter your message"></textarea>
</div>
<div class="form-group col-md-12">
<button type="button" class="btn btn-primary">Send</button>
</div>
</div>
</div>
I'm trying to have a col-md-4 inside a col-md-12, but it is not working.
HTML:
<form role="form" action="" method="post">
<div class="row">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<h3>Information</h3>
<!-- This is fine because I want the name to be full size of the line -->
<div class="form-group">
<label class="control-label">Name</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder=" Name" />
</div>
<!-- Here I want to break 3 input side by side -->
<!-- Not working. Each rules is in one line -->
<div class="form-group">
<label class="control-label">Rules</label>
<div class="row">
<div class="col-md-12">
<input type="number" required="required" class="col-md-4" placeholder="Rule1" />
<input type="number" required="required" class="col-md-4" placeholder="Rule2" />
<input type="number" required="required" class="col-md-4" placeholder="Rule3" />
</div>
</div>
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
</form>
Does anyone know how can I put the Rules side by side in the row?
Thanks
use
<div class="col-xs-4"></div>
or "col-md-4" xs just to show in this tiny preview
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<form role="form" action="" method="post">
<div class="row">
<div class="col-xs-12 col-md-offset-3">
<div class="col-md-12">
<h3>Information</h3>
<!-- This is fine because I want the name to be full size of the line -->
<div class="form-group">
<label class="control-label">Name</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder=" Name" />
</div>
<!-- Here I want to break 3 input side by side -->
<!-- Not working. Each rules is in one line -->
<div class="form-group">
<label class="control-label">Rules</label>
<div class="row">
<div class="col-xs-4">
<input type="number" class="form-control" required="required" placeholder="Rule1" />
</div>
<div class="col-xs-4">
<input type="number" class="form-control" required="required" placeholder="Rule2" /> </div>
<div class="col-xs-4">
<input type="number" class="form-control" required="required" placeholder="Rule3" /> </div>
</div>
</div>
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
</form>
</div>
I have a boostrap model , I see a weird line in it when having two divs with col-lg-6. Can you please tell me why and help me to fix it ?
This is the model code
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Create</h4>
</div>
<form method="post" id="insert_form">
<div class="modal-body">
<div class="col-lg-6">
<div class="form-group">
<label for="Code">Code</label>
<input type="text" class="form-control" id="Code" name="Code" />
</div>
<div class="form-group">
<label for="Name">Name</label>
<input type="text" class="form-control" id="Name" name="Name" />
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="CanSale">Sale</label>
<input type="text" class="form-control" id="CanSale" name="CanSale" />
</div>
<div class="form-group">
<label for="Barcode">Barcode</label>
<input type="text" class="form-control" id="Barcode" name="Barcode" />
</div>
<div class="form-group">
<label for="Code">Descriptoin</label>
<input type="text" class="form-control" id="Description" name="Description" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" name="insert" id="insert" value="Insert" class="btn btn-success" />
</div>
</form>
</div>
below image red arrows shows the weird line that i am talking about. Please help me fix it.
I forget to place "col" divs inside <div class="row">.
I got it fixed by nesting "col-lg-6" divs inside <div class="row"> </div>
I am creating a inline form using the bootstrap template of MVC, but when i create an inline form with this code:
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe#example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
this is the result:
how can achieve a inline form?
Add your button in form group
<div class="form-group">
<button type="submit" class="btn btn-default">Send invitation</button>
</div>
<form class="form-inline">
<div class="col-lg-4" id="userFormColumn1">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
</div>
<div class="col-lg-4" id="userFormColumn1">
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe#example.com">
</div>
</div>
<div class="col-lg-4" id="userFormColumn1">
<div class="form-group">
<button type="submit" class="btn btn-default">Send invitation</button>
</div>
</div>
</form>
Try this.
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>