react-bootstrap grid layout columns rendering as rows

react-bootstrap grid example
react-bootstrap grid not working
react-bootstrap layout
react-bootstrap layout example
react column layout
grid is not exported from 'react-bootstrap
react-bootstrap padding
react-bootstrap row height

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?

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/

Layout, specified the Col component will render equal width columns <Row>. <Col>​1 of 2</Col>. <Col>2 of 2</Col>. </Row>. Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.

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

Layout Components (Container, Row, Col), reactstrap - easy to use React Bootstrap 4 components compatible with React 16​+. import React from 'react'; import { Container, Row, Col } from 'reactstrap'; return ( <Container> <Row xs="2"> <Col>Column</Col> <Col>Column</Col>  The first step is to install react-dom and react-bootstrap. React-Bootstrap applies all of the Bootstrap 3 components as React components, so you can embed them into your JS files.

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"
  />

Grids, Rows, and Columns in React-Bootstrap, The fourth PlaceCard should be rendered on another row. Turns out, one important piece of information we found out later is that  Two columns with two nested columns Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.

react-bootstrap grid layout columns rendering as rows - html, 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  Layout. Options for structuring your pages with Bootstrap, including global styles, required scaffolding, grid system, and more.

Layout components not working · Issue #1684 · react-bootstrap/react , So I got this MainLayout component: import React from 'react'; import { render } from 'react-dom'; import { Grid, Row, Col } from 'react-bootstrap';  React Grid system - Bootstrap 4 & Material Design. Use the powerful responsive flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, and dozens of predefined classes. MDBReact grid system uses a series of components: Rows, Containers and Columns to layout and align content.

Building responsive grids with React Bootstrap – Gary Sieling, To render a table, React Bootstrap provides React classes named “Grid”, “Col”, and “Row”, which can be used interchangeably in a table. The Bootstrap grid system is a 12 column grid, and these tell Bootstrap how many  reactstrap - easy to use React Bootstrap 4 components compatible with React 16+

Comments
  • 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.
  • I also tried using the container class on my div and it didn't change anything.