Can you add Bootstrap to the Ionic App?

Question

I'm currently developing an Ionic app, and I was wondering if I could add a Bootstrap-based image gallery. I know that Ionic and Bootstrap do not work very well together, but I was wondering if this is possible.

Answer 1

According to this article, Ionic + Twitters Bootstrap CSS Framework - again! It will be a lot of effort using bootstrap. However, I found this slider for you. How to create an elegant slider carousel in the Ionic Framework .

I hope this helps! Good luck!;)

Answer 2

I see 3 different ways to solve this problem.

• Use the carousel plugin separately

If all you need is a carousel, you don’t need to try to crack the bootstrap into your application. The bootstrap plugin should be fairly independent. Just use the JS file separately: https://github.com/twbs/bootstrap/blob/master/js/carousel.js Of course, it will not work properly without styling. You can try copying the LESS carousel source and remaking it yourself.

2. Use a different carousel

The boot cassette is not so unique compared to many other plugins. You might just be better off finding another one.

Do a search on http://bower.io or try the following: <a2>

3. Use the Angular Carousel

The ionic structure uses Angular, which has a large community. Everything built in Angular should probably work in ion mode. If you google for "angular carousel", you will find many options. This seems popular: http://vasyabigi.imtqy.com/angular-slick/

Answer 3

Have you tried to use this Ionic directive? <ion-slide-box></ion-slide-box> .

This is how I used it in my project

 <ion-slide-box show-pager="true" does-continue="true" pager-click="true" auto-play="true" slide-interval="4000"> <ion-slide ng-repeat="image in imageArray"> <img ng-src="img/slides/{{image}}.jpg" alt="" height="auto" width="100%"> </ion-slide> </ion-slide-box> 

With this yoiu, you do not need to use BootStrap Carousel in your ionic application.

Answer 4

Step 1:
Install the loading tray:

npm install bootstrap

Get bootstrap

Step 2:

Edit package.json:

 "description": "An Ionic project", ...... "config": { "ionic_sass": "./sass.config.js" } 

Step 3:

Create a new sass.config.js file in your home folder

 module.exports = { includePaths: [ "node_modules/ionic-angular/themes", "node_modules/ionicons/scss", "node_modules/ionic-angular/fonts", "node_modules/bootstrap/scss" ] }; 

Step 4:

Edit Variables .scss

 @import "noto-sans"; ...... @import "bootstrap"; 

Step 5:

Add boot code:

 <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> 

Step 6:

Launch ionic application

ion feed