Bootstrap grid breaks when text wraps

[matthisco]

Markup:

    `<div key={this.props.attendanceCode.code} className="col-md-4 col-sm-3 col-xs-4">
            <div className="attendance-code-key-item well">
                <div className="col-md-11 col-sm-11 col-xs-11  ">
                    <strong>{this.props.attendanceCode.code}</strong> {this.props.attendanceCode.description}
                </div>
                <div className="col-md-1 col-sm-1 col-xs-1 ">
                    <StatusIndicator trueIcon="check" falseIcon="times"
                                     value={this.props.attendanceCode.isStandardCode} />
                </div>
            </div>
        </div>

`

Result:

Any ideas?

[Paulie_D]

A Codepen demo would be more useful than the bare code.

[matthisco]

http://codepen.io/matthisco/pen/vNpxVo

[matthisco]

Thanks codepen above ^^^

[Paulie_D]

This I assume is ReactJs (judging by the data-reactids all over the place).

That doesn’t seem to be included in the Codepen.

Plus Bootstrap usually has a row class.

[matthisco]

Thanks for the reply.

I’m using react to map the props to each component, how would I insert each row?

https://jsfiddle.net/37mAD/52/

[Paulie_D]

how would I insert each row?

I have no idea but I’d assume that this would be in the docs somewhere.

Otherwise, manually.

[Author]

Posts