title: I can't overwrite React Bootstrap components
body: <p>I'm new to web development and I have gotten quite far, but now I'm a little bit stuck on this problem.</p>
  
  <p>So I am currently using react bootstrap to style my webpage, but I am not able to override the default styles of the bootstrap. It works when I used style components but when I try to use css modules instead, it doesnt pick up the changes. Been trying to change it for a few hours now but I cant get it to wrap around my head.</p>
  
  <p>I did find some suggestions to use scss or custom themes but I just get confused because instructions are not clear. Can someone maybe help point to documentation on how to change customize React Bootstrap, and I hope its a beginner friendly documentation or video</p>
  
  <p>ORRRRR</p>
  
  <p>Should I give up on react bootstrap and just use bootstrap in my projects instead </p>
  
  <p>So this is an example with styled components that worked:</p>
  
  <pre><code>import React from 'react'
  import Jumbotron from 'react-bootstrap/Jumbotron'
  import { Container, Row, Col} from 'react-bootstrap'
  import styled from 'styled-components'
  
  const Footer =() =&gt; 
       (
          &lt;FooterContainer&gt;
              &lt;Jumbotron fluid className="footer"&gt;
              &lt;Container fluid&gt;
              &lt;Row noGutters&gt;
                  &lt;Col&gt;Links&lt;/Col&gt;
                  &lt;Col xs={6}&gt;Links&lt;/Col&gt;
                  &lt;Col&gt;Copyright Kimi 2020&lt;/Col&gt;
              &lt;/Row&gt;
              &lt;/Container&gt;
              &lt;/Jumbotron&gt;
          &lt;/FooterContainer&gt;
      )
  
  export default Footer;
  
  const FooterContainer = styled.div `
  .footer {
      margin: 0px;
      padding : 1.5rem;
      background-color: black;
  }
  
  .footer .row {
      color: white
  }
  `
  </code></pre>
  
  <p>But when I try to use css modules, it doesnt pick up the changes anymore. as in the text becomes defauly grey instead of white</p>
  
  <p>Component:</p>
  
  <pre><code>import React from 'react'
  import Jumbotron from 'react-bootstrap/Jumbotron'
  import { Container, Row, Col} from 'react-bootstrap'
  import classes from './ComponentsStyle/Footer.module.css'
  
  const Footer =() =&gt; 
       (
          &lt;div&gt;
              &lt;Jumbotron fluid className={classes.footer}&gt;
              &lt;Container fluid&gt;
              &lt;Row noGutters&gt;
                  &lt;Col&gt;Links&lt;/Col&gt;
                  &lt;Col xs={6}&gt;Links&lt;/Col&gt;
                  &lt;Col&gt;Copyright Kimi 2020&lt;/Col&gt;
              &lt;/Row&gt;
              &lt;/Container&gt;
              &lt;/Jumbotron&gt;
          &lt;/div&gt;
      )
  
  export default Footer;
  </code></pre>
  
  <p>CSS file: </p>
  
  <pre><code>div .footer {
      margin: 0px;
      padding : 1.5rem;
      background-color: black;
  }
  
  div .footer .row {
      color: white
  }
  </code></pre>