CODEWITHSUNDEEP
reactjsreactstrap
FoxaLiveJS
FoxaLiveJS

Reputation: 263

How Customize column with Reactstrap

I'm using reactstrap to display a movie poster grid.

I have to display 20 items, I set the size of the columns in this way md = {2} for one item, I would like to get 5 items per line because I always end up with white space at the end of my row.

So I try the value md={3} but on wide screen but the size of the column is too large.

I tried to add a fixed width to the posters to decrease the size of the column but on smaller device, the grid become disordered.

const MovieList = (props) => {
   return (
      <Container>
        <Row>
           {props.movieList.map(movie =>(
              <Col md={2}>
                <MovieListItem  key={movie.id} movie={movie} />
              </Col>
           ))}
       </Row>
      </Container>

 export default MovieList

I would like to customize the width of the columns to create smaller columns.

Or if it is possible to go from 12 to 16 columns.

But I do not know how to do it all with reactstrap

Upvotes: 1

Views: 1140

Answers (1)

Eugene Zhukov
Eugene Zhukov

Reputation: 81

If you want 5 only columns in the row, you could probably use just 5 elements without specifying their size and they'll fit full row width. Something like this:

<Container>
    <Row>
       {props.movieList.slice(0,5).map(movie =>(
          <Col>
            <MovieListItem  key={movie.id} movie={movie} />
          </Col>
       ))}
   </Row>
</Container>

Upvotes: 1

Related Questions