Using with Bootstrap 4 ?

[Paul75]

Hello,

Can I use Bootstrap 4 with PrimeNG ? It not do problems ?

Because in Bootstrap wi can use more things exemple:
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>

the input was automatly size in the form ...

Thanks

[sudheer]

AFAIK,There are no compatibility issues with Bootstrap

[paulswan]

If you plan to use any of the Premium Application Templates for PrimeNG you may find some clashes as Bootstrap 4 uses some of the same class names as the Premium Templates (card for example). I can't be certain though as I have not tried this myself.

[sudheer]

But I didn't see any compatibility issues with free themes which are avialable.

[paulswan]

Earlier this year I used PrimeNG in a Bootstrap 3 based template and had no major problems. The only slight issue I can recall was the style in the data table but I dare say this could have been rectified by following the theming guidelines. It was all fairly new to me back then so I didn't attempt it and we ended up purchasing the Ultima template so it was no longer necessary to go down that path.

https://www.primefaces.org/primeng/#/theming

[AlucardZ]

But I didn't see any compatibility issues with free themes which are avialable.

It depends on what you mean by compatibility, here's a minimalist example where I'm trying to get bootstrap to play nice with primeng 5.0.2 and bootstrap 4.0.0-beta.2:

https://stackblitz.com/edit/primeng-boo ... tyles.scss

Simply comment/uncomment the @import statement I've marked and notice the behavior change. Is that normal? is that considered compatible? There are other malformations in other components but I kept the example simple for now.

Edit: I think the problem comes specifically from this line in bootstrap's css (https://unpkg.com/bootstrap@4.0.0-beta. ... tstrap.css):

Code: Select all

*,
*::before,
*::after {
  box-sizing: border-box;
}

I understand that primeng's free components have already shifted to border-box box-sizing, but i believe It's the ::before and ::after that are mainly causing issues here. There are other problems (such as the weird padding above the checkbox and radiobutton) but that has nothing to do with box-sizing.

Any feedback would be highly appreciated.

[AlucardZ]

Any feedback would be highly appreciated.

Kind reminder

Would really like to know if these layout abnormalities are something that we need to overcome ourselves with various fixes or that primeng and bootstrap 4.0.0 (as of this writing) simply don't play along too nicely.

Thanks in advance.

[cagatay.civici]

We'll check for 5.1.0.