Clarity: Can I add @clr/ui to a bootstrap based project?

[royling]

I can see bootstrap (an alpha version only) in the dependency list, and some components are using the same class names as bootstrap. But I want to confirm whether this is true? I am wondering if it's possible to incorporate clarity design into an existing bootstrap based project simply by adding @clr/ui to override the default bootstrap styles? Thanks!

[pumano]

Clarity created from bootstrap under the hood, you can try. Maybe your migration will go smoothly.

[adityarb88]

@royling: Clarity does use bootstrap but strictly for the grid and a few utilities. There are a few class names which match that of Bootstrap 4 but there are a few which do not. Also Clarity uses Bootstrap 4 alpha 5 and we didn't upgrade to alpha 6 because there were a few class name changes at their end.

We recommend that you do not use 2 different libraries in 1 project because there are chances of conflict and unexpected behavior. You could give it a shot and check if it works but you might have to handle conflicts at your end. Thanks!

[royling]

@adityarb88

Clarity does use bootstrap but strictly for the grid and a few utilities. There are a few class names which match that of Bootstrap 4 but there are a few which do not.

Thanks for the info about how bootstrap is used in clarity now.

we didn't upgrade to alpha 6

What's the long-term plan? Will you upgrade to the v4 official release in the future? Just curious.

We recommend that you do not use 2 different libraries in 1 project

You're absolutely right on this. And I did try to use clarity styles to override existing bootstrap styles, there were some breaking parts. I had to give it up at the end. 😿

[adityarb88]

@royling: Our long term plan is to move off of the Bootstrap 4 alpha 5 dependency and write our own grid but thats something thats not an immediate priority for us. We have a ticket open for that: https://github.com/vmware/clarity/issues/1531. Please subscribe to that issue for more updates.

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.