react-bootstrap grid layout columns rendering as rows

Question

I have the following render method and I am expecting to have two columns in my layout but am getting two rows instead:

  render() {
return (
    <div>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css" />
        <Grid>
            <Row>
                <Col>
                    My Header
                </Col>
            </Row>
            <Row>
                <Col>test</Col><Col>test</Col>
            </Row>
        </Grid>
  </div>
);

I'd expect things to render like this:

My header

Col One Col Two

but instead things are rendered like this:

My header

Col One

Col Two

What am I missing?

user1847 · Accepted Answer · 2019-05-17 23:48:30Z

2

You are likely not importing the bootstrap css. Check out this issue on Github or the documentation on this page for React Bootstrap.

From React Bootstrap Website:

Because React-Bootstrap doesn't depend on a very precise version of Bootstrap, we don't ship with any included css. However, some stylesheet is required to use these components. How and which bootstrap styles you include is up to you, but the simplest way is to include the latest styles from the CDN.

<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
  crossorigin="anonymous"
  />

answered May 17, 2019 at 23:48

user1847

3,8791 gold badge31 silver badges38 bronze badges

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

Comments

nedlaback · Accepted Answer · 2018-06-05 06:19:16Z

I had the same problem. I resolved it by adding xs- specifications. Not entirely sure why it fixed it, so can't really elaborate on that. Maybe someone more experienced can.

To clarify, here's a working example of your code:

render() {
return (
    <div>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css" />
        <Grid>
            <Row>
                <Col>
                    My Header
                </Col>
            </Row>
            <Row>
                <Col xs = "5" >test</Col><Col xs = "5" >test</Col>
            </Row>
        </Grid>
  </div>
);

pushpak hurpade · Accepted Answer · 2017-09-02 20:13:33Z

0

TRY this code

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

For more info : https://getbootstrap.com/docs/4.0/layout/grid/

answered Sep 2, 2017 at 20:13

pushpak hurpade

493 bronze badges

2 Comments

Jarrod Johnson Over a year ago

Thanks for the suggestion but that produced a similar output. Do you have a suggestion using react-bootstrap's Grid component? That is what I'm really trying to leverage.

Jarrod Johnson Over a year ago

I also tried using the container class on my div and it didn't change anything.

Collectives™ on Stack Overflow

react-bootstrap grid layout columns rendering as rows

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related