Combining Bootstrap classes with custom CSS in Next.JS-CodePudding

So I'm fairly new to Next.JS and have been trying to use it with Bootstrap. The problem is, I can't use Bootstrap classes with my own custom CSS classes together in the className field. I found two answers to this exact question here and they both suggest using template literals. However, that just doesn't work for me.

This is what my code looks like at the moment.

import homeSytle from '../styles/Home.module.css'

export default function Home() {
  return (
    <div className='text-center h-100'>
      <div className={'${homeSytle.bgMain} container-fluid'}>
        <h1>Test</h1>
        <button type="button" className="btn btn-primary mt-5">Primary</button>
      </div>
    </div>
  )
}

According to this answer, the code above should work fine. However, VS Code keeps saying that the homeStyle import is never used and needless to say, I don't see my background image.

How can I write Boostrap classes with my own custom CSS classes in the same className attribute?

CodePudding user response：

Use back-ticks instead of the single quote when you have to combine multiple classes which are module-based and readymade.

import homeSytle from '../styles/Home.module.css'

export default function Home() {
  return (
    <div className='text-center h-100'>
      <div className={`${homeSytle.bgMain} container-fluid`}>
        <h1>Test</h1>
        <button type="button" className="btn btn-primary mt-5">Primary</button>
      </div>
    </div>
  )
}