Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Move checkbox label to left on bootstrap custom checkbox

I have a checkbox

<div class="custom-control custom-checkbox custom-control-inline">
   <input type="checkbox"  id="location"  v-model="checkedLocations"   value="location" name="customRadioInline1" class="custom-control-input">
   <label class="custom-control-label" for="location"> Option 1</label>
</div>

How do I move the label to display on the left? I have tried changing the order but it just breaks the checkbox functionlity.

    <div class="custom-control custom-checkbox custom-control-inline">
         <label class="custom-control-label" for="location2"> Option 2</label>
        <input type="checkbox"  id="location2"  value="location2" name="custom2" class="custom-control-input">
   </div>

CODEPEN Link to show both examples

like image 589
JaChNo Avatar asked Jan 18 '19 12:01

JaChNo


People also ask

How can I customize a bootstrap checkbox?

To create a custom checkbox, wrap a container element, like <div>, with a class of . custom-control and . custom-checkbox around the checkbox.

How do you put a label over a checkbox?

All you have to do is use a "br" tag after each ending "label" tag. In other words, by using the "br" or break tag, you're telling the checkbox to "break" down to the next line that is available. Hope that helps!

Should checkbox label be clickable?

Clickable Checkbox LabelAll checkboxes have labels, but not all use label tags. This makes it hard for users to tick the checkbox. Without label tags, users can't click the label to tick the checkbox. Instead, they have to click the checkbox itself.

How do I get checkbox checked in bootstrap?

form-check container. Use the checked attribute if you want the checkbox to be checked by default.


3 Answers

The answers don't seem to work with custom-switch. Here's a working example.

CSS

div.custom-control-right {
    padding-right: 24px;
    padding-left: 0;
    margin-left: 0;
    margin-right: 0;
}
div.custom-control-right .custom-control-label::after{
    right: -1.5rem;
    left: auto;
}
div.custom-control-right .custom-control-label::before {
    right: -2.35rem;
    left: auto;
}

HTML

<div class="custom-control custom-control-right custom-switch">
    <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
    <label class="custom-control-label" for="customSwitch2">Right switch element</label>
</div>

JsFiddle

https://jsfiddle.net/2cmbq9r0/

Edit: changed left:initial to left:auto to make it work with IE11.

like image 133
lofihelsinki Avatar answered Oct 02 '22 01:10

lofihelsinki


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>

Note: you can replace div.custom-control-right selector with .custom-control-right, if this code is parsed after you load Bootstrap css. However, on SO, the linked resources are loaded after the code in CSS panel and I had to overqualify the selector in order for it to work.

like image 35
tao Avatar answered Oct 02 '22 02:10

tao


Try it: Fiddle

<div style="margin:20px;">
  <div class="custom-control custom-checkbox custom-control-inline">
    <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">

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

css:

.custom-checkbox {
  padding-left: 0;
}

label.custom-control-label {
  padding-right: 1.5rem;
}

.custom-control-label::before,
.custom-control-label::after {
  right: 0;
  left: auto;
}
like image 39
Abhineet Avatar answered Oct 02 '22 00:10

Abhineet