Bootstrap 4 - Left aligning a large checkbox - css

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>

Answer 3

Its not tidy by setting an height and width for the checkbox should do the trick.
.checkbox-large {
width: 25px !important;
height: 25px
}
<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>