CSS with input checkbox

Question

I have a label 'deduplication' with a checkbox. I would like to have my checkbox very close to the label.

Here is the HTML :

<div class="form-group">
  <label for="dedup">deduplication</label>
  <input 
    formControlName="dedup"
    style="text-align:left;"
    id="dedup" 
    type="checkbox" 
    class="form-control">
</div>

And here is the page :

I added "text-align:left" but my checkbox is still on the middle

Just follow the instructions here (as it looks as though you're using Bootstrap) https://getbootstrap.com/docs/4.0/components/forms/#inline — Andy Holmes, Aug 20 '20 at 10:45
This question was answered once already. Check [this](https://stackoverflow.com/questions/306252/how-to-align-checkboxes-and-their-labels-consistently-cross-browsers) out — Carlos, Aug 20 '20 at 10:49

score 0 · Accepted Answer · answered Aug 20 '20 at 10:46

0

You just need to use the example on the Bootstrap website

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" id="dedup" value="1">
      <label class="form-check-label" for="dedup">deduplication</label>
    </div>

answered Aug 20 '20 at 10:46

Andy Holmes

7,817
10
50
83

No idea why this has been downvoted, it does what the OP is requesting as they're clearly using Bootstrap going by the class names – Andy Holmes Aug 20 '20 at 11:09
Same! Exactly I have no idea to why someone downvoted my answer as well even though I provided a solution to what OP wanted and as per the HTML added. – Always Helping Aug 20 '20 at 18:45

CSS with input checkbox

1 Answers1