Recently, I've been diving into the world of Next.JS and attempting to integrate it with Bootstrap. However, I've encountered a roadblock - the inability to combine Bootstrap classes with my own custom CSS classes within the className attribute. While browsing for solutions, I came across two suggestions involving the usage of template literals, but unfortunately, that approach failed to work for me.
Let me show you a snippet of my current code:
import homeStyle from '../styles/Home.module.css'
export default function Home() {
return (
<div className='text-center h-100'>
<div className={'${homeStyle.bgMain} container-fluid'}>
<h1>Test</h1>
<button type="button" className="btn btn-primary mt-5">Primary</button>
</div>
</div>
)
}
Despite assurances from this answer, my IDE keeps flagging the homeStyle import as unused, and to make matters worse, my background image isn't showing up as expected.
How can I effectively incorporate Bootstrap classes alongside my custom CSS classes within the same className attribute?