Can you add Bootstrap to a Ionic App?

Question

I am currently developing an Ionic app and I was wondering if I could add an image gallery based on Bootstrap. I know Ionic and Bootstrap don't work really well together, but I was wondering if it is possible.

Answer 1

I see 3 different ways to solve this.

1. Use the carousel plugin seperately

If all you want is the carousel, you don't need to try to hack bootstrap into your app. The bootstrap plugin should be pretty independant. Just use the JS file seperately: https://github.com/twbs/bootstrap/blob/master/js/carousel.js Ofcourse, it won't work properly without the styling. You could try copying the LESS source of the carousel and re-style it yourself.

2. Use another carousel

The bootstrap carousel isn't that unique in comparison to many other plugins. You might as well just be better off finding another one.

Do a search on http://bower.io or try this one: http://flexslider.woothemes.com/

3. Use an Angular carousel

Ionic framework uses Angular, which has a large community. Anything built in Angular should probably work in Ionic as well. If you google for "angular carousel" you'll find many options. This appears to be a popular one: http://vasyabigi.github.io/angular-slick/

Answer 2

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

Here's 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 don't need to use BootStrap Carousel on your ionic app.

Answer 3

Step 1:
Install bootstrap:

npm install bootstrap

Get bootstrap

Step 2:

Edit package.json:

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

Step 3:

Create new file sass.config.js in 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 your bootstrap 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:

Run ionic app

ionic serve

Answer 4

According to this article Ionic + Twitter’s Bootstrap CSS Framework - Again!, it will be a lot of effort using bootstrap. However I found this slider for you How to Create Elegant Slider Carousel in Ionic Framework.

I hope it helps you! Good luck! ;)