React-bootstrap: justified button groups render incorrectly

[kastork]

<ButtonGroup justified>

renders

class="btn-group btn-group-justified"

The bootstrap docs suggest it should be

class="btn-group.btn-group-justified"

[kastork]

Arg, never mind.

Proper use involves nested ButtonGroup components.

[MPieter]

Just looking for some clarification on this topic.

The proper way of rendering a justified ButtonGroup is thus:

            <ButtonGroup justified>
                <ButtonGroup>
                        <Button>Button 1</Button>
                </ButtonGroup>
                <ButtonGroup>
                        <Button>Button 2</Button>
                </ButtonGroup>
                <ButtonGroup>
                        <Button>Button 3</Button>
                </ButtonGroup>
                <ButtonGroup>
                        <Button>Button 4</Button>
                </ButtonGroup>
            </ButtonGroup>

Isn't this really verbose ? Isn't this something that could be taken care of by the react-bootstrap library?

And maybe we should update the docs on this topic ?The current version could use some clarification: http://react-bootstrap.github.io/components.html#btn-groups-justified

[taion]

No, that's not right. Follow the example on the components page. It looks like the OP doesn't understand .btn-group.btn-group-justified means - the markup we render follows what's in upstream Bootstrap.