CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Glyn
Glyn

Reputation: 1995

How to properly space bootstrap checkboxes horizontally

I am trying to align my bootstrap check boxes horizontally using:

<div class="blueBorder container-fluid col-lg-6 col-md-6 col-sm-6 col-xs-6">
    <div class="row">
        <div class="container-fluid">
            <label class="text-left col-lg-12 col-md-12 col-sm-12 col-xs-12 col-form-label">Attributes:</label>

            <input type="checkbox" value="">
            <label class="checkbox-inline col-lg-2">Camp Site</label>
            <input type="checkbox" value="">
            <label class="checkbox-inline">Offsite Visit</label>
            <input type="checkbox" value="">
            <label class="checkbox-inline">Scout Den</label>
            <input type="checkbox" value="">
            <label class="checkbox-inline">Hike</label>

        </div>
    </div>
</div>

I had an issue with my input fields not filling the width of the bootstrap container and found the solution on stackoverflow to add the css:

    input, textarea {
        width: 100% !important
    }

However, this is causing issues with the check box formatting. With the css:

enter image description here

Without the css:

enter image description here

Upvotes: 0

Views: 626

Answers (1)

Mahdy Poor
Mahdy Poor

Reputation: 32

please use this source if working with bootstrap

https://getbootstrap.com/docs/4.0/components/forms/#default-stacked

Upvotes: 1

Related Questions