CODEWITHSUNDEEP
reactjsreact-bootstrap
element2562
element2562

Reputation: 38

React-Bootstrap Grid layout not applying

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!

Upvotes: 0

Views: 1103

Answers (1)

JozeFe
JozeFe

Reputation: 81

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

Upvotes: 1

Related Questions