Bootstrap or jQuery Mobile – Pros and Cons

Written by on April 10, 2015

Bootstrap or jQuery Mobile – Pros and Cons

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, you need further clarification, something is not working or you have a request for another Ionic post? Furthermore, leave me a comment below if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here. Feel free to comment below, subscribe to my blog, mail me to Thanks and have a nice day!


jQuery Mobile:

[quote align=”center”]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.[/quote]


[quote align=”center”]Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.[/quote]

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:


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.


  • 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


  • 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

23 thoughts on “Bootstrap or jQuery Mobile – Pros and Cons”

  1. 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>
    <a href="" class="ui-btn ui-icon-forward ui-btn-icon-left">Logout</a>

    <div data-role="main" class="ui-content">
    <div class="container">
    <div class="row">
    <div class="col-sm-3 visible-lg visible-md">
    <div class=" col-sm-6">
    <form method="post" action="login.php">
    <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">
    <input type="submit" name="submit" value="submit" class="ui-btn">
    <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>

    • 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.

  2. 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.

  3. 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?

  4. 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.

  5. 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 “” 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 written in html 5 using
    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

  6. 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

  7. “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?

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

    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!

Leave a Reply