Почему заголовок карусели Bootstrap виден в разработке, но не в производстве?

Я работаю над веб-сайтом портфолио, для которого я показываю скриншоты в карусели Bootstrap.

В React Development Server Captions отображаются и работают правильно:

npm run start

Браузер сервера разработки

Производственная сборка, катионы в HTML, но визуально не отображаются:

npm run build
serve -s build

Браузер рабочего сервера

<Carousel key= {'in-depth'+projectIndex}  activeIndex = {pageIndex} onSelect = {(i,e)=>{setPageIndex(i); console.info('select-called'); forceUpdate();}} className='col-lg-8 col-md-10' style = {{margin: '1.0rem auto',}}>
            {projects[projectIndex].pages.map((page,i) => 
                <Carousel.Item key = {projects[projectIndex].pages[i].target+i+projects[projectIndex].title} interval = {5000} style = {{maxHeight: '75vh', overflowY: page.type == 'vertical-scroll' ? 'scroll' : 'hidden'}} class = {i==0 ? 'active' : ''}>
                {page.type == 'video' ?
                <Player playing src = {conceptVersion}  height='420' width='720' controls = {true} style = {{margin: '0 auto', textAlign: 'center'}} className='project-image'/>
                : <img  className = "d-block w-100 project-image" src = {projects[projectIndex].pages[i].image} alt = {projects[projectIndex].pages[i].target} />}
                    <h3 className='carousel-title' >{projects[projectIndex].title}</h3>
                    {page.type == 'vertical-scroll' ? <div></div>
                    : <div id='describe-box' className='carousel-description-box' style = {{}}>
                        <p className='carousel-description' >{projects[projectIndex].pages[i].description}</p>
                    </div>}
                </Carousel.Item>)}
        </Carousel>

Исходный код: https://github.com/ethanjohnsrud/portfolio/blob/main/src/Projects/Projects.jsx

Живой сайт: https://5fd8f2548eaa992466b41f48--ethan-johnsrud-portfolio.netlify.app/

Любая идея, в чем разница, и как я могу решить проблему?