Bootstrap 4 : Float custom-checkbox to right of the text

Question

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<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">red</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">blue</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">green</label>
        </div>
      </li>
    </ul>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Current position

I want the checkboxes to float to the right of the text, I have tried float:right obviously didn't work.

how can i float them to the right ?

Answer 1

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>

Answer 2

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<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">

               <label class="custom-control-label " for="customCheck1">red</label>
                 <input type="checkbox" class="custom-control-input filter-checkbox " id="customCheck1" value="1" style="float:right">
            </div>
         </li>
         <li>
            <div class="custom-control custom-checkbox" style="direction: rtl ; text-align: right">

               <label class="custom-control-label " for="customCheck2">blue</label>
               <input type="checkbox" class="custom-control-input filter-checkbox " id="customCheck2" value="2"style="float:right">
            </div>
         </li>
         <li>
            <div class="custom-control custom-checkbox" style="direction: rtl ; text-align: right">

               <label class="custom-control-label " for="customCheck3">green</label>
                 <input type="checkbox" class="custom-control-input filter-checkbox " id="customCheck3" value="3"style="float:right">
            </div>
         </li>
      </ul>
   </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    
    

Check this code.I set the checkboxes to the right side of text. I think that's what your problem was.I hope this will help you :)