i want to use bootstrap 4 custom control for checkbox, after reading the documentation i wrote this, but the checkbox is not shown, what am i doing wrong?
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-body"><label>Add Productc Varian for </label>
<div class="form-group"><label for="formGroupExampleInput">Code</label><input type="text" class="form-control" placeholder="Enter Name"></div>
<div class="form-group"><label for="formGroupExampleInput">Name</label><input type="text" class="form-control" placeholder="Enter Name"></div>
<div class="form-group"><label for="formGroupExampleInput2">Description</label><textarea class="form-control" placeholder="Description"></textarea></div>
<div class="form-group">
<div class="custom-control custom-checkbox"><label for="formGroupExampleInput2">Default</label><input type="checkbox" class="custom-control-input" id="customControlValidation1"></div>
</div>
<hr>
<div class="form-group">
<div class="col-12"><button type="button" class="btn btn-default float-right">Add</button><button type="button" class="btn btn-danger float-right">Cancel</button></div>
</div>
</div>
Just add the missed class custom-control-label for label. You just want to follow custom forms Bootstrap-v4 form for reference.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="card-body">
<label>Add Productc Varian for </label>
<div class="form-group">
<label for="formGroupExampleInput">Code</label>
<input type="text" class="form-control" placeholder="Enter Name">
</div>
<div class="form-group">
<label for="formGroupExampleInput">Name</label>
<input type="text" class="form-control" placeholder="Enter Name">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Description</label>
<textarea class="form-control" placeholder="Description"></textarea>
</div>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Default</label>
</div>
</div>
<hr>
<div class="form-group">
<div class="col-12">
<button type="button" class="btn btn-default float-right">Add</button>
<button type="button" class="btn btn-danger float-right">Cancel</button>
</div>
</div>
</div>
<!-- begin snippet: js hide: false console: true babel: false -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-body"><label>Add Productc Varian for </label>
<div class="form-group"><label for="formGroupExampleInput">Code</label><input type="text" class="form-control" placeholder="Enter Name"></div>
<div class="form-group"><label for="formGroupExampleInput">Name</label><input type="text" class="form-control" placeholder="Enter Name"></div>
<div class="form-group"><label for="formGroupExampleInput2">Description</label><textarea class="form-control" placeholder="Description"></textarea></div>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
<label class="custom-control-label" for="customCheck">Check this custom checkbox</label>
</div>
</div>
<hr>
<div class="form-group">
<div class="col-12"><button type="button" class="btn btn-default float-right">Add</button><button type="button" class="btn btn-danger float-right">Cancel</button></div>
</div>
</div>
This will fix the problem for you. Just following the correct syntax for custom checkboxes does the work.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-body"><label>Add Productc Varian for </label>
<div class="form-group"><label for="formGroupExampleInput">Code</label><input type="text" class="form-control" placeholder="Enter Name"></div>
<div class="form-group"><label for="formGroupExampleInput">Name</label><input type="text" class="form-control" placeholder="Enter Name"></div>
<div class="form-group"><label for="formGroupExampleInput2">Description</label><textarea class="form-control" placeholder="Description"></textarea></div>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customControlValidation1">
<label class="custom-control-label" for="customControlValidation1">Default</label>
</div>
<hr>
<div class="form-group">
<div class="col-12"><button type="button" class="btn btn-default float-right">Add</button><button type="button" class="btn btn-danger float-right">Cancel</button></div>
</div>
</div>
Source: JS Bin
I had the same problem, the problem was that my Bootstrap 4 files were not updated. Just download the latest version and it should be OK
I'm trying to align and style a form. My first attempt was
<form action="myUrl" class="form-horizontal" method="post">
<div class="form-group">
<label class="control-label col-sm-2">Set ID</label>
<div class="col-sm-4">
<input class="form-control" id="setId" name="setId" placeholder="Enter value" type="text" value="">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Customer ID</label>
<div class="col-sm-4 input-group">
<input class="form-control" id="customerId" name="customerId" placeholder="Enter value" type="text" value="">
<span class="input-group-btn">
<button class="btn btn-default lookup-button" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
<div class="form-group">
<input class="btn btn-default" type="submit" id="submit" value="Search">
</div>
</form>
However, my two text boxes have their left edges aligned differently as seen here
I tried adding input-group to the div that encloses the first text box and that solved the alignment issue, but it causes the corners of the text box to become hard corners rather than being rounded as seen here
<form action="myUrl" class="form-horizontal" method="post">
<div class="form-group">
<label class="control-label col-sm-2">Set ID</label>
<div class="col-sm-4 input-group">
<input class="form-control" id="setId" name="setId" placeholder="Enter value" type="text" value="">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Customer ID</label>
<div class="col-sm-4 input-group">
<input class="form-control" id="customerId" name="customerId" placeholder="Enter value" type="text" value="">
<span class="input-group-btn">
<button class="btn btn-default lookup-button" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
<div class="form-group">
<input class="btn btn-default" type="submit" id="submit" value="Search">
</div>
</form>
I also tried adding an empty <span> into my first text box, along with the input-group class. That causes the left corners to become rounded, but the right corners stay square. The right edge also becomes slightly misaligned with the right edge of the text box below it as shown here
Is there a way that I can cause my text boxes to align evenly on their left edges, while having the first text box maintain its rounded corners (without adding a superfluous icon into the first text box)?
You should use the class input-group in another div and this will solve the problem of the input behavor
see code snippet:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form action="myUrl" class="form-horizontal" method="post">
<div class="form-group">
<label class="control-label col-sm-2">Set ID</label>
<div class="col-sm-4">
<input class="form-control" id="setId" name="setId" placeholder="Enter value" type="text" value="">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Customer ID</label>
<div class="col-sm-4">
<div class="input-group">
<input class="form-control" id="customerId" name="customerId" placeholder="Enter value" type="text" value="">
<span class="input-group-btn">
<button class="btn btn-default lookup-button" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2"></label>
<div class="col-sm-4">
<input class="btn btn-default" type="submit" id="submit" value="Search"> </div>
</div>
</form>
Try this
CSS
.lookup-button span.glyphicon{
border-left:1px solid #e1e1e1;
padding:8px;
}
HTML
<form action="myUrl" class="form-horizontal" method="post">
<div class="form-group">
<label class="control-label col-sm-2">Set ID</label>
<div class="col-sm-5">
<input class="form-control" id="setId" name="setId" placeholder="Enter value" type="text" value="">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Customer ID</label>
<div class="col-sm-5">
<input class="form-control" id="customerId" name="customerId" placeholder="Enter value" type="text" value="">
</div>
</div>
<div class="form-group">
<button class="btn btn-default lookup-button" type="submit">
submit
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
</form>
i have modified some of your html. Here you need not use the input type[submit], simply replace it with . It functions the same way.
i have styled the submit button and organised some code
Link for Reference
Hope this helps
I am trying to layout a form using bootstrap 3 but for some reason the input is pushed to left.
My markup looks like this
<div class="jumbotron">
<form name="invoiceForm" class="form-horizontal" role="form" data-toggle="validator">
<div class="form-group">
<label class="control-label col-sm-3" for="txt_job_date" >Date work performed</label>
<p class="input-group col-sm-3">
<input type="text"
class="form-control"
datepicker-popup="{{format}}" ng-model="dt"
is-open="opened" min-date="minDate"
max-date="'2015-06-22'"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close"
id="txt_job_date"
ng-model="job_date"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="txt_job_ref_no" required-asterix="" >Ref No</label>
<div class="col-sm-2">
<input type="text" class="form-control" ng-model="ref_no" id="txt_job_ref_no" placeholder="123RTE" required="">
</div>
<div role="alert">
<span class="error has-error alert-danger" ng-show="invoiceForm.txt_job_ref_no.$error.required">
Ref no is required!</span>
</div>
</div>
</form>
</div>
Here is the link to fiddle
Many thanks in advance!
This should help. Wrap the labels and elements in cols, and the form in a .container inside the .jumbotron. You were over-complicating the layout.
<div class="jumbotron">
<div class="container">
<form name="invoiceForm" class="form-horizontal" role="form" data-toggle="validator">
<div class="col-sm-12">
<div class="form-group">
<label class="control-label" for="txt_job_date">Date work performed</label>
<div class="input-group">
<input type="text"
class="form-control"
datepicker-popup="{{format}}" ng-model="dt"
is-open="opened" min-date="minDate"
max-date="'2015-06-22'"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close"
id="txt_job_date"
ng-model="job_date"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label class="control-label" for="txt_job_ref_no" required-asterix="" >Ref No</label>
<input type="text" class="form-control" ng-model="ref_no" id="txt_job_ref_no" placeholder="123RTE" required="">
</div>
</div>
</form>
</div>
</div>
http://jsfiddle.net/j8x15dbs/1/
Edit: Missed part about form being horizontal. Added new code below to reflect that.
This has the layout you're looking for
<div class="jumbotron">
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-3" for="txt_job_date">Date work performed</label>
<div class="col-sm-7">
<div class="input-group">
<input type="text"
class="form-control"
datepicker-popup="{{format}}" ng-model="dt"
is-open="opened" min-date="minDate"
max-date="'2015-06-22'"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close"
id="txt_job_date"
ng-model="job_date"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="txt_job_ref_no" required-asterix="">Ref No</label>
<div class="col-sm-7">
<input type="text" class="form-control" ng-model="ref_no" id="txt_job_ref_no" placeholder="123RTE" required="required">
</div>
</div>
</form>
</div>
</div>
http://jsfiddle.net/j8x15dbs/2/
A real easy thing to do - and a great way to learn - is to just copy the examples off of Bootstrap's site and replace their values with yours. :)
remove <col-sm-2> from before the input tag. As good practice, always use <div class="row"> before using <col-sm-12> and don't use rows or columns inside <div class="form-group">
Please read about bootstrap scaffolding to understand how to write good markup.
I have the following bootstrap code for showing a textfield with a button:
<div class="form-group">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<label>Second Column</label>
<input type="text" class="form-control" placeholder="Search for...">
</div>
<!-- /input-group -->
</div>
I should get something like this:
But what I get is this:
I guess its because of the <label> tag.
Any clue on how can I fix this?
I think you need to move the label to outside the .input-group
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
<label for="field1">Second Column</label>
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input id="field1" type="text" class="form-control" placeholder="Search for...">
</div>
</div>
I would like to have the labels not above the input field, but on the left side.
<form method="post" action="" role="form" class="form-inline">
<div class="form-group">
<label for="rg-from">Ab: </label>
<input type="text" id="rg-from" name="rg-from" value="" class="form-control">
</div>
<div class="form-group">
<label for="rg-to">Bis: </label>
<input type="text" id="rg-to" name="rg-to" value="" class="form-control">
</div>
<div class="form-group">
<input type="button" value="Clear" class="btn btn-default btn-clear">
<input type="submit" value="Los!" class="btn btn-primary">
</div>
</form>
This code gives me:
I would like to have:
You can use form-inline class for each form-group :)
<form>
<div class="form-group form-inline">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
</form>
Put the <label> outside the form-group:
<form class="form-inline">
<label for="rg-from">Ab: </label>
<div class="form-group">
<input type="text" id="rg-from" name="rg-from" value="" class="form-control">
</div>
<!-- rest of form -->
</form>
The Bootstrap 3 documentation talks about this in the CSS documentation tab in the section labelled "Requires custom widths", which states:
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.
If you use your browser and Firebug or Chrome tools to suppress or reduce the "width" style, you should see things line up they way you want. Clearly you can then create the appropriate CSS to fix the issue.
However, I find it odd that I need to do this at all. I couldn't help but feel this manipulation was both annoying and in the long term, error prone. Ultimately, I used a dummy class and some JS to globally shim all my inline inputs. It was small number of cases, so not much of a concern.
Nonetheless, I too would love to hear from someone who has the "right" solution, and could eliminate my shim/hack.
Hope this helps, and props to you for not blowing a gasket at all the people that ignored your request as a Bootstrap 3 concern.
You can create such form where label and form control are side using two method -
1. Inline form layout
<form class="form-inline" role="form">
<div class="form-group">
<label for="inputEmail">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
<button type="reset" class="btn btn-default">Reset</button>
<button type="submit" class="btn btn-primary">Login</button>
</form>
2. Horizontal Form Layout
<form class="form-horizontal">
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="inputEmail" class="control-label col-xs-3">Email</label>
<div class="col-xs-9">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
</div>
<div class="col-sm-5">
<div class="form-group">
<label for="inputPassword" class="control-label col-xs-3">Password</label>
<div class="col-xs-9">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</div>
<div class="col-sm-3">
<button type="reset" class="btn btn-default">Reset</button>
<button type="submit" class="btn btn-primary">Login</button>
</div>
</div>
</form>
You can check out this page for more information and live demo - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-forms.php
Like this
DEMO
HTML
<div class="row">
<form class="form-inline">
<fieldset>
<label class="control-label"><strong>AB :</strong></label>
<input type="text" class="input-mini" >
<label class="control-label"><strong>BIS:</strong></label>
<input type="text" class="input-mini" >
<input type="button" value="Clear" class="btn btn-default btn-clear">
<input type="submit" value="Los!" class="btn btn-primary">
</fieldset>
</form>
</div>
I had the same problem, here is my solution:
<form method="post" class="form-inline form-horizontal" role="form">
<label class="control-label col-sm-5" for="jbe"><i class="icon-envelope"></i> Email me things like this: </label>
<div class="input-group col-sm-7">
<input class="form-control" type="email" name="email" placeholder="your.email#example.com"/>
<span class="input-group-btn">
<button class="btn btn-primary" type="submit">Submit</button>
</span>
</div>
</form>
here is the Demo
You can see from the existing answers that Bootstrap's terminology is confusing. If you look at the bootstrap documentation, you see that the class form-horizontal is actually for a form with fields below each other, i.e. what most people would think of as a vertical form. The correct class for a form going across the page is form-inline. They probably introduced the term inline because they had already misused the term horizontal.
You see from some of the answers here that some people are using both of these classes in one form! Others think that they need form-horizontal when they actually want form-inline.
I suggest to do it exactly as described in the Bootstrap documentation:
<form class="form-inline">
<div class="form-group">
<label for="nameId">Name</label>
<input type="text" class="form-control" id="nameId" placeholder="Jane Doe">
</div>
</form>
Which produces:
You must float left all elements like so:
.form-group,
.form-group label,
.form-group input { float:left; display:inline; }
give some margin to the desired elements :
.form-group { margin-right:5px }
and set the label the same line height as the height of the fields:
.form-group label { line-height:--px; }
I think this is what you want, from the bootstrap documentation "Horizontal 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. Doing so changes .form-groups to behave as grid rows, so no need for .row". So:
<form class="form-horizontal" role="form">
<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>
Fiddle: http://jsfiddle.net/beewayne/B9jj2/29/
You can use a span tag inside the label
<div class="form-group">
<label for="rg-from">
<span>Ab:</span>
<input type="text" id="rg-from" name="rg-from" value="" class="form-control">
</label>
</div>
I managed to fix my issue with. Seems to work fine and means I dont have to add widths to all my inputs manually.
.form-inline .form-group input {
width: auto;
}
I am sure you would've already found your answer... here is the solution I derived at.
That's my CSS.
.field, .actions {
margin-bottom: 15px;
}
.field label {
float: left;
width: 30%;
text-align: right;
padding-right: 10px;
margin: 5px 0px 5px 0px;
}
.field input {
width: 70%;
margin: 0px;
}
And my HTML...
<h1>New customer</h1>
<div class="container form-center">
<form accept-charset="UTF-8" action="/customers" class="new_customer" id="new_customer" method="post">
<div style="margin:0;padding:0;display:inline"></div>
<div class="field">
<label for="customer_first_name">First name</label>
<input class="form-control" id="customer_first_name" name="customer[first_name]" type="text" />
</div>
<div class="field">
<label for="customer_last_name">Last name</label>
<input class="form-control" id="customer_last_name" name="customer[last_name]" type="text" />
</div>
<div class="field">
<label for="customer_addr1">Addr1</label>
<input class="form-control" id="customer_addr1" name="customer[addr1]" type="text" />
</div>
<div class="field">
<label for="customer_addr2">Addr2</label>
<input class="form-control" id="customer_addr2" name="customer[addr2]" type="text" />
</div>
<div class="field">
<label for="customer_city">City</label>
<input class="form-control" id="customer_city" name="customer[city]" type="text" />
</div>
<div class="field">
<label for="customer_pincode">Pincode</label>
<input class="form-control" id="customer_pincode" name="customer[pincode]" type="text" />
</div>
<div class="field">
<label for="customer_homephone">Homephone</label>
<input class="form-control" id="customer_homephone" name="customer[homephone]" type="text" />
</div>
<div class="field">
<label for="customer_mobile">Mobile</label>
<input class="form-control" id="customer_mobile" name="customer[mobile]" type="text" />
</div>
<div class="actions">
<input class="btn btn-primary btn-large btn-block" name="commit" type="submit" value="Create Customer" />
</div>
</form>
</div>
You can see the working example here... http://jsfiddle.net/s6Ujm/
PS: I am a beginner too, pro designers... feel free share your reviews.
No CSS required. This should look fine on your page. You can set col-md-* as per your needs
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="row">
<div class="col-md-12">
<form class="form-inline" role="form">
<div class="col">
<div class="form-group">
<label for="inputEmail" class="col-sm-3">Email</label>
<input type="email" class="form-control col-sm-7" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="col">
<div class="form-group">
<label for="inputPassword" class="col-sm-3">Email</label>
<input type="password" class="form-control col-sm-7" id="inputPassword" placeholder="Email">
</div>
</div>
<button class="btn btn-primary">Button 1</button>
<button class="btn btn-primary">Button 2</button>
</form>
</div>
</div>
<div class="control-group">
<label class="control-label" for="firstname">First Name</label>
<div class="controls">
<input type="text" id="firstname" name="firstname"/>
</div>
</div>
Also we can use it Simply as
<label>First name:
<input type="text" id="firstname" name="firstname"/>
</label>
It seems adding style="width:inherit;" to the inputs works fine.
jsfiddle demo