Ionic CSS + Bootstrap 4 CSS

Ionic Framework ionic-v3
1

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.

1 Like
2

Hello,

maybe I understood it wrong, but does it helps, when you load bootstrap css before ionic?

Maybe a try worth. Looking to variables.sccs there is a import from ionic.globals. Maybe it helps, when you try importing bootstrp.css before them.

If this not helps, then you can maybe take a look to the ionic css file, that are in
node_modules\ionic-angular\themes and node_modules\ionic-angular\css, but these files are not a limmerick.

Best regards, anna-liebt

3

Hi there,

Thanks for your reply. Let me see if I can explain it better…

In my index.html;

link rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css” integrity=“sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm” crossorigin=“anonymous”>

link href=“build/main.css” rel=“stylesheet”

then i added a bootstrap 4 button and an ion-button to home page.

Ionic Button – Primary
Bootstrap4 Button – Primary

here is the screenshot:
43 PM

as you can see it, bootstrap button is smaller than normal size because of font-size is set to 62.5% from html by ionic css.

so i override 2 ionic sass variables like this:
$font-size-root: 100%;
$font-size-base: 16px;

now bootstrap4 button looks normal but ionic button’s bigger than normal.

18 PM
Screen Shot 2018-01-25 at 5.56.18 PM.png826Ă—616 28.2 KB

I could change or add style class to adjust font-size from button component but want to see if there is a better way to handle it.

Thanks,

1 Like
4

Hello,

this brings me to a question. Why would you use two different buttons in your app, because there is more than size different?

So If size matters…hehe…
I am not the sass expert, but if you want only that one of this buttons shrinks or entlarge, then you should maybe apply only to one button a different size.

Bset regards, anna-liebt.

5

I got the same problem, did you solve it?? … I want to Build Web Apps with Bootstrap and Ionic, but… all the bootstrap things are smallers… I just delete main.css from index… but… when i do that… i cant change other things with SASS… :confused: … so i need to deactivate clear main.css and make another one to save change with SASS.

6

I have the same problem. I need to build Web Apps with Bootstrap and Ionic , I am not expert in SASS.
Every Bootstrap things are smaller. Can anybody help me.Thanks in advance.

7

this works for me good brother