Using Bootstrap in Ionic App

Ionic Framework ionic-v3
1

Has anybody used Bootstrap in their Ionic 2 app?

I am thinking of using Bootstarp in my Ionic 2 app to achieve “responsive” functionality of the app. The reason is because I want the users to be able to use the app as a regular website. I want to make sure it renders and functions like a website.

That way, I don’t need to create and maintain two different code bases for mobile and desktop/laptop platforms respectively.

But before I do that, I wanted to run it by the experts here and get some advise. :slight_smile:

Some questions I have are:

  1. Is it a good approach?

  2. Are there any disadvantages? If yes, what and how will they affect?

  3. Since I will use Bootstrap, will I be able to mix Bootstrap components with Ionic 2’s components? Or maybe, use only Bootstrap ones?

I would highly appreciate if you guys can give your honest opinions on this.

Thanks!

4 Likes
2

Ionic is sometimes described as like “Bootstrap for mobile”, so I don’t think it makes sense to use both at the same time. I haven’t tried but you may end up with conflicting style definitions.

1 Like
3

Thanks for the reply, @mirkonasato! Appreciated!

I think, I got your point about Ionic being like Bootstrap for mobile. And my question lies in that.

“Bootstrap for mobile” - does that mean that it can’t be used to create the app for regular desktop/laptop browser? And therefore I will need to use Bootstrap to make it responsive?

Would appreciate to hear from somebody who has tried using Bootstrap for achieving “responsive”-ness for the website usage with Ionic 2.

Thanks.

1 Like
4

I haven’t used Bootstrap, but I have included FontAwesome in my mobile project. I think there’s an issue with the current CLI though, so I haven’t verified if this works in RC4/5. When I did this I worked in RC3

It require two things

  1. npm install FontAwesome/Bootstrap

  2. Custom copy script in the config section of the package.json file

    “config”: {
    “ionic_copy”: “./config/copy.config.js” //within your project directory
    },

copy.config.js looks like this

module.exports = {
    include: [
      {
          src: 'src/assets/',
          dest: 'www/assets/'
      },
      {
          src: 'src/libs/',
          dest: 'www/libs/'
      },
      {
          src: 'src/index.html',
          dest: 'www/index.html'
      },
      {
          src: 'src/service-worker.js',
          dest: 'www/service-worker.js'
      },
      {
          src: 'node_modules/ionic-angular/polyfills/polyfills.js',
          dest: 'www/build/polyfills.js'
      },
      {
          src: 'node_modules/ionicons/dist/fonts/',
          dest: 'www/assets/fonts/'
      },
      {
          src: 'node_modules/font-awesome/fonts/',
          dest: 'www/fonts/'
      },
      {
          src: 'node_modules/font-awesome/css/',
          dest: 'www/css/'
      },
      {
          src: 'node_modules/bootstrap/dist/css/',
          dest: 'www/css/'
      }
    ]
};
5

Thanks for the reply @mtycholaz. So you have tried to use a different library in addition to Ionic 2. Do let me know if you were able to get past the issue and were actually able to use it.

Anybody else tried Bootstrap in Ionic 2 for getting “responsive”-ness? Or does anybody know if Ionic 2 provides some kind of wire frames (like Bootstrap) to build responsive web apps?

6

I’m actually having the same question. I’m building a dashboard website and I’d like to have the same look inside my mobile Ionic 2 app. Because I’m using a template for the website which relies on bootstrap, i’m gonna need bootstrap inside Ionic too.

Did you manage to get it to work; or is it simply not possible with ionic 2?

7

Check this post: Can We Use Bootstrap 3 In Ionic?

8

Regarding the responsive requirement, I believe the Ionic framework has always been responsive. You can see this by doing ‘ionic serve’ and changing the window size of the browser.
Regarding the “create and maintain two different code bases” part, this one is more difficult.

I’m not sure if it’s possible or a good idea to serve your Ionic 2 project in production. PWAs might solve this issue in the future, but on this page: https://ionicframework.com/pricing/index3.html it lists PWA as a feature as part of the Indie service, so Ionic may only offer this as a paid service.
One of the features of a PWA (progressive web app) is that it is discoverable like a website and can be linked to like a website. This would indicate that there is a way to serve an Ionic app as a website in production.

However, this ionic forum answer (Web version in ionic 2) from a moderator states that Ionic 2 apps cannot be hosted as stand-alone web apps yet, but that the functionality is “in the works”.

Other problems I have heard about are resource issues, as serving an Ionic app would create a separate instance for every remote user.

Still, this does not mean that you can’t share code between two projects.
I created a shared library to do this at my company.
However, another department decided to use Bootstrap 4 in their Angular 2 project.
So I figured out how to use Bootstrap 4 with an Ionic 2 project:

npm install bootstrap@4.0.0-alpha.6 --save

Then add this to src/theme/variables.scss
@import “./node_modules/bootstrap/dist/css/bootstrap”

That worked for me. I haven’t found any conflicts yet, but haven’t really tried anything besides a proof of concept project so far.

In case you are interested, here is an example of a shared lib that will work with Ionic 2:


Here is an example of an Ionic 2 app which uses the shared lib:

9

hello @gauz09 i am using bootstrap in ionic 2. i did not face with any problem yet. and i don’t know if there is any disadvantage. so if anyone knows that it have any disadvantage, let me know.

10

Hi @averhaegen!
I’m building a dashboard to. I’m using startbootstrap-sb-admin-2 and I cant get some bootstrap features like the panels in my app. Do you find any solution for that?
Any help would be huge!

Thanks in advance

11

Hi,
You need to first install i.e. npm install ng2-bootstrap in your project.
then in the index.html page add the link for bootstrap 3

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

and you are good to enjoy bootstrap in ionic app

6 Likes
12

Has anyone used bootstrap4 in ionic3?

I can import the bootstrap css fine, but i would also like to use scss variables for bootstrap (to change colors) etc…

Any ideas how to do that?

13

got solution??
If yes please share.
Thanks

14

@Spsahu @hesesses
See my solution here

https://gist.github.com/wilforlan/b53d6c2a263a8a625cac6e464be4b5a9

15

Even the ionic website is not built with ionic, it’s using bootstrap directly.
I’m facing similar issue, going to try https://github.com/hyperapp/hyperapp, will share my findind here again soon.

16

You can use the CDN of boostrap instead.

17

Thanks @wilforlan
can you please share the JS file too.

18

@IonicDeveloper02
Hi team ,

Can you please help us to find the best solution