Bootstrap align label left of form-switch-CodePudding

I am currently unable to align my label to the left of my switchbox. After looking at various stackoverflow pages, and browsing other websites, I am still unable to align my label to the left.

Please find below the snippet I have cut out unneeded code:

 <form method="POST" id="registration-form">
  <div >
     <input  type="checkbox" id="height" @click='imperialHeight()'>
     <label  for="bmi">Imperial</label>
 </div>
 <br>
 <div >
     <input  type="checkbox" id="weight-switch" @click='imperialWeight()'>
     <label for="weight-switch">Imperial</label>
   </div>
</form>

Please note that there is not any associated CSS. I am using Bootstrap 5 and please see the screenshot below: Current Checkboxes

Thank you for your time, Alex

CodePudding user response：

Well with some CSS, we can get this job done.

.form-switch {
  display: flex !important;
  flex-direction: row-reverse !important;
  justify-content: space-between !important;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<form>
  <div >
  <input  type="checkbox" role="switch" id="flexSwitchCheckDefault">
  <label  for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div >
  <input  type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
  <label  for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>
<div >
  <input  type="checkbox" role="switch" id="flexSwitchCheckDisabled" disabled>
  <label  for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
</div>
<div >
  <input  type="checkbox" role="switch" id="flexSwitchCheckCheckedDisabled" checked disabled>
  <label  for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>
</form>

Also, please note that alignment and positioning are two different things. in this case, your question was about positioning instead.

when we say of alignment of text, we generally refer to the text-align property.

.some_text {
  text-align: left;
}

so don't be confused between alignment and positioning.

Update

For reducing the space between the label and the switch, remove the justify-content property and add a margin-right to the label.

.form-switch {
  display: flex;
  flex-direction: row-reverse;
}

.form-switch label {
 margin-right: 50px !important;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<form>
  <div >
  <input  type="checkbox" role="switch" id="flexSwitchCheckDefault">
  <label  for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div >
  <input  type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
  <label  for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>
<div >
  <input  type="checkbox" role="switch" id="flexSwitchCheckDisabled" disabled>
  <label  for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
</div>
<div >
  <input  type="checkbox" role="switch" id="flexSwitchCheckCheckedDisabled" checked disabled>
  <label  for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>
</form>

Here is a fiddle for it