bootstrap vs jqueryui

Posted on 2013-09-26
Medium Priority
Last Modified: 2013-10-01
I just heard about bootstrap which is Twitter's css style.  I was considering using this vs jqueryui and themeroller.

Can someone please tell me the pros and cons of each and which they would recommend?  I am looking for some answers based on someone's actual experience vs just theory.

My project isn't complex and is more for learning new things.  I guess I am looking for what is most popular and will be around longer.

I am not worried about users having old browsers, etc.  This is just for me.
Question by:jackjohnson44
  • 2
  • 2
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39525449
I love using bootstrap (and foundation http://foundation.zurb.com/) but I tend to use bootstrap more.

When you are building responsive sites to go across multiple devices, they have it all figured out.   To start with, the grid is the base http://getbootstrap.com/css/#grid.  You still need to put some thought into the layout of your page for xtra small screen to large screen as far as to you want div's stacked or 2 cols or 4 cols accross etc.  The media queries are in place and you just need to use classes like col-md-1, col-xs-1 etc.

I make good use of built in function for modals, nav's, slider/carousel, tooltips  http://getbootstrap.com/javascript/

I have been using it since the last version and have become  used to it that it is second nature and everything I do I used bootstrap as a base and just add my own styling.  You can still make use of jquery and jquery ui if you like.  Jquery UI has some tools for things like modals, but the big key to bootstrap is the built in media queries and supporting css.

I highly recommend using it in your projects.  Start with version 3 though http://getbootstrap.com/ as version 2 uses different css classes.

Expert Comment

ID: 39528375
I have used Bootstrap, and also Pure (http://purecss.io/). I prefer Pure as it seems cleaner and easier to use. This is more an opinion than any specific techie reason.

Author Comment

ID: 39528504
Thanks, can you please elaborate a bit?

Accepted Solution

smeghammer earned 1000 total points
ID: 39529825

I certainly would not call myself a CSS framework expert, but I definitely found Pure easier to use and implement than Bootstrap. The basic div/class structure is very simple and you can wrap your own markup and CSS easily. See http://www.smeghammer.com/index.htm for something I am working on curently [ignore the terrible design...]. The page structure is all based on pure units:
<div class="pure-g">
  <div class="pure-u-1">

Open in new window

and the navigation also based on the default pure navigation component:

<div class="pure-menu pure-menu-open pure-menu-horizontal">
    <ul class="menu">
        <li class="pure-menu-selected"><a href="index.htm">Home</a></li>
        <li><a href="tenants.htm">Tenants</a></li>
        <li><a href="landlords.htm">Landlords</a></li>
        <li><a href="contact.htm">Contact</a></li>
        <li><a href="links.htm">Useful Links</a></li>

Open in new window

You can mix in your own classes as well fo specific design elements:
<div class="pure-g menu">

Open in new window

Here, 'menu' is my specific CSS for the menu colours etc.

The thing I found most useful - which is the same for all CSS frameworks I guess - is of course cross-browser compatibility. You don't even need to think about it (unless of course you implement your own CSS as well) - but for structure, it just works. An added benefit (that I have not used on the above site) is that it is also 'responsive' - i.e. will adapt to different page dimensions, which is great if you want the same html to display on PC, tablet, smartphone.

I think because of its simplicity, and the good examples on their website, it is a good option for someone unfamiliar with CSS frameworks - it certainly was for me.

LVL 54

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 1000 total points
ID: 39530073
" found Pure easier to use "
I never used Pure.  However, the grid/css in bootstrap 3 is much different then 2.  To make a responsive  row where it is split 50/50 for desktop and stacked for mobile is simple too:

<div class="row">
    <div class="col-xs-12 col-med-6">Left half for desktop, one row on top for mobile</div>
    <div class="col-xs-12 col-med-6">Right half for desktop, one row below for mobile</div>

Open in new window

I would like to try Pure, but the fact bootstrap is widely used and many  templates are built around it makes it a choice for a closer look.

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn how to dynamically set the form action using jQuery.

624 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question