How can I completely disable the default Ionic themes so that I can use Bootstrap instead?

Question

I’m new to the Ionic/Cordova/Angular scene and am planning to make a completely custom UI application for desktop, tablets and (secondarily) mobile. I want the UI to be consistent across all platforms (more like a responsive website) and so I feel the Ionic UI and components aren’t really a good fit for what I’m going for as they are too targeted at getting that "native" feel.

However, I don’t really have enough in-depth knowledge yet to set up Cordova and Angular together to the same standard that I'm sure the Ionic team have done, with tools, handlers, etc - things I don't want to give up just because I don't want to use the themes.

What is the best course of action to completely exclude the Ionic styles so that I can just use Bootstrap as a base instead? I already have Bootstrap installed but I see that it is conflicting with the built in styles.

Also if you have any other, better suggestions than what I propose above, I’d be happy to hear them.

Answer 1

Ionic is for building mobile apps and has a lot of building tools integrated. But it isn't recommended to create web applications with it. Check the browser support, I really wouldn't recommend using it like that.

Bootstrap is only a simple framework for styling html elements. Cordova is for wrapping up webpages in a native app context.

Yes you can use Bootstrap libraries with ionic like ng-bootstrap but with out much of an issue, but just be sure to know that you won't be able to fully replace ionic with bootstrap, it will just be added ontop of ionic's css.

Answer 2

To disable ionic's own style, open your angular.json file in root directory. Just remove "variables.scss" and "global.scss" files.

Answer 3

If you don't want to use Ionic... just don't use it, instead of make use of it and then try to disable features.

You can use only Angular with Bootstrap (there are some angular modules published in npm to use Bootstrap, like: https://github.com/valor-software/ngx-bootstrap) and then use cordova to build your package/app and use its plugins.

Answer 4

Just simply use ionic framework and cordova plugins, but avoid using any ionic components (i.e. tags that start with <ion-*> tags). Also, if you don't want ionic tabs, just create a blank ionic project:

ionic start myApp blank

You can override or add your own style using the following files:

• variales.scss: See here and here to learn how you can override ionic variables.
• app.scss: global sass settings

As long as you don't use ionic components and ionic css utilities, it would be as if you are creating a plain website but you can still use angular's help and style it with bootstrap.

That said, ionic UI is fairly consistent and responsive across various platforms, specially if you force it to use a certain platform style for all platforms, so not using its components is a bit weird, but I can see the need for it.