Place Custom Checkbox Icon to Right of Label Bootstrap 4

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



Leave a reply



Submit