Ionic 2 How to use Bootstrap (include jquery.js boostrap.js)


#1

Hi, I read a lot of topic about it, but i really can’t figured out how to use bootstrap in Ionic 2 app pages. I know, Ionic provides a lot of utilitis, but i don’t want to use <ion- tags, i need to use bootstrap html, like:

<div id="demo" class="collapse">

For this, i need to include jquery.min.js, boostrap.min.js, but i can’t figured out hwo to do it. If I edit www/index.html, my new strigs disappears when i run “ionic serve”.


#2

Then I think you are missing the point of Ionic. Ionic is about providing a UI layer for your hybrid applications. If you want to define the UI layer of your application via Bootstrap and jQuery as part of the application logic, then I would suggest just using the Cordova tools to build your application instead and not rely on any of the Ionic tool-chain.


#3

install bootstrap-sass via npm. import the bootstrap.scss in your scss.
Do not forget to set $font-path variable before the import.

Import bootstrap in the components you need it.

i did not tried it, but webpack should everything you are importing somewhere.


#4

Hi, thanks for the answer. This is my first experience with these technologies. The idea to use Ionic is because it provide some GUI element, like , side menu adn tabs, that are native-like and automatic different on different platform (iOS or Android). So the idea is to use Ionic for the main structure, and classic HTML+bootstrap into the , so i can use some of the same HTML code in a desktop version.


#5

HI, thanks for the suggestion. I was able to import bootstrap.css (turning in a .scss), but for some other features, i need to import the .js. For example, if a want to use the “collapse” class, like ih this example:

http://www.w3schools.com/Bootstrap/tryit.asp?filename=trybs_collapsible&stacked=h


#6

Put me also in the camp of “this looks like a road littered with conflict and pain”. Bootstrap’s “collapse” can be made very easily with Angular, and it will go together so much better with the rest of your application than having some Frankenframework mishmash of Bootstrap and Ionic. There’s a sample implementation of it in the EventEmitter docs.


#7

Ok, thanks, but “collapse” it’s just an example. Like I said in the previous answer, I would like to use Ionic for the main structure of the app, because “Ionic emulates native app UI guidelines” on different platform ( for example, if i use tabs, for iOS they’ll be on bottom, for Android on top). But in every single view (page), into the , I would like to use HTML like a real page, so for example every bootstrap feature.
I understand that this use of Ionic is “wasted”, but i would like to try.
So, back to the original question: how can I include a .js in Ionic 2?