Using Semantic UI elements in a Bootstrap-based project

samurdhilbk picture samurdhilbk · Sep 30, 2016 · Viewed 7.7k times · Source

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

cambyliverson picture cambyliverson · Jan 15, 2017

[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:

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