Add color with React.jsx and Bootstrap

[franciscomonellole]

Hello guys, i was trying change the color of this projects to gray but i don’t know how to do it, i check the Bootstrap guide of FFC but it doesn’t help my issue. By the way here is the code.

import React from 'react'
import Badge from 'react-bootstrap/Badge'


function App() {
  

  return (
    <div className="App">
      <div className='container'>
        <div className='row mt-4'>
          <div className='col text-center'>
       <h1>
        <Badge className='text-align-center --bs-light-bg-subtle '   >
          Markdown Previewer 
        </Badge>
       </h1>
       </div>
       </div>
       <div className='row mt-4'>
        <div className='col-md-6'>
          <h4>
            <Badge className='text-align-center' variant="secondary">
              Markdown Input
            </Badge>
          </h4>
          </div>
          <div className='col-md-6'>
        <h4>
        <Badge className='text-align-center' variant="secondary">
         Preview
        </Badge>
        </h4>
        </div>
        
       </div>
       </div>
      </div>
  )
 
}

export default App

[lasjorg]

Not sure what version of BS you are using but the class name looks to be bg-light-subtle.

• background
• colors

---

-- would be a custom property, if it is a style that is using one and you want it to be overwritten you would use it with the style attribute (or in a stylesheet I guess).

style="--bs-light-bg-subtle: red"

<div class="p-3 mb-2 bg-light-subtle text-emphasis-light" style="--bs-light-bg-subtle: red">.bg-light-subtle</div>

Background