Before we start let me make something clear, this article is made for beginners though I will touch some intermediate topics. If there’s something you would like to know, and you can’t find it here, just leave me a comment down below, even if you only want to say Hi. There’s a good chance I’ll forget something; both frameworks were made several years ago, and they collide in more than one place, so ask, ask, ask.
 
All in all, I’m amazed how much this topic is still trending. I’m probably subjective regarding this subject, but I would like to blame jQuery Mobile and Bootstrap developers for this state of affairs. When you visit official webpages, you will notice that both frameworks are vaguely described. Let’s take a look at their official descriptions.
 
 

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 

Overview

 
 

jQuery Mobile:

 
jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices.
 

Bootstrap:

 
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
 
Every developer not familiar with jQuery Mobile and Bootstrap would get the impression that both frameworks serve the same purpose that is not correct, at least partially.
 

jQuery Mobile:

 
Link
 
I will start with jQuery Mobile, mostly because I started using it during it beta state, several years ago. At that time, it looked like the best thing since bread came sliced. We were teased with HTML5 markups based framework heavily tied to the jQuery framework; it seemed too good to be true. jQuery was (and still is) one of the best JavaScript frameworks to this date, and we expected the same from jQuery Mobile. Unfortunately, the final result was far from spectacular.
 
As its description states, jQuery Mobile is an HTML5 based user interface system designed to make responsive websites. That’s more or less the truth. UI and lot of an underlying functionality are done purely through the HTML5 markup. It’s almost funny how easy it is; everything is made logically, learn how to use one widget, and you would know all the rest. Of course, here lies the first real problem. Because everything is done through HTML5 markup, jQuery Mobile application still needs to process that markup in the background during the application real-time execution, and JavaScript is a workhorse, in that case. This combined with mobile browsers will result in below-average performances (it got better with time, but this is still the biggest jQuery Mobile problem). Thankfully this is not the case when used in desktop browsers.
 
jQuery UI
 
Just like Bootstrap, jQuery Mobile is responsive out of the box. Show it on a smartphone, tablet or desktop device, and it will seamlessly adapt to available screen size. Unfortunately, jQuery Mobile UI widgets are made solely for small screens; they look almost comically large on bigger screens. You can’t resist the feeling how everything looks oversized and out of the place when observed on 13″ or larger screens. This problem can be fixed using grids, but unlike Bootstrap grids, jQuery Mobile grids will not rearrange depending on a screen size, so you are forced to play manually with CSS media queries.
 
Unlike Bootstrap, jQuery Mobile doesn’t just make your pages look beautiful, it gives a lot of mobile-oriented features like swipe-events, page transitions, allows for single/multipage applications, AJAX page preload, and history manipulation API, and lots of touch-friendly components/widgets.
 
What I like most about jQuery Mobile is its 3rd party plugin support, including every imaginable jQuery plugin you can think of. Same goes for theme support, though it’s disappointing that jQuery Mobile don’t support native mobile look and feel, at lease not out of the box, you can always acquire it via 3rd party themes and nothing prevents you from creating one of your own(jQuery Mobile has excellent theme builder).
 
Documentation is another great thing about jQuery Mobile though it can be pretty confusing for the first time. When you google it you will be served every possible result from every possible jQuery Mobile version, and there are a lot of them (so always watch for a right version). Every possible aspect of a framework HTML5 markup is heavily described with numerous examples. On the other hand, this framework is not built of HTML5 only; JavaScript is also heavily involved, and that part is poorly documented and described. That’s is the second biggest problem related to jQuery Mobile. I won’t kid you; 80-90% of StackOverflow jQuery Mobile related question are related to JavaScript or custom UI modifications.
 

Pros

 
  • Easy to develop, if you understand HTML(HTML5) you will have pretty good understanding of jQuery Mobile
  • Excellent 3rd party support, what through knowledge what through plugins
  • Easy to debug
  • Better for mobile web applications
  • Official documentation
  • Stackoverflow
 

Cons

 
  • Sometimes slow and sluggish on mobile devices, application needs to be designed properly
  • Dull look unless you are capable UI designer. All applications look the same, and it looks pretty bad on large screens
  • Official documentation is lacking in some segments, too few information about jQuery Mobile architecture and JavaScript
 
