By utilizing CSS, we can accomplish this task easily.
.form-switch {
display: flex !important;
flex-direction: row-reverse !important;
justify-content: space-between !important;
}
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="42202d2d36313630233202776c736c71">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ccaea3a3b8bfb8beadbc8cf9e2fde2ff">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
... (remaining code)
It's important to differentiate between alignment and positioning. In this context, the query was related to positioning rather than alignment.
When we talk about textual alignment, it usually involves the text-align property.
.some_text {
text-align: left;
}
Therefore, make sure not to confuse alignment with positioning.
Update
To decrease the gap between the label and the switch, eliminate the justify-content property and incorporate a margin-right for the label.
.form-switch {
display: flex;
flex-direction: row-reverse;
}
.form-switch label {
margin-right: 50px !important;
}
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="27454848535453554657671209160914">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e98b86869d9a9d9b8899a9dcc7d8c7da">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
... (remaining code)
For a live demonstration, here is afiddle link