How can I style map items to display in justify-content-around?

Question

I'm looping through products by mapping them and the justify-content-around doesn't apply to them and I'm using bootstrap 4 in my react project .

Here is my code :

{props.products.map((item) => {
                if (item.inCart) {
                    return (
                        <div className="d-flex justify-content-around w-100" key={item.id}>
                            <button>remove</button>
                            <div>
                                <h5>{item.name}</h5>
                            </div>
                            <div>
                                <h5>{item.price.toLocaleString('ar-EG')}</h5>
                            </div>
                            <div>
                                <h5>{item.number.toLocaleString('ar-EG')}</h5>
                            </div>
                            <div>
                                <h5>{(item.number * item.price).toLocaleString('ar-EG')}</h5>
                            </div>
                            <hr />
                        </div>
                    );
                }

The display flex class applies but not the other one and they all have no margin between them .

How can I make them to display justify-content-around ??

Check this https://stackoverflow.com/questions/24052569/justify-content-property-isnt-working — Akhil Chandran, May 26 '20 at 16:59

Quentin Grisel · Accepted Answer · 2020-05-26T17:22:38.333

Your problem come from the <hr> tag. I just discovered it by doing this repro on stackblitz. Remove it and it works.

If you readlly need it then just receate it:

const Divider = () => {
  return <div className="border-bottom" />;
};

This one is bootstrap dependant but of course you can make it generic easily. You just need to apply it outside of your flex container :

<>
  <div className='d-flex justify-content-around' key={item.id}>
    <button>remove</button>
    <h5>{item.name}</h5>
    <h5>{item.name}</h5>
    <h5>{item.name}</h5>
  </div>
  <Divider />
</>;

How can I style map items to display in justify-content-around?

1 Answers1