Continue Reading
  • Hamza

    Nice tutorial Dragan Gaić !! Thanks to you i am finally able to make a decision

  • amdad

    But I tried to combine both & success
    see below
    <div data-role="page" id="pageone" data-theme="b">
    <div data-role="header" id="demo" data-position="fixed" data-theme="b">
    <a href="#" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
    <h1>Dolonchapa</h1>
    <a href="" class="ui-btn ui-icon-forward ui-btn-icon-left">Logout</a>
    </div>

    <div data-role="main" class="ui-content">
    <div class="container">
    <div class="row">
    <div class="col-sm-3 visible-lg visible-md">
     
    </div>
    <div class=" col-sm-6">
    <form method="post" action="login.php">
    <div>
    <h3>Login Form</h3>
    <label for="uname" class="ui-hidden-accessible">Username:</label>
    <input type="text" name="uname" id="uname" placeholder="Username">
    <label for="pass" class="ui-hidden-accessible">Password:</label>
    <input type="password" name="pass" id="pass" placeholder="Password">
    </div>
    <input type="submit" name="submit" value="submit" class="ui-btn">
    </form>
    </div>
    </div>
    </div>
    <div data-role="footer" style="text-align:center;" data-position="fixed" data-theme="b">
    <div data-role="controlgroup" data-type="horizontal">
    <a href="#" class="ui-btn ui-icon-action ui-btn-icon-notext" style="text-align:center">Facebook</a>
    <a href="#" class="ui-btn ui-icon-alert ui-btn-icon-notext" style="text-align:center">Twitter</a>
    <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-notext" style="text-align:center">Instagram</a>
    </div>
    </div>
    </div>
    </div>

    • I never said you can't combine them.

      <blockquote>While working on this article I missed mentioning one excellent advantage of jQuery Mobile and Bootstrap. They work very well together, you can easily combine Bootstrap grid system with jQuery Mobile page architecture, thus solving both frameworks disadvantages.</blockquote>

      I just don't see the purpose of this combination.

      • sumer

        hii thanks

  • Charles

    Hi Dragan,
    Thanks for the helpful comparisons. I noticed this phrase in the ‘Cons’ section for Bootstrap: “Simply not made for professional use.” Can you explain what you meant by that? I don’t see anything in your text that clarified that, so I’m not sure what you meant. Thanks.

  • JishJashJosh123

    I’ve played around with jquery mobile and I found it fun and simple to learn. I’ve also done a little bit of Bootstrap which seems to give you more design features/capabilities but I prefer the former. Jquery is by definition a javascript libary so a shortened version of javascript which makes it a great place to start with this powerful language. I’m going to learn jquery fully first and then move onto angular.js. What I’m really trying to decide between is whether it would be best to use bootstrap if I am planning on building an angular application (web & mobile) than jquery to create a UI?

    • Go with Angular and Bootstrap. Angular is the future, jQuery is simply not what it used to be.

  • Editorial Help

    Good content. Thanks for taking the time to write it up. By the way, the word you’re looking for is “break”, not “brake”. Braking is what you do in your car to avoid hitting something; breaking is what you do when you want something broken.

  • Amnon

    The second ‘purely’ should be ‘poorly’.

  • andreas

    hello,

    I don’t know is it right place to ask question on topic. I’m not a newbie to a web design/development but also I am aware I am far from great professionals either. Almost everyone pushes
    Bootstrap as good framework, but I think in the meaning of semantics that is no good to have such huge amount of classes in the page structure(“I mean class sausssagess”), even it by itself is nice to have all that pre-defined stuff like j query.I tried lots of other frameworks, too neither satisfied me.

    Recently I find “Semantic.gs” written by Taylor Tate it’s a responsive
    framework based on less.css and twelve column grid layout, it strictly
    separates html from css, you have pure html structure and when it comes to css you define all classes , variables, mixins
    etc in css file. Here’s my personal site http://androwebgraphic.com written in html 5 using semantic.gs.
    The downside is cause you must write all the jquery you need for functionality.
    Few days ago I start to consider jquery mobile to use find nice tut everything seems to me nice and well till I get to the part when author mentioned again using classes in html markup so I feel little disappointment cause it returns me back to the issue with Bootstrap “classes”.

    So if someone would be so kind to give me an advice, what to use in the development to get the most for my sites to be good rendered I all kind of devices.

    Thanks in advance Andreas

  • Marcel

    Great articles! Thanks =)

  • Eduardo Chávez

    Great articule man! You explained clear JQM But What do you mean about “Simply not made for professional use” as a Bootstrap CON? I read that a lot of pages used Bootstrap for their mobile design and are success cases. Could you give me some feedback? Regards

  • Eduardo Chávez

    And thanks a lot for the article 😀 !

  • RD

    “They work very well together; you can easily combine Bootstrap grid system with jQuery Mobile page architecture, thus solving both frameworks disadvantages.”
    I’ve seen comments elsewhere online that this isn’t true. Can you suggest any good resources that guide you through using both?

  • Nikolay Delibozov

    In the picture for bootstrap, there is a horizontal slider, but I can’t find it in the bootstrap documentation?

  • Ruwen

    PERFECT!
    By chance again i came across to one of your articles and again i am very excited about it.
    You always describe a short summarization of your topics with the important facts and issues i was asking myself for.

    Keep it up!