CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Curtis
Curtis

Reputation: 2704

Change position of checkbox label to inline

I'm currently trying to put together a form with Bootstrap 4 in React, however I can't seem to get my head around how to put text to the right of a checkbox and remain on the same line?

Here's what I'm attempting to get:

enter image description here

And here's what I'm getting:

enter image description here

Here's the HTML that I'm generating:

<div class="col-12 mt-3 row">
    <div class="float-left primary form-check form-check-inline">
        <input type="checkbox" class="form-check-input">
        <label title="" class="form-check-label">
            I don't want to receive marketing emails. Note that your data may be transferred to a country outside of the EEA as described in our privacy policy.
        </label>
    </div>
</div>

Upvotes: 0

Views: 659

Answers (1)

nishkaush
nishkaush

Reputation: 1548

You can make the div with class float-left primary form-check form-check-inline as a flex and add align-items-start class as well as remove form-check-inline class.

<div class="col-12 mt-3 row">
    <div class="d-flex align-items-start primary form-check">
        <input type="checkbox" class="form-check-input">
        <label title="" class="form-check-label">
            I don't want to receive marketing emails. Note that your data may be transferred to a country outside of the EEA as described in our privacy policy.
        </label>
    </div>
</div>

Upvotes: 2

Related Questions