Почему может не работать flexbox? ReactJS, Bootstrap

Я указываю у Container className='text-black-50 mt-1 d-flex justify-content-between align-items-center'. Однако никакого флекса к элементам не применяется на странице, они должны отображаться в строку по 4 элемента. Делаю все это по видео: https://youtu.be/H2GCkRF9eko?t=6253 У автора все работает, а у меня нет. Даже если менять Container на div. При чем раньше к другим элементам flex применялся нормально, а тут просто отказывается работать?

import { Card, Col, Image, Container } from "react-bootstrap";
import star from '../assets/star.png'

const DeviceItem = ({device}) => {
  return (
    <Col md={3}>
        <Card style={{width: 150, cursor: 'pointer'}} border={'light'}>
            <Image width={150} height={150} src={device.img}></Image>
            <Container className='text-black-50 mt-1 d-flex justify-content-between align-items-center'>
                <div>Samsung....</div>  
                <div className='d-flex align-items-center'>
                    <div>{device.rating}</div>
                    <Image width={14} height={14} src={star}/>      
                </div>
            </Container>
            <div>{device.name}</div>     
        </Card>
    </Col>
  );
};

export default DeviceItem;