CODEWITHSUNDEEP
twitter-bootstrapreactjs
Jason O.
Jason O.

Reputation: 3300

Bootstrap in React.js

My simple React hello world example isn't letting me list the items horizontally.

It looks like bootstrap .col-sm-4 isn't getting applied. I'm sure I'm missing something super simple.

http://plnkr.co/edit/QWCkRzHMe5jUfIMVig2P?p=preview

var HelloWorld = React.createClass({

  render: function() {

    return (

      <div className="container">
        <div className="row">
          <div className="col-sm-4">Left</div> 
          <div className="col-sm-4">Middle</div> 
          <div className="col-sm-4">Right</div> 
        </div> 
      </div>  

    );
  }
});

// Now lets render the component.
React.render(<HelloWorld/>, // We pass the value of the prop through an attribute
document.getElementById('app') // Element to attach component to
);

Upvotes: 1

Views: 296

Answers (1)

Tom
Tom

Reputation: 370

It actually works ! The problem is that the preview panel is just too small, and 'col-sm-4' does not apply. Just open it in a new window or replace 'col-sm-4' by 'col-xs-4' and it will work.

Consider using http://react-bootstrap.github.io/ to get an abstraction of all these classes and use instead : 

render : function () {
  return (
    <Grid>
      <Row>
        <Col xs={6} sm={4}></Col>
        <Col xs={6}></Col>
      </Row>
    </Grid>
  );
}

Upvotes: 1

Related Questions