title: Bootstrap 4 - input-btn-padding y and x variable overrides not customising bootstrap.css file
body: <p>ASP.NET project, using the NuGet package bootstrap.sass, version 4.3.1. Using Visual Studio 2017 with the extension Web Compiler to compile the Sass.</p>
  
  <p>In a custom.scss file, I'm overriding many bootstrap variables that work correctly. </p>
  
  <p>When trying to override the variables $input-btn-padding-y and $input-btn-padding-x they do not affect the padding values on the form-control or btn classes in the compiled bootstrap.css file. Other customisations are applied correctly.</p>
  
  <p>Based on the _variables.scss file that ships with bootstrap 4, it looks like customising the input-btn-padding vairables should affect both since their values are derived from the base variables.</p>
  
  <p>When I customise the $input-padding-y, $input-padding-x variables, it customises correctly and updates the form-control class. Same for $btn-padding-y and $btn-padding-x.</p>
  
  <p>Is there anything wrong with customising the base-level $input-btn-padding-y/$input-btn-padding-x variables or am I required to customise the higher level values?</p>
  
  <p>I've tried compiling the Sass with the Web Compiler extension and a custom, basic, gulpfile that achieved the same result. I've also started a fresh project, updated to the same version of bootstrap 4 and ended up in the same place.</p>
  
  <p>The _variables.scss looks like overriding the base variable should work:</p>
  
  <pre><code>$input-btn-padding-y:         .375rem !default;
  $input-btn-padding-x:         .75rem !default;
  ...
  $btn-padding-y:               $input-btn-padding-y !default;
  $btn-padding-x:               $input-btn-padding-x !default;
  ...
  $input-padding-y:                       $input-btn-padding-y !default;
  $input-padding-x:                       $input-btn-padding-x !default;
  </code></pre>
  
  <p>The relevant custom.scss overrides:</p>
  
  <pre><code>$input-btn-padding-y: 0.75rem;
  $input-btn-padding-x: 1rem;
  </code></pre>
  
  <p>Resulting padding for form-control in bootstrap.css:</p>
  
  <pre><code>.formcontrol {
      ...
      padding: 0.375rem 0.75rem;
      ...
  }
  </code></pre>
  
  <p>Same for btn:</p>
  
  <pre><code>.btn {
      ...
      padding: 0.375rem 0.75rem;
      ...
  }
  </code></pre>