Using with Bootstrap 4 ?

UI Components for Angular
Post Reply
Paul75
Posts: 1
Joined: 19 Nov 2017, 15:35

19 Nov 2017, 15:39

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

User avatar
sudheer
PrimeFaces Core Developer
Posts: 4295
Joined: 16 Oct 2011, 19:19
Location: Singapore

20 Nov 2017, 05:29

AFAIK,There are no compatibility issues with Bootstrap
Author,Speaker
https://twitter.com/sudheerjonna
Github: https://github.com/sudheerj
Website http://sudheerjonna.com/

___________________
Sudheer Jonna

paulswan
Posts: 64
Joined: 27 Apr 2017, 08:19

21 Nov 2017, 23:28

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.

User avatar
sudheer
PrimeFaces Core Developer
Posts: 4295
Joined: 16 Oct 2011, 19:19
Location: Singapore

22 Nov 2017, 03:59

But I didn't see any compatibility issues with free themes which are avialable.
Author,Speaker
https://twitter.com/sudheerjonna
Github: https://github.com/sudheerj
Website http://sudheerjonna.com/

___________________
Sudheer Jonna

paulswan
Posts: 64
Joined: 27 Apr 2017, 08:19

22 Nov 2017, 04:54

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
Posts: 2
Joined: 04 Dec 2017, 17:00

05 Dec 2017, 16:18

sudheer wrote:
22 Nov 2017, 03:59
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
Posts: 2
Joined: 04 Dec 2017, 17:00

07 Dec 2017, 12:05

AlucardZ wrote:
05 Dec 2017, 16:18
Any feedback would be highly appreciated.
Kind reminder :D

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.

Post Reply
  • Information
  • Who is online

    Users browsing this forum: Google [Bot] and 4 guests