React-Bootstrap Grid layout not applying

Question

I am having issues getting grid (and row) to work in React-Bootstrap. All other components are functioning fine, but trying to get my items to display as a row has been a pain. My code:

PARENT COMPONENT

        <Grid>
        <Row className="show-grid">
                {this.state.results.map((movie, index) => (
                    <EachResult key={index} id={index} movie={movie} results={this.state.results} index={index} userInfo={this.props.userInfo} />
                ))}
        </Row>
        </Grid>

CHILD COMPONENT

    <Col>
    <h3>{props.movie.title}</h3>
    <Image src={url} width="125" height="220" thumbnail />
    <p><strong>Summary: </strong>{props.movie.overview}</p>
    <p><strong>Rating: </strong>{props.movie.vote_average}</p>
    <Button id={props.index} onClick={addGame}>Add</Button>
    </Col>

I have installed React-bootstrap and I am importing each Component as such:

import { Grid, Row } from "react-bootstrap";

and

import {Button, Image, Col} from "react-bootstrap"

Sorry for the messy code! Any help would be greatly appreciated

EDIT: I am importing the the stylesheet in my Index.html!

JozeFe · Accepted Answer · 2018-11-06 21:56:38Z

1

Try add Col size parameter eg.

 <Grid>
    <Row className="show-grid">
      <Col md={3}>
        ...
      </Col>
    </Row>
  </Grid>

Vid office doc

Check output DOM in browser, in most browsers F12, in chrome check specific element with Ctrl+Shift+C. Hope it will help

answered Nov 6, 2018 at 21:56

JozeFe

816 bronze badges

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

Collectives™ on Stack Overflow

React-Bootstrap Grid layout not applying

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