Place Custom Checkbox Icon to right of label Bootstrap 4
The custom checkbox is created with pseudo elements so their positioning needs to be adjusted relative to the label.
.custom-control.custom-checkbox{padding-left: 0;}
label.custom-control-label { position: relative; padding-right: 1.5rem;}
label.custom-control-label::before, label.custom-control-label::after{ right: 0; left: auto;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="custom-control custom-checkbox mb-3"> <input type="checkbox" class="custom-control-input" id="customCheck" name="example1"> <label class="custom-control-label" for="customCheck">Label</label></div>
Move checkbox label to left on bootstrap custom checkbox
The checkbox is not the actual <input>
(that's hidden). This is done in order to style it consistently cross-browser, cross-device, as that's not currently possible for <input type="checkbox">
.
Instead, the ::before
pseudo-element of the <label>
is used.
Therefore, you should place a custom class on the wrapper (custom-control-right
in the example below) and add some CSS that overrides the default:
div.custom-control-right { padding-right: 24px; padding-left: 0; margin-left: 16px; margin-right: 0;}div.custom-control-right .custom-control-label::before,div.custom-control-right .custom-control-label::after{ right: -1.5rem; left: initial;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/><div style="margin:20px;"> <div class="custom-control custom-checkbox custom-control-inline custom-control-right"> <input type="checkbox" id="location" value="location" name="custom1" class="custom-control-input"> <label class="custom-control-label" for="location"> Option 1</label> </div> <div class="custom-control custom-checkbox custom-control-inline custom-control-right"> <input type="checkbox" id="location2" value="location2" name="custom2" class="custom-control-input"> <label class="custom-control-label" for="location2"> Option 2</label> </div></div>
Bootstrap 4 : Float custom-checkbox to right of the text
I use postition: absolute
to move your boxes to right side and content to left side, hope this heck is work great.
You can play with right
CSS property to get exact result you want.
.custom-control-label::before ,.custom-control-label::after { right: 0;}
label span { position: absolute; right: 21px;}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="card attribute filter-panel" data-type="select" data-id="1"> <div class="card-header"> <i class="fa fa-angle-down pull-right"></i> <span class="card-title">color</span> </div> <div class="card-body" style="padding: 0px; padding-top: 15px"> <ul class="filter-ul"> <li> <div class="custom-control custom-checkbox" style="direction: rtl ; text-align: right"> <input type="checkbox" class="custom-control-input filter-checkbox " id="customCheck1" value="1"> <label class="custom-control-label " for="customCheck1"><span>red</span></label> </div> </li> <li> <div class="custom-control custom-checkbox" style="direction: rtl ; text-align: right"> <input type="checkbox" class="custom-control-input filter-checkbox " id="customCheck2" value="2"> <label class="custom-control-label " for="customCheck2"><span>blue</span></label> </div> </li> <li> <div class="custom-control custom-checkbox" style="direction: rtl ; text-align: right"> <input type="checkbox" class="custom-control-input filter-checkbox " id="customCheck3" value="3"> <label class="custom-control-label " for="customCheck3"><span>green</span></label> </div> </li> </ul> </div> </div>
Bootstrap - label on the left side of checkbox
You could just mix them up and apply a bit of margin
.form-check-input-reverse{ margin-left: 10px;}
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-check"><label class="form-check-label" for="defaultCheck1"> Default checkbox </label> <input class="form-check-input-reverse" type="checkbox" value="" id="defaultCheck1"></div>
<div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="defaultCheck1"> <label class="form-check-label" for="defaultCheck1"> Default checkbox </label></div>
Custom checkbox without label's for attribute (Bootstrap 4)
Yes you can do but for that you need to do some custom CSS as well.
Please try below CSS
.custom-checkbox{ position: relative; } .custom-checkbox input{ visibility: hidden; margin-right: 8px; } .custom-label:before,.custom-label:after{ width: 16px; height: 16px; content: ""; border: 1px solid; display: inline-block; position: absolute; left: 0; top: 0px; border: #adb5bd solid 1px; transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; border-radius: .25rem; } .custom-checkbox input:checked + .custom-label:before{ border-color: #007bff; background-color: #007bff; } .custom-checkbox input:checked + .custom-label:after{ width: 4px; border: 2px solid #ffffff; height: 8px; border-top: none; border-left: none; transform: rotate(40deg); left: 6px; top: 3px; }
<label class="custom-checkbox"><input type=checkbox name=chkbx1> <span class="custom-label">Label here</span></label>
Bootstrap 4 Custom Checkbox Not Shown
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>
Align Bootstrap 4 custom form(checkbox)
To fix this you must first put the entire thing into a .container
or .container-fluid
and then put that into a .row
and into that row all your columns. And make sure you remove all your float
classes such as float-right
etc.
Then you just add the class order-sm-last
to the first column and that's it!
The order-sm-last
will move/re-order that first column (with the close button) to the last for screens that small (sm
) or bigger. And for the smallest screens, the position of the first column will remain unchanged.
Here's the working code snippet (click the "run code snippet" button below and expand to full page):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<!-- Empty Career: Visible Fields --><div class="container-fluid mt-3"> <div class="row"> <div class="col-sm-1 text-right order-sm-last"> <!-- Empty Career: Close form button --> <a class="btn btn-default close-career"> <i class="fas fa-times"></i> </a> </div> <div class="col-sm-2"> <div class="form-group"> <input type="text" name="career-__prefix__-since" class="form-control" placeholder="0000.0" id="id_career-__prefix__-since" /> </div> </div> <div class="col-sm-2"> <div class="form-group"> <input type="text" name="career-__prefix__-until" class="form-control" placeholder="0000.0" id="id_career-__prefix__-until" /> </div> </div> <div class="col-sm-7"> <div class="form-group"> <div class="custom-control custom-checkbox"> <input type="checkbox" name="career-__prefix__-currently_employed" class="custom-control-input form-control" id="id_career-__prefix__-currently_employed" /> <label class="custom-control-label" for="id_career-__prefix__-currently_employed"> Currently employed </label> </div> </div> </div> </div></div>
Bootstrap 4: Checkbox text on the left, checkbox on the right
Add position attribute to the styling of custom-control-indicator
.
.custom-checkbox .custom-control-indicator {
position: relative;
border-radius: 0;
border: 2px solid #cdc9ca;
background: #fff;
}
Related Topics
How to Use CSS3: :Selection Without Changing The Default Color and Background Color
HTML5Shiv - Why Is It Only for Ie
CSS Transform Square into Thinner Rhombus
How to Set Different Font-Weight for Fallback Font
Display Only The Number of Items That Will Fit, and Then Expand to Fit Snugly
CSS3 Element with Opacity:0 (Invisible) Responds to Mouse Events
Need to Center Image in Web Page via CSS
Need to Center Image in Web Page via CSS
Display Definition Term and Description Inline
Change CSS Variables Dynamically in Angular
Is There an Inverse to The CSS "Clip" Property; Hide The Clipped Area
Background Color for Text (Only)
100% Div Height Without Scrollbar
CSS Box Div Dropping Shadow with Gradient
Is There a CSS Selector to Match a Option Value of The Select Tag