Using Semantic UI elements in a Bootstrap-based project

Question

I'm building a website where a lot of the theming and styling is based on Bootstrap 3. But I want to use things like Multiple Select Dropdown Search boxes which are readily available in Semantic UI but not so in Bootstrap. I think it's a bit too late to shift the project entirely to Semantic UI. Also, I am aware that there are a considerable amount of naming conflicts between these frameworks. So using Semantic UI alongside Bootstrap doesn't seem like a good idea. So what can I do? My question is two-fold.

1. Semantic UI suggests installation using Node JS. Can Semantic UI be used in a project with a PHP back-end?

2. Can't I just use the source code for these elements from the Semantic UI Github repo and use it in my project without actually needing to install Semantic UI?

Answer 1

[The answer may be late]

I have experience on using the dropdown plugin of semantic ui in bootstrap project.

You can just include four component to make it work, they are:

• dropdown.min.js
• transition.min.js
• dropdonw.min.css
• transition.min.css

Besides, you will need to add some css to styling the label (because it is comflict with bootstrap) and make the delete icon appear. Here is a working example I made in codepen: http://codepen.com/cambyliverson/pen/mRreXo

If you like semantic-ui, you can consider the semantic-ui skin of bootstrap: SMTB

Answer 2

As a general rule of thumb, I'd say don't do it. They CSS involved in the 2 projects could easily conflict and lead to things like this...

https://slack-files.com/T0VNSF68H-F4NL9M950-ae64b77fc1

^ GIF of a modal bouncing and flashing because of conflicting css