Bootstrap in React.js

Question

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
);

plnkr.co/edit/TwAdiDJxXpDodcAIs62d?p=preview

knowbody
– knowbody

2015-07-23 06:38:59 +00:00
Commented Jul 23, 2015 at 6:38 — knowbody
– knowbody, Commented Jul 23, 2015 at 6:38

Tom · Accepted Answer · 2015-07-23 06:35:33Z

1

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>
  );
}

answered Jul 23, 2015 at 6:35

Tom

3801 silver badge11 bronze badges

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

Collectives™ on Stack Overflow

Bootstrap in React.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related