Increasing the size of a bootstrap checkbox
It is not a good idea to change bootstrap components dimensions, you should change variables in bootstrap but it means to recompile library.
Anyway what you want can be done i this way:
.custom-control-label::before ,.custom-control-label::after{width:20px; height:20px}
Change Bootstrap 4 checkbox size
There is currently an issue with this and I reported it to Bootstrap. Until that's fixed do the following:
First of all, use the form-control-lg
class. Once the issue is fixed using that class will be all you need.
Until the issue is fixed add the following css:
.custom-control-label::before,
.custom-control-label::after {
top: .8rem;
width: 1.25rem;
height: 1.25rem;
}
Here's a complete working code example:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<style>.custom-control-label::before, .custom-control-label::after {top: .8rem;width: 1.25rem;height: 1.25rem;}</style>
<div class="custom-control form-control-lg custom-checkbox"> <input type="checkbox" class="custom-control-input" id="customCheck1"> <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label></div>
change size of checkbox in boostrap
Try like this :
.big-checkbox > input {width: 100px; height: 100px;}
Bootstrap checkbox size wrong with smaller body font
You can make the parent element flex
and use align-items
to center vertically. You would also need to use non-absolute
position on the checkbox element. That will keep them centered vertically regardless the font size of the page.
html { font-size: 62.5%;}
body { font-size: 1.4rem;}
.custom-control { display: flex; align-items: baseline;}.custom-control-indicator { position: static; margin: 0 .5rem 0 0;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/><div class="container-fluid"> <div class="row align-items-end"> <div class="col"> <div class="form-group"> <label for="worker">Worker</label> <select class="form-control" id="worker"> <option>Jane Doe</option> <option>John Smith</option> </select> </div> </div> <div class="col"> <div class="form-group"> <label class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> <span class="custom-control-description">Check this custom checkbox</span> </label> </div> </div> </div></div>
How to change size of checkbox and add border radius of icheck plugin?
Add this CSS
.icheck-primary[class*="icheck-"] > label {
padding-left: 22px !important;
line-height: 18px;
}
.icheck-primary[class*="icheck-"] > input:first-child + input[type="hidden"] + label::before, .icheck-primary[class*="icheck-"] > input:first-child + label::before {
width: 18px;
height: 18px;
border-radius: 5px;
margin-left: -22px;
}
.icheck-primary[class*="icheck-"] > input:first-child:checked + input[type="hidden"] + label::after,
.icheck-primary[class*="icheck-"] > input:first-child:checked + label::after {
top: 0px;
width: 4px;
height: 8px;
left: 0px;
}
.icheck-primary[class*="icheck-"] > label{ padding-left:22px !important; line-height: 18px;}.icheck-primary[class*="icheck-"] > input:first-child + input[type="hidden"] + label::before, .icheck-primary[class*="icheck-"] > input:first-child + label::before{ width:18px; height:18px; border-radius:5px; margin-left:-22px;}
.icheck-primary[class*="icheck-"] > input:first-child:checked + input[type="hidden"] + label::after, .icheck-primary[class*="icheck-"] > input:first-child:checked + label::after{ top:0px; width: 4px; height: 8px; left:0px;}
<html><head> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.rawgit.com/bantikyan/icheck-bootstrap/master/icheck-bootstrap.min.css" rel="stylesheet"> <style> .c-radius{ border-radius:5px; } </style></head><body> <div class="checkbox icheck-primary"> <input type="checkbox" checked id="primary" class="c-radius"/> <label for="primary">Keep username same as email id</label> </div></body></html>
Bootstrap 4 - Left aligning a large checkbox
Its not tidy by setting an height and width for the checkbox should do the trick.
.checkbox-large { width: 25px !important; height: 25px}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /><form> <div class="form-group"> <label asp-for="Enabled" class="control-label">Enabled</label> <input asp-for="Enabled" class="form-control checkbox-large" type="checkbox" /> <span asp-validation-for="Enabled" class="text-danger"></span> </div></form>
Change size of checkboxes in cells of bootstrap-table
.bs-checkbox input
{
zoom:2;
}
How do you change the style of a bootstrap checkbox
Here's a demo bootply for custom checkboxes that I use, implementing bootstraps glyphicons for the icons. These degrade to ordinary checkboxes in IE8 without any additional code.
Here's the relevant CSS:
.custom-checkbox > [type="checkbox"],
.custom-checkbox > label{
margin-bottom:0px !important;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.custom-checkbox > [type="checkbox"]:not(:checked),
.custom-checkbox > [type="checkbox"]:checked {
position: absolute;
left: -9999px;
}
.custom-checkbox > [type="checkbox"]:not(:checked) + label,
.custom-checkbox > [type="checkbox"]:checked + label {
position: relative;
padding-left: 22px;
cursor: pointer;
}
.custom-checkbox > [type="checkbox"]:not(:checked) + label:before,
.custom-checkbox > [type="checkbox"]:checked + label:before {
content: '';
position: absolute;
left:0;
top: 50%;
margin-top:-9px;
width: 17px;
height: 17px;
border: 1px solid #ddd;
background: #ffffff;
border-radius: 2px;
}
.custom-checkbox > [type="checkbox"]:not(:checked) + label:after,
.custom-checkbox > [type="checkbox"]:checked + label:after {
font: normal normal normal 12px/1 'Glyphicons Halflings';
content: '\e013';
position: absolute;
top: 50%;
margin-top:-7px;
left: 2px;
color: #94C947;
xtransition: all .2s;
}
.custom-checkbox > [type="checkbox"]:not(:checked) + label:after {
opacity: 0;
transform: scale(0);
}
.custom-checkbox > [type="checkbox"]:checked + label:after {
opacity: 1;
transform: scale(1);
}
.custom-checkbox > [type="checkbox"][data-indeterminate] + label:after,
.custom-checkbox > [type="checkbox"][data-indeterminate] + label:after {
content: '\2212';
left: 2px;
opacity: 1;
transform: scale(1);
}
.custom-checkbox > [type="checkbox"]:disabled:not(:checked) + label:before,
.custom-checkbox > [type="checkbox"]:disabled:checked + label:before {
box-shadow: none;
background-color: #eeeeee;
border-color: #eeeeee;
cursor: not-allowed;
opacity: 1;
color: #dadada;
}
.custom-checkbox > [type="checkbox"]:disabled:checked + label:after {
color: #dadada; cursor: not-allowed;
}
.custom-checkbox > [type="checkbox"]:disabled + label {
color: #aaa; cursor: not-allowed;
}
.custom-checkbox > [type="checkbox"]:checked:focus + label:before,
.custom-checkbox > [type="checkbox"]:not(:checked):focus + label:before {
border: 1px solid #66afe9;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.custom-checkbox > label:hover:before {
border: 1px solid #88D2FF !important;
}
.custom-checkbox > [type="checkbox"]:disabled:not(:checked) + label:hover:before,
.custom-checkbox > [type="checkbox"]:disabled:checked + label:hover:before{
border: 1px solid #E4E4E4 !important;
}
and the HTML:
<div class="custom-checkbox">
<input type="checkbox" id="cb1">
<label for="cb1">Fancy Checkbox</label>
</div>
HTH, -Ted
Related Topics
Bootstrap Drop Down Cutting Off
Why Are Certain CSS Properties Not Applied to A:Visited
Is There Any Clean CSS Method to Make Each Letter in a Word a Different Color
Less CSS Set Variables in Media Query
Change Parent Div on Input[Type=Checkbox]:Checked with CSS
Mui - Outlined Select Label Is Not Rendering Properly
How to Get My CSS Linear Gradient to Work in Ie
Bootstrap Modal Issue on Safari/Ios/Iphone
Internet Explorer "CSS Was Ignored Due to Mime Type Mismatch" on Local Files (No Server)
How to Add Custom Icon in Twitter Bootstrap
Twitter Bootstrap CSS That Support from Rtl Languages
Best Way to Represent 1/3Rd of 100% in CSS
Differencebetween Push and Offset Under the Grid System