CODEWITHSUNDEEP
reactjsreactstrap
Pragin M
Pragin M

Reputation: 58

Align Cards horizontally using ReactStrap

I am trying to create a deck of cards using reactstrap. I want the cards to be aligned horizontally but the cards are aligned vertically. Can someone please tell me how achieve this? Thanks

These are the two Components 

import React, { Component } from "react";
import {
Card,
CardImg,
CardText,
CardBody,
CardTitle,
CardSubtitle,
Button,
Col
} from "reactstrap";`

class MovieItem extends Component {
render() {
return (
  <Card>
    <CardTitle>Title</CardTitle>
  </Card>
);
}
}

export default MovieItem;`

MovieList.js

import { Row, Col, CardDeck, CardGroup, Container } from "reactstrap";
import React, { Component } from "react";`
import MovieItem from "./MovieItem";`

class MoviesList extends Component {
render() {
let movies;
if (this.props.movies) {
  movies = this.props.movies.map(movie => {
    return <MovieItem key={movie.id} movie={movie} />;
  });
}
return (
  <Container fluid>
    <CardDeck> {movies}</CardDeck>
  </Container>
);
}
}

export default MoviesList;

Upvotes: 1

Views: 4405

Answers (2)

Hamed
Hamed

Reputation: 595

As Bootstrap and Reactstrap Card said, you can integrate them like this :

      <Row>
        <Col>
          <Card>
            <Row className="no-gutters">
              <Col md="4">
                <CardImg
                  top
                  width="100%"
                  src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180"
                  alt="Card image cap"
                />
              </Col>
              <Col md="8">
                <CardBody>
                  <CardTitle>Card title</CardTitle>
                  <CardSubtitle>Card subtitle</CardSubtitle>
                  <CardText>
                    Some quick example text to build on the card title and
                    make up the bulk of the card's content.
                  </CardText>
                  <Button>Button</Button>
                </CardBody>
              </Col>
            </Row>
          </Card>
        </Col>
      </Row>

Upvotes: 1

Khaled Adrani
Khaled Adrani

Reputation: 171

I have encountered the same problem. The basic solution is to put your group of cards inside a Row Component. This is a snippet from my code.

<Container  fluid>

  <Row>
    <ClassroomCard/>
    <ClassroomCard/>
    <ClassroomCard/>
  </Row>

  <Row>
    <ClassroomCard/>
    <ClassroomCard/>
    <ClassroomCard/>
  </Row>

</Container>

Later, it's up to you to change the style of your elements accordingly. I hope this will help those who will encounter this problem in the future.

Upvotes: 0

Related Questions