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

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