horizontal row of checkboxes using Bootstrap

Question

I am trying to make a horizontal row of checkboxes inside a form. I have managed to get a very ugly version to work by doing:

div.form-group(ng-show = 'avariable')
    label 1
    input(type = 'checkbox' ng-model='weight' ng-change='weight(1)')
    label 2
    input(type='checkbox' ng-model='weight' ng-change='weight(2)')

I thought about writing a CSS class to put some spacing between the labels and checkboxes, but I am hoping there is a Bootstrap solution. I need it to be responsive. I have also played with .controls-row and control-group classes. They make things look nice, but the checkboxes align vertically.

EDIT: I also tried this solution based on the SO post linked from the answer below. The checkboxes still line up vertically.

div.control-group(ng-show = 'questionData.sweighted || questionData.eweighted')
    div.controls.span2
        label.checkbox 1
            input(type = 'checkbox' ng-model='weight' ng-change='weight(1)')
    div.controls.span2
        label.checkbox 2
            input(type = 'checkbox' ng-model='weight' ng-change='weight(2)')
    div.controls.span2
        label.checkbox 3
            input(type = 'checkbox' ng-model='weight' ng-change='weight(3)')

have you tried putting the checkboxes in a <ul class="list-inline">? — NooBskie
– NooBskie, Commented Sep 6, 2015 at 2:57
it comes out the same as my code sample above. I'm looking for a bootstrap solution that provides good spacing like the .form-group class — user137717
– user137717, Commented Sep 6, 2015 at 3:19

Community · Accepted Answer · 2017-05-23 11:58:03Z

0

This has been answered before here: Twitter Bootstrap - checkbox columns / columns within form

"You can achieve such a setup by separating the checkbox blocks within the .control-group container instead of each .control container like so:"

See the link above for the entire explanation.

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered Sep 6, 2015 at 3:33

Nathaniel Flick

2,9732 gold badges27 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nathaniel Flick Over a year ago

Can you put your attempt in a codepen or jsfiddle so we can have a look?

user137717 Over a year ago

i edited my original post with the attempt. since it's jade, it doesn't look like anything in a fiddle.

Collectives™ on Stack Overflow

horizontal row of checkboxes using Bootstrap

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related