title: How to use Bootstrap 4 (3) Mixins
body: <p>How to use Bootstrap mixins. I use Bootstrap 4 in combination with CSS Modules, SCSS. For example this is a bootstrap mixins for input-size. </p>
  
  <pre><code>@mixin input-size($parent, $input-height, $padding-y, $padding-x, $font-size, $line-height, $border-radius) {
    #{$parent} {
      height: $input-height;
      padding: $padding-y $padding-x;
      font-size: $font-size;
      line-height: $line-height;
      @include border-radius($border-radius);
    }
  
    select#{$parent} {
      height: $input-height;
      line-height: $input-height;
    }
  
    textarea#{$parent},
    select[multiple]#{$parent} {
      height: auto;
    }
  }
  </code></pre>
  
  <p>If I want to use it how would I do it? </p>
  
  <p><strong>First.jsx</strong></p>
  
  <pre><code>&lt;form&gt;
    &lt;div className={`form-group ${styles.formula}`}&gt;
      &lt;label htmlFor='exampleInputEmail1'&gt;Email address&lt;/label&gt;
      &lt;input type='email' className='form-control' id='exampleInputEmail1' aria-describedby='emailHelp' placeholder='Enter email' /&gt;
      &lt;small id='emailHelp' className='form-text text-muted'&gt;We'll never share your email with anyone else.&lt;/small&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>I am using it like this. The customBtn works good so I know it is not a settings problem. Input element is not?
  <strong>styles.scss</strong></p>
  
  <pre><code>.customBtn {
    @include button-variant(white, purple, black)
  }
  .formula {
    @include input-size('.form-control', 70px, 12px, 12px, 32px, 5em, 0)
  }
  </code></pre>
  
  <p><strong>*Update</strong>
  Fixed it.
  It seems there was a problem with CSS Modules and Bootstrap class naming combination. I managed to resolve it like this.</p>
  
  <p><strong>First.jsx</strong></p>
  
  <pre><code>&lt;form&gt;
    &lt;div className={`form-group ${styles.formula}`}&gt;
      &lt;label htmlFor='exampleInputEmail1'&gt;Email address&lt;/label&gt;
      &lt;input type='email' className={`form-control ${styles.formControl}`} id='exampleInputEmail1' aria-describedby='emailHelp' placeholder='Enter email' /&gt;
      &lt;small id='emailHelp' className='form-text text-muted'&gt;We'll never share your email with anyone else.&lt;/small&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p><strong>styles.scss</strong></p>
  
  <pre><code>.customBtn {
    @include button-variant(white, purple, black)
  }
  .formula {
    @include input-size('.formControl', 70px, 12px, 12px, 32px, 5em, 0)
  }
  </code></pre>