Bootstrap or jQuery Mobile – Pros and Cons

Written by on April 10, 2015

Bootstrap or jQuery Mobile – Pros and Cons

Bootstrap:

Link

Bootstrap is a front-end framework (personally it’s debatable if it can be called a framework ) relying on a CSS grid system for both responsive and non-responsive look and feel. That same look and feel are improved via cherry picked icons, typography, code, tables, forms, buttons, etc. Just like jQuery Mobile it also includes different UI components, like dropdowns, button(s), button groups, button dropdowns, navs, navbars, breadcrumbs, pagination and many other. And just like jQuery Mobile everything comes packed with jQuery JavaScript framework.

Here’s where lines between Bootstrap and jQuery becomes blurry. Bootstrap is advertised as mobile first, and that’s only partially correct. While responsive in nature, it looks better on desktop screens than mobile ones. No matter what device you use, Bootstrap will always look like a desktop application (unlike jQuery Mobile, who always look like a mobile application). Unfortunately, there’s a big downside, every Bootstrap application looks and feels the same (just like any jQuery Mobile application). Of course, nothing prevents you doing some custom coding, which again breaks the purpose of Bootstrap rapid prototyping. Not to mention, Bootstrap customization can be pretty tricky, especially if you’re not CSS3 savvy.

Bootstrap UI

While in much smaller scale compared to jQuery Mobile, JavaScript also plays a role here. The best part, however, is that Bootstrap enables you to skip writing a lot of JavaScript altogether. With it, you can easily manipulate any visual aspect of your page, be that modal windows alerts, tooltips, etc.

Thankfully jQuery used with Bootstrap will not cause performance problems seen in many jQuery Mobile applications. This is because Bootstrap relays more on CSS during content generation than jQuery Mobile. More praises should go to Bootstrap grid system that is much much better than anything seen in jQuery Mobile, even if you count in every 3rd party grid systems. That grid system is what makes or breaks a good Bootstrap application. Using the platform’s grid isn’t mandatory, but it does make your job a whole lot easier.

Bootstrap has a large community, not to mention dedicated developers, which is a curse and a blessing at the same time. Thankfully Bootstrap doesn’t suffer from this as much as jQuery Mobile does. If you need anything just look for it in a Bootstrap official documentation page o Google it, Stackoverflow is also a right place for your question.

Pros

  • Easy to develop and prototype
  • Excellent 3rd party support and community
  • Better for desktop web applications
  • Less dependent on jQuery which relates to better performance
  • Stackoverflow

Cons

  • All sites look the same, customization tends to be very hard
  • Simply not made for professional use
  • Official documentation

Final words:

I leave you to make your decision. In few words, choose jQuery Mobile if you are working on a mobile application or choose Bootstrap if a desktop application is your primary goal. Both frameworks, while somewhat limited, are too good to ignore.

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.

Who Am I?

Between working as a senior Java developer in one of the largest insurance companies in the world and traveling, in my free time, I work as a professional mobile development adviser. I'm also a major jQuery Mobile supporter back at StackOverflow and a forum moderator at the official Ionic Framework forum.



Categories

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

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

  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?

  9. 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!

Leave a Reply