Twitter Bootstrap without jQuery

Twitter Bootstrap web page The more I use Twitter Bootstrap, the more I like it. The only thing that puts me off is needing jQuery for a few simple interactions such as hiding and displaying elements. jQuery’s an excellent library but if a site doesn’t make full use of it, it can be overkill, adding unnecessary bytes to your pages. As a replacement, I tried to make a lightweight alternative script specifically for Bootstrap (version 2 only at present).

Download it here

To use the script just put it in your pages, preferably at the bottom, instead of jQuery and the Bootstrap plugin scripts, like so:

    ...
    <script src="bootstrap-without-jquery.min.js"></script>
  </body>
</html>

The benefit is better performance thanks to faster page load times. It obviously doesn’t do everything that jQuery and the Bootstrap plugins do but it should be enough if you just want:

working dropdown menus;
dismissable alert boxes;
a collapsible navigation menu triggered by the “hamburger” button.

I tested it on several mobile and desktop browsers, including IE 8, but I’d appreciate further reports of where it does or doesn’t work. There may also be other Bootstrap components that require JavaScript so I can add support for those if there’s demand (or you can send a pull request). The GitHub page is here along with more details of browser support: github.com/tagawa/bootstrap-without-jquery

I’ve also prepared a simple Bootstrap demo page for testing. As always, feedback is welcome!

Update:

There’s also a good resource encouraging developers to use plain JavaScript where jQuery may not be necessary, with JavaScript code snippets that correspond to jQuery methods: YouMightNotNeedjQuery.com

15 thoughts on “Twitter Bootstrap without jQuery”

John Locke 30 May, 2013 at 8:19 pm

The thing that bothers me about Bootstrap is loading so much library for a few simple things, as well, so thank you very much for this jQuery-less version of Bootstrap. Performance is a big issue on websites in general today, as I see you have noticed.

Reply ↓

Daniel Post author30 May, 2013 at 10:56 pm

Thanks John. It doesn’t have perfect coverage for what jQuery provides but I hope it helps in certain use cases.

Reply ↓

Pingback: Bruce Lawson’s personal site : Reading List

Samuel Ondrek 3 July, 2013 at 1:09 am

Great!! I really love every new light and fresh enhancement and idea. You are right. If we don’t need jQuery here, it’s only overhead.

Reply ↓

Bootstrap 27 October, 2013 at 1:54 am

Will this work with Bootstrap 3?

Reply ↓

Daniel Post author30 October, 2013 at 10:53 am

Good question. I haven’t look at Bootstrap 3 but I think class names, etc. have changed so this script probably won’t work.

Reply ↓

marcius 23 January, 2014 at 3:38 am

Already works with Bootstrap 3?

Reply ↓

Daniel Post author23 January, 2014 at 4:42 pm

Hi Marcius,

I haven’t tried it but I don’t think so, unfortunately. I haven’t had time to look into an updated version for Bootstrap 3 yet – hopefully soon.

Reply ↓
1. marcius 23 January, 2014 at 9:57 pm
  
  How much is this service?
  
  Reply ↓
  1. Daniel Post author24 January, 2014 at 5:49 pm
    
    Hi again,
    
    My script is free and open source (click on the Download link above), just like Bootstrap itself.
    
    Reply ↓
    1. marcius 24 January, 2014 at 10:13 pm
      
      I know. I want to pay for upgraded service to bootstrap 3. Your script is still free.
      ps: Sorry for my poor english. I am Brazilian.

Lee 14 February, 2014 at 11:55 pm

Hi, Do you have any plans to create a fix for the latest version of Bootstrap?

Reply ↓

Daniel Post author3 March, 2014 at 11:45 am

Hi Lee,

Sorry but I don’t really have the time at the moment. I’d like to update the script at some point, unless somebody else can do it and send me a pull request.

Reply ↓