diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index 018889b4a01cd3299acdf7e2aafd452975f61ba1..523b622c58e3f28ac03d3fb329878b5f6e4b580d 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -188,6 +188,22 @@ } } + &.right { + padding-left: 0; + .custom-control-label { + padding-right: $custom-switch-width + $custom-control-gutter; + &::before { + right: 0; + left: auto; + } + + &::after { + right: calc(#{($custom-switch-width / 2)} + #{$custom-control-indicator-border-width}); + left: auto; + } + } + } + .custom-control-input:checked ~ .custom-control-label { &::after { background-color: $custom-control-indicator-bg; diff --git a/site/docs/4.2/components/forms.md b/site/docs/4.2/components/forms.md index d1a6acc19c696c557705ffa5ceae695a1e52845b..1a1ee55ae1f96f26d4c07fd42b63d3ec5dfdb1a7 100644 --- a/site/docs/4.2/components/forms.md +++ b/site/docs/4.2/components/forms.md @@ -1238,6 +1238,20 @@ A switch has the markup of a custom checkbox but uses the `.custom-switch` class {% endcapture %} {% include example.html content=example %} +Add the `.right` class to render a toggle switch with label text before. + +{% capture example %} +<div class="custom-control custom-switch right"> + <input type="checkbox" class="custom-control-input" id="customSwitch3"> + <label class="custom-control-label" for="customSwitch3">Toggle this switch element right aligned</label> +</div> +<div class="custom-control custom-switch right"> + <input type="checkbox" class="custom-control-input" disabled id="customSwitch4"> + <label class="custom-control-label" for="customSwitch4">Disabled switch element right aligned</label> +</div> +{% endcapture %} +{% include example.html content=example %} + ### Select menu Custom `<select>` menus need only a custom class, `.custom-select` to trigger the custom styles. Custom styles are limited to the `<select>`'s initial appearance and cannot modify the `<option>`s due to browser limitations.