Bootstrap 4 - Left aligning a large checkbox

Question

Bootstrap 4.

<div class="form-group">
    <label asp-for="Enabled" class="control-label"></label>
    <input asp-for="Enabled" class="form-control" type="checkbox" />
    <span asp-validation-for="Enabled" class="text-danger"></span>
</div>

I have a form (see image). I would like the check box to be underneath the word "Enabled" not centred like the other full width controls.

If I set "width: auto;" on the checkbox, this does the job, but then displays a small checkbox (I want a large one). See image.

<div class="form-group">
    <label asp-for="Enabled" class="control-label"></label>
    <input asp-for="Enabled" class="form-control" style="width: auto;" type="checkbox" />
    <span asp-validation-for="Enabled" class="text-danger"></span>
</div>

My question is, how can I get a large left aligned checkbox on my form?

Answer 1

I am also searched before for the same issue, but not satisfied with the above answer that's why I have done my research and I found a good solution. Just add class "col-sm-1" in the input tag, you are done.

<div class="col-8">
   <input asp-for="IsUrgent" type="checkbox" class="form-control col-sm-1" />
   <span asp-validation-for="IsUrgent" class="text-danger" />
</div>

Answer 2

you can also use like this if you are not satisfying with class name

input[type="checkbox"]{
  width: 30px; /*Desired width*/
  height: 30px; /*Desired height*/
  cursor: pointer;
  -webkit-appearance: none; /* if you want check inside box then remove this line*/
  appearance: none; /* if you want check inside box then remove this line*/
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<form>
  <div class="form-group">
    <label asp-for="Enabled" class="control-label">Enabled</label>
    <input asp-for="Enabled" class="form-control checkbox-large" type="checkbox" />
    <span asp-validation-for="Enabled" class="text-danger"></span>
  </div>
</form>