CODEWITHSUNDEEP
twitter-bootstrapsassmixinsbootstrap-4
Igor-Vuk
Igor-Vuk

Reputation: 3797

How to use Bootstrap 4 (3) Mixins

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. 

@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;
  }
}

If I want to use it how would I do it?

First.jsx

<form>
  <div className={`form-group ${styles.formula}`}>
    <label htmlFor='exampleInputEmail1'>Email address</label>
    <input type='email' className='form-control' id='exampleInputEmail1' aria-describedby='emailHelp' placeholder='Enter email' />
    <small id='emailHelp' className='form-text text-muted'>We'll never share your email with anyone else.</small>
  </div>

I am using it like this. The customBtn works good so I know it is not a settings problem. Input element is not? styles.scss

.customBtn {
  @include button-variant(white, purple, black)
}
.formula {
  @include input-size('.form-control', 70px, 12px, 12px, 32px, 5em, 0)
}

*Update Fixed it. It seems there was a problem with CSS Modules and Bootstrap class naming combination. I managed to resolve it like this.

First.jsx

<form>
  <div className={`form-group ${styles.formula}`}>
    <label htmlFor='exampleInputEmail1'>Email address</label>
    <input type='email' className={`form-control ${styles.formControl}`} id='exampleInputEmail1' aria-describedby='emailHelp' placeholder='Enter email' />
    <small id='emailHelp' className='form-text text-muted'>We'll never share your email with anyone else.</small>
   </div>

styles.scss

.customBtn {
  @include button-variant(white, purple, black)
}
.formula {
  @include input-size('.formControl', 70px, 12px, 12px, 32px, 5em, 0)
}

Upvotes: 3

Views: 7290

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362760

Make sure you're passing in the correct param values to the mixin. For example,

@import "bootstrap";
.my-custom-input {  
  @include input-size('.form-control', 70px, 12px, 12px, 32px, 5em, 0)
}

http://codeply.com/go/zc544u3kYN

Update the input-size mixin has been removed in Bootstrap 4 Beta.

Upvotes: 4

Related Questions