Incompatible units: 'rem' and 'px' with bootstrap 4 alpha 6

css sass bootstrap-4 incompatibletypeerror
Neon_10 picture Neon_10 · Jun 26, 2017 · Viewed 9.1k times · Source

I am trying to implement a bootstrap 4 template (I use bootstrap 4 alpha 6) and see such an error:

Incompatible units: 'rem' and 'px'.

in line 

$input-height: (($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2)) !default;

Did somebody experience similar issue? Thanks!

Answer

Juan Carlos Pulido Suarez picture Juan Carlos Pulido Suarez · Aug 31, 2017

Bootstrap moved from pixels (px) in version 3 to rem in version 4.

In resources/assets/sass/_variables.scss replace:

$font-size-base: 14px; with $font-size-base: 1rem;

In general, Bootstrap 4 uses 'rem' instead of 'px'. For reference, look at https://github.com/twbs/bootstrap/issues/17070

Related questions

Bootstrap 4 Change Breakpoints

I have an application where the design calls for a 1280 breakpoint from desktop to tablet, or, xl to lg respectively. However, Bootstrap itself has the xl breakpoint at 1200. I need to change that xl breakpoint globally for bootstrap. Do I …

Read More
How do I use bootstrap mixins in angular-cli

I tried using a mixin in my styles.scss but it says it is not defined. I've tried: Using it in styles.scss @include media-breakpoint-up(sm) { .some-class { display: block; } } result: @include media-breakpoint-up(sm) { ^ No mixin named media-breakpoint-up importing bootstrap again: @…

Read More
What's the difference between SCSS and Sass?

From what I've been reading, Sass is a language that makes CSS more powerful with variable and math support. What's the difference with SCSS? Is it supposed to be the same language? Similar? Different?

Read More