I know the question of Ionic playing well together with Bootstrap has been posted here before, but this was some time ago, and I felt that not enough comments or answers were posted.
So I’d like to raise this question again. Just how easy is it to replace Ionic’s UI with Bootstrap? I’m thinking in particular the project called UI Bootstrap, which is a set of Bootstrap components written in pure AngularJS by the AngularUI Team. The repo contains a set of native AngularJS directives based on Bootstrap’s markup and CSS. So, as a result, no dependency on jQuery or Bootstrap’s JavaScript is required. The only required dependencies are Angular and Bootstrap CSS. And it features some nice components such as an accordion, datepicker, dropdown, rating stars, typeahead, etc.
And there’s another good-looking repo called Adapt-Strap, which has some very nice table-related UI components, including pagination and other table-related manipulations. It too is based on Boostrap and Angular.
And with Bootstrap’s core bits in place, it’s then easy to change the styles, using something like the free FlatUI package from DesignModo - if you want your app to have the trendy “flat-design” look.
Ionic’s UI is great - I’m not complaining about it. But I feel that Bootstrap now has so many resources around it that it offers a pretty compelling base for creating nice UIs.
But I also don’t want to go down a rabbit-hole of integration issues, having things break because of some naming clash or other silliness. And before I make a final decision for my two projects based on Ionic, I would be grateful to hear what other Ionic developers (or the Ionic team itself) - who have integrated Boostrap (or tried, didn’t succeed, and went back to pure Ionic) - have experienced, and what cautions or other advice can be offered
Thanks a lot, and I hope no one minds a second attempt at this issue.
You can add components from angular-ui 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.
OK, thanks. So it sounds like there’ll be a lot of duplication of effort: As well as all the CSS and JS of Ionic, I’d also be loading all the CSS and JS of Bootstrap, and then whatever other CSS for a given Bootstrap theme, if any is used (like FlatUI). And then, apart from that, the hope that there won’t be any namespace collisions, or clashes in CSS class names.
Sounds overall risky and inefficient. But it just would be nice to have a little more flexibility in the styling and presentation of the UI.
Maybe I’ll try it and see - and will report back any issues or other discoveries.
I am also working to integrate Ionic + Bootstrap + (other 3rd party components), and I can report some success, but a number of critical name collisions, and one pesky ‘scroll’ glitch.
I brought in the Angular UI Bootstrap stuff without much of a problem, and was particularly interested in using the ‘typeahead’ directive on my lists. It has been working pretty well for about a month now. This typeahead component was far easier to integrate than other Angular 3rd party modules.
I have also integrated some of the Mobiscroll components, and in particular their ListView component which has nice ‘slide’ menu support. Works OK, but this is where I seem to run into the ‘scroll’ glitch, and I had to hack Ionic core in one spot to workaround it for now (I believe the Ionic guys are aware of this).
I have also integrated my own custom view panel that presents vector graphics and a set of ‘draw’ tools, which handles all of the touch events at a fairly low level. The trick on this was making this panel’s scope persist when toggling between page views, but this turned out to be straightforward once you learn how the Angular UI Router functions with base views.
Now I am fiddling with bringing the Ionic css over into a browser-based form builder app I have, and there are a few glitches to note: Ionic.css turns off ‘overflow’ a the ‘html’ element level which needs to be overridden; there is a name conflict with ‘.popover’ and if you are blending with Bootstrap popovers, you will want to override this; several styling issues with input fields between Ionic and Bootstrap that need to be overridden.
All-in-all, not to bad given that I am pushing the envelope in most areas, and most folks have warned here and elsewhere ‘proceed at your own risk’.
Was just searching around for a similar thing to johnwillyn above (integrating typeahead) and ended up here. I initially tried just dropping bootstrap CSS in before Ionic but as was mentioned in other related threads the “row” CSS class causes some problems.
I decided to just create a build on the ui-bootstrap side with just the typeahead directive so I could check out what CSS it actually uses. Turns out that component just has one CSS class it references from bootstrap “dropdown-menu” so was easy enough to just copy the CSS that was related to that class from Bootstrap and paste it into a new CSS file in my project.
So far has worked out great and basically best of both worlds, get to use the open source component and not introducing a high likelihood of conflicts. Only down side here is the need to manually pull out the CSS and upgrading the custom ui-bootstrap build if a version bump is needed but it’s a worthwhile compromise I think.
Anyhow just wanted to add my two cents. Also, thanks to the ionic devs, it’s made targeting mobile pretty easy.
Not sure how this will play out but I have my ionic and website running from the same code base. To separate the CSS I imported the bootstrap and ionic into separate id scopes. When the page loads up I check the environment and then place an id on the html tag to trigger the correct CSS.
I am also looking into using Bootstrap to do some more complicated styling,
have you look into generating CSS through SASS’s namespacing to avoid conflict?