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
To create a custom checkbox, wrap a container element, like <div>, with a class of . custom-control and . custom-checkbox around the 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!
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.
form-check container. Use the checked attribute if you want the checkbox to be checked by default.
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.
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.
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With