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
Related
I started using bootstrap 5 and noticed there is no spaces between rows. Do we have to explicitly use spacing utility like mb-3 or mb-2 etc Trying to understand the reason behind removing vertical spaces between rows.
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3">
</div>
</div>
<div class="row">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3">
</div>
</div>
<div class="row">
<div class="col-sm-10 offset-sm-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck1">
<label class="form-check-label" for="gridCheck1">
Example checkbox
</label>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
Bootstrap 5 has vertical gutters for the Grid. Instead of using separate rows, put the columns in a single row div. Then use whichever gy-* you want on the row...
<form>
<div class="row gy-4">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3">
</div>
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3">
</div>
<div class="col-sm-10 offset-sm-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck1">
<label class="form-check-label" for="gridCheck1"> Example checkbox </label>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
https://codeply.com/p/4ZM75xw90B
I use Bootstrap 3 in my project.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row well well-sm">
<div class="col-xs-2">
<label for="txtMonth"> month:</label>
<input type="number" class="form-control input-sm" id="txtMonth" ng-model="month" />
</div>
<div class="col-xs-3">
<label for="txtMonth"> year:</label>
<input type="number" class="form-control input-sm" id="txtYear" ng-model="year" />
</div>
<div class="col-xs-2">
<input type="button" class="btn btn-default btn-sm" id="btnGetRecords" ng-click="getRecords()" value="Enter" />
</div>
</div>
As you can see each input number has label, but the label and input not on the same row how to make label and input show on a single row?
use col-xs-4[label] in your label and create new div for and col-xs-8 [input div]
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row well well-sm">
<div class="col-xs-5">
<label class="col-xs-4" for="txtMonth"> month:</label>
<div class="col-xs-8">
<input type="number" class="form-control input-sm" id="txtMonth" ng-model="month" />
</div>
</div>
<div class="col-xs-5">
<label class="col-xs-4" for="txtMonth"> year:</label>
<div class="col-xs-8">
<input type="number" class="form-control input-sm" id="txtYear" ng-model="year" />
</div>
</div>
<div class="col-xs-2">
<input type="button" class="btn btn-default btn-sm" id="btnGetRecords" ng-click="getRecords()" value="Enter" />
</div>
</div>
Just use the form-inline to align your label and input inline as below.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<form class="form-inline">
<div class="well well-sm">
<div class="form-group">
<label for="txtMonth"> month:</label>
<input type="number" class="form-control input-sm" id="txtMonth" ng-model="month" />
</div>
<div class="form-group">
<label for="txtMonth"> year:</label>
<input type="number" class="form-control input-sm" id="txtYear" ng-model="year" />
</div>
<div class="form-group">
<input type="button" class="btn btn-default btn-sm" id="btnGetRecords" ng-click="getRecords()" value="Enter" />
</div>
</div>
</form>
You need to wrap you Code into a div with CSS class of form-group like this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row well well-sm">
<div class="form-group">
<label class="col-xs-2" for="txtMonth"> month:</label>
<div class="col-xs-2">
<input type="number" class="form-control input-sm" id="txtMonth" ng-model="month"/>
</div>
<label class="col-xs-2" for="txtMonth"> year:</label>
<div class="col-xs-2">
<input type="number" class="form-control input-sm" id="txtYear" ng-model="year"/>
</div>
<input type="button" class="btn btn-default btn-sm" id="btnGetRecords" ng-click="getRecords()" value="Enter"/>
</div>
</div>
It is because of the form-control class having width:100% and display:block properties. If you overwrite this one that will work automatically.
Also Increase the xs values for fixing the label and text boxes in a same row.
Apply some new class and override the above properties like below.
.newclass {
display:inline-block;
width:auto;
}
<div class="row well well-sm">
<div class="col-xs-5">
<label for="txtMonth"> month:</label>
<input type="number" class="form-control newclass input-sm" id="txtMonth" ng-model="month" />
</div>
<div class="col-xs-5">
<label for="txtMonth"> year:</label>
<input type="number" class="form-control newclass input-sm" id="txtYear" ng-model="year" />
</div>
<div class="col-xs-2">
<input type="button" class="btn btn-default btn-sm" id="btnGetRecords" ng-click="getRecords()" value="Enter" />
</div>
</div>
DEMO
Hope it will work
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="col-xs-12">
<label for="txtMonth" class="col-xs-2"> month:</label>
<label for="txtMonth" class="col-xs-3"> year:</label>
<div class="col-xs-7">
</div>
</div>
<div class="col-xs-12">
<div class="col-xs-2">
<input type="number" class="form-control input-sm" id="txtMonth" ng-model="month" />
</div>
<div class="col-xs-3">
<input type="number" class="form-control input-sm" id="txtYear" ng-model="year" />
</div>
<div class="col-xs-2">
<input type="button" class="btn btn-default btn-sm" id="btnGetRecords" ng-click="getRecords()" value="Enter" />
</div>
<div class="col-xs-5">
</div>
</div>
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 align textfields with bootstrap however I keep failing to adopt anything I found on sources to my project. What I am trying to do is aligning e-mail and password text-fields but leave 'Remember me' and 'Login' centered.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<form method="POST" action="/auth/login">
<div class="form-group">
<div>
<label for="exampleInputEmail1">Email address</label>
<input type="email" name="email" value="{{ old('email') }}">
</div>
</div>
<div class="form-group">
<div>
<label for="exampleInputPassword1">Password</label>
<input type="password" name="password" id="password">
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Remember me
</label>
</div>
</div>
<div class="form-group">
<div>
<button type="submit" class="btn btn-default">Login</button>
</div>
</div>
</form>
You can use Bootstrap's form-horizontal class to help achieve the layout.
Demo: http://www.bootply.com/nJ2P2gi76B
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword">
</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">Log in</button>
</div>
</div>
</form>
You can access only the text input by using a css attribute selector.
For Example...
input[type="text"] {
...
}
You can get more specific if needed...
#someID input[type="text"] {
...
}
you can use text-center to center the inner content of your div. you can use text-left, text-center, text-right classes to align the contents.
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css);
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css);
<form method="POST" action="/auth/login">
<div class="form-group">
<div>
<label for="exampleInputEmail1">Email address</label>
<input type="email" name="email" value="{{ old('email') }}">
</div>
</div>
<div class="form-group">
<div>
<label for="exampleInputPassword1">Password</label>
<input type="password" name="password" id="password">
</div>
</div>
<div class="form-group text-center">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Remember me
</label>
</div>
</div>
<div class="form-group text-center">
<div>
<button type="submit" class="btn btn-default">Login</button>
</div>
</div>
</form>
It would help if you could post a JSFiddle with the css you are using!
Guessing from what i see:
You could add a class to both fields and override the css.
or put both fields in a div and align them without impacting the rest.
Using an enclosing div:
JSFiddle
CSS:
.input-fields {
width: 300px;
}
.input-fields .form-group {
float: right;
}
.form-group {
clear: both;
text-align: center;
}
HTML:
<form method="POST" action="/auth/login">
<div class="input-fields">
<div class="form-group">
<div>
<label for="exampleInputEmail1">Email address</label>
<input type="email" name="email" value="{{ old('email') }}">
</div>
</div>
<div class="form-group">
<div>
<label for="exampleInputPassword1">Password</label>
<input type="password" name="password" id="password">
</div>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Remember me
</label>
</div>
</div>
<div class="form-group">
<div>
<button type="submit" class="btn btn-default">Login</button>
</div>
</div>
</form>
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.