Can I use bootstrap 3 together with jQuery Mobile?

I have read many "bootstrap vs. jQuery mobile" articles. It is quite clear that they both have different aims. So what about combining them?

Besides other, I like the responsive layout features of bootstrap. On the other hand I also like the "page" approach and the possibilities of jQuery mobile (including swipe events etc.) and transitions.

Are there professional projects combining both? Or anybody tried to do so and failed?

I know https://stackoverflow.com/questions/9599110/using-bootstrap-with-jquery-mobile looks like a similar question but it is outdated (refering to bootstrap 2).

Conclusion I would not recommend combining JQuery Mobile and Bootstrap for complex projects.

JQM Knowledge We are building a series of sophisticated web application all using the JQuery Mobile (JQM) Framework. We have spent over a year producing this and now have pretty reasonable knowledge of JQM.

Positives: Some of the features are useful such as persistent footers and the mobile friendly components which give the HTML5 app a pretty native feel. Negatives: We have had to disable quite a lot of features of JQM such as preloading pages to create the complex functionality we required.

The end result is good as we have fooled iOS developers into thinking it was native.

Bootstrap Knowledge I have also recently produced a responsive website using bootstrap to advertise the above JQM product and that has worked out very well (http://www.sure-sense.com).

The Combo I tried to combine the bootstrap with the JQM project on a dashboard application but that has quickly highlighted that the 2 frameworks are not compatible. The CSS of JQM marks up the components on top of the bootstrap CSS and the results are some components looking like JQM and others like bootstrap.

Personally I think jQuery Mobile has more features than you really need, also it locks you into a way of building which isn't flexible. It starts to get buggy and messy when you have many panels with different animations and usually gets you 80% of the way very quickly, but then takes a long time to do custom things.

I would use twitter bootstrap and then add plugins to support features you need.

Bootstrap has lots of unofficial plugins you can add to imitate the functionality of jQuery Mobile: http://bootsnipp.com/resources

there is a guide here to use the swipe events from jQuery Mobile only: http://lazcreative.com/blog/adding-swipe-support-to-bootstrap-carousel-3-0/

Or you can use your own plugin to manually add the swipe events: http://stephband.info/jquery.event.swipe/

If you want an expandable sidebar menu you can easily add it yourself:

-webkit-transition: width 0.35s ease;
-moz-transition: width 0.35s ease;
-o-transition: width 0.35s ease;
transition: width 0.35s ease;

http://jsfiddle.net/Osis/Mns8q/ http://codepen.io/krichnafsky/pen/cuhkL http://coding.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website/

For one-person work, I don't think it really matters what single solution or combo to be chosen since it's all you and the very only "you" to make them work.

However, for a team work piece, in a company or even an enterprise, the work contains Making template + Implementing applcation and the responsiblilities go to creative design team and IT team, respectively. So the final solution need to be OK with both these 2 teams.

For our company, CD team tends to use BootStrap cause they are requested to make many custom, special-effect web templates, however IT team already did some jQM applcation and they like to use it for future development work, thus a conflict.

In the long run, "User requirement" overcomes the conflict and we are now going to use BootStrap template and trying to avoid using jQM in our main mobile web applicaton development, at best.

A pitty but need-to-accept choice.

In one of my mobile app projects, I decided to use Bootstrap & JQM together. I used JQM widgets then dedicated Bootstrap for handling the structure of the layout. The simple reason is, I wanted better control of the grids since Bootstrap have a higher number of grids than JQM which has a very limited layout control. I also want to use spanning across grids which is very much possible in Bootstrap but not in JQM. Although, overriding some CSS codes is possible to be able to achieve my goal in JQM, it's not a smart thing to do.

Just be ready to fix some minor conflicts in the naming conventions used by the two different UI frameworks if you're planning to do the same thing.