I can't get cards displayed horizontally using React bootstrapping

Question

I am trying to build a portfolio website using React Bootstrapping. I use a card component to display images but they will only display vertically. I am trying to get them to display horizontally. I have tried troubleshooting with some CSS in the Card.js file. There have been no changes. Below is my code.

index.css

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}


.g-card {
  margin: 20px;
}


.g-card-image {
  border-radius: 10px;
  width: 300px;
  height: 480px;
  box-shadow: 0px 0px 3px 1px #ccc;
}


.g-card-info {
  margin-top: 10px;
  min-height: 100px;
}


.g-card-title {
  font-size: 24px;
  margin: 0px;
}


.g-card-sub-title {
  font-size: 16px;
  margin: 0px;
}

Card.js

import React from 'react';

import CardInfo from './Cardinfo';

function Card(props) {

    return (
        <div className="d-inline-block g-card" >
            <img className="g-card-image" src={props.item.imgSrc} alt={props.item.imgSrc} />
            { props.item.selected && <CardInfo title={props.item.title} subTitle={props.item.subTitle} link={props.item.link} /> }
        </div>
    )

}

export default Card;

Carousel.js

import React from 'react';

import Card from './Card';

import EricDP from '../assets/images/EricDP.jpg';
import Github from '../assets/images/Github.png';
import Trailhead from '../assets/images/Trailhead.png';

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';

class Carousel extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            items: [
                {
                    id: 0,
                    title: 'LinkedIn',
                    subTitle: 'Check out my LinkedIn!',
                    imgSrc: EricDP,
                    link: '',
                    selected: false
                },
                {
                    id: 1,
                    title: 'Github',
                    subTitle: 'See my projects on Github, including this site!',
                    imgSrc: Github,
                    link: '',
                    selected: false
                },
                {
                    id: 2,
                    title: 'Trailhead',
                    subTitle: 'See my Trailhead profile and salesforce skills.',
                    imgSrc: Trailhead,
                    link: '',
                    selected: false
                }
            ]
        }
    }

    handleCardClick = (id, card) => {
        let items = [...this.state.items];

        items[id].selected = items[id].selected ? false : true;

        items.forEach(item => {
            if (item.id !== id) {
                item.selected = false;
            }
        });

        this.setState({
            items
        });
    }

    makeItems = (items) => {
        return items.map(item => {
            return <Card item={item} onClick={(e => this.handleCardClick(item.id, e))} key={item.id} />
        })
    }

    render() {
        return (
            <Container fluid={true}>
                <Row className="justify-content-around">
                    {this.makeItems(this.state.items)}
                </Row>
            </Container>
        )
    }

}

export default Carousel;

Answer 1

I have added display: inline-flex to the Row tag in Carousel.js

file.

display:inline-flex applys flex layout to the flex items or children as well as to the container itself. As a result the container behaves as an inline flex element just like the children do and thus takes up the width required by its items/children only and not the entire width of the screen.

Carousel.js code :

<Container fluid={true}>
  <Row 
    style={{display: "inline-flex"}} 
    className="justify-content-around">            
      {this.makeItems(this.state.items)}
  </Row>
</Container>