Не работает карусель React Bootstrap

Пытаюсь создать слайдер изображений в своём реакт-приложении. Установил через npm react-bootstrap.

Прописал необходимый код, но карусель отображается не правильно, как будто в ней стили весь css убрали и остался один html. Прикрепляю скрин: введите сюда описание изображения

Соответственно, когда я добавляю несколько изображений через Carousel.Item, получается вот так: введите сюда описание изображения

Видно, что в самом верху появилось три пункта навигации по слайдеру, однако он всё ещё не работает.

import Carousel from 'react-bootstrap/Carousel';
import oneImg from '../assets/1.png';
import twoImg from '../assets/2.png';
import threeImg from '../assets/3.png';

export default function CarouselBox() {
  return (
    <Carousel>
      <Carousel.Item>
        <img
          className="d-block w-100"
          src= {oneImg}
          alt="First slide"
        />
        <Carousel.Caption>
          <h3>First slide label</h3>
          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </Carousel.Caption>
      </Carousel.Item>
      
      <Carousel.Item>
        <img
          className="d-block w-100"
          src= {oneImg}
          alt="First slide"
        />
        <Carousel.Caption>
          <h3>First slide label</h3>
          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </Carousel.Caption>
      </Carousel.Item>
      
      <Carousel.Item>
        <img
          className="d-block w-100"
          src= {oneImg}
          alt="First slide"
        />
        <Carousel.Caption>
          <h3>First slide label</h3>
          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </Carousel.Caption>
      </Carousel.Item>
    </Carousel>
  );
}

Ответы (1 шт):

Автор решения: Габриель

Ответ: Необходимо дописать ещё одну строчку импорта для подключения стилей

import 'bootstrap/dist/css/bootstrap.min.css';

Спасибо, Daniil Loban

→ Ссылка