Ionic CSS + Bootstrap 4 CSS

@hyongmoon wrote:

I am trying to use some of Bootstrap 4 components in my Ionic project.

ionic (Ionic CLI) : 3.19.1
Ionic Framework : ionic-angular 3.9.2
Bootstrap: 4.0.0

Ionic sets a 62.5% font-size in the html and uses rem to adjust the font-size, is relative to the html (root) font-size.

$font-size-root - 62.5%
$font-size-base - 1.4rem // 1.4rem == 14px

However, in Bootstrap4, it assume the browser default root font-size (typically 16px). So when using Bootstrap CSS and Ionic main.css together, it affects the overall size of Bootstrap UI components. I’ve tried to override Ionic Sass variables to reset the default font-size to 100%, but doing it so will adjust the font-size of Bootstrap 4 components properly but now ionic components are much bigger. SMH…

$font-size-root 100%
$font-size-base 1rem

Any suggestion will be greatly appreciated.

Posts: 1

Participants: 1

Read full topic