title: Customizing Bootstrap Sass Components
body: <p>I'm someone who is very new to Bootstrap 5 and Sass, and I've been really enjoying my time learning them both! I just have a quick couple of questions...</p>
  <p>When it comes to customizing Bootstrap Sass, I know you can do variable overrides (to change certain colors, fonts, etc.), but when it comes to making changes to various components (such as Bootstraps Nav component), is it good practice to override some of the prewritten classes with my own changes - or should I rewrite new classes and just reference them in my HTML?</p>
  <p>For example, I want to have a specific nav for my header with a certain colored background, hover, font, and border radius; however, I don't want to maintain that style for the other navs used throughout my page. <strong>What would I do in this instance?</strong></p>
  <p>My current approach is to just create some more custom variables, and then create a custom class for my nav header where certain things will be applied.</p>
  <p>Here is how my main .scss file is set up as well:</p>
  <pre><code>// Custom.scss
  // Option B: Include parts of Bootstrap
  
  // 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
  @import &quot;../node_modules/bootstrap/scss/functions&quot;;
  
  // 2. Include any default variable overrides here
  
  // 3. Include remainder of required Bootstrap stylesheets
  @import &quot;../node_modules/bootstrap/scss/variables&quot;;
  @import &quot;../node_modules/bootstrap/scss/mixins&quot;;
  
  // 4. Include any optional Bootstrap components as you like
  @import &quot;../node_modules/bootstrap/scss/root&quot;;
  @import &quot;../node_modules/bootstrap/scss/reboot&quot;;
  @import &quot;../node_modules/bootstrap/scss/type&quot;;
  @import &quot;../node_modules/bootstrap/scss/images&quot;;
  @import &quot;../node_modules/bootstrap/scss/containers&quot;;
  @import &quot;../node_modules/bootstrap/scss/grid&quot;;
  
  // 5. Add additional custom code here
  </code></pre>
  <p>Thanks for your help!</p>
  <p><strong>Edit:</strong>
  <strong>Here's an example of a customization</strong>. I wanted to change the nav hover option for only one use case (in my header), so I created a new file called <code>_custom-nav.scss</code> where I put this class:</p>
  <pre><code>  .hover-light {
        &amp;:hover {
          background-color: $nav-pills-hover-color;
        }
    }
  </code></pre>
  <p>I would then reference this class in my HTML so that my page is properly styled.</p>
  <p>Is this bad practice? I would just manually change the variables and hover options within Bootstraps nav; however, I only needed this hover option for the nav in my header.</p>