Can I use bootstrap 3 together with jQuery Mobile?

javascript jquery css jquery-mobile twitter-bootstrap
Tillito picture Tillito · Sep 5, 2013 · Viewed 47.6k times · Source

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 Using Bootstrap with jQuery Mobile looks like a similar question but it is outdated (refering to bootstrap 2).

Answer

glimmer picture glimmer · Mar 19, 2014

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.

Related questions

How to use javascript conditionally like CSS3 media queries, orientation?

How to use javascript conditionally like CSS3 media queries, orientation? For Example I can write css for specific @media only screen and (width : 1024px) and (orientation : landscape) { .selector1 { width:960px} } Now I want to only run some javascript if it …

Read More
How to swipe top down JQuery mobile

I'm trying to make event on swiping up and down instead of left and right i have this roll as image shows: I can handle the event using arrow icon (onClick()) but i want to add swipe up down event, …

Read More
How do I add a class to a given element?

I have an element that already has a class: <div class="someclass"> <img ... id="image1" name="image1" /> </div> Now I want to create a JavaScript function that will add a class to the div (…

Read More