Web Development: 10 Useful Bootstrap Tools, Utilities, Generators and Templates
Johnny Lee
|
|
Every since it was launched, Bootstrap has taken the Internet by storm. It continues to evolve and keeps growing in popularity with each passing day – and why shouldn’t it be popular? After all, where else do we find a responsive framework with such an extensive library of prestyled components, and an active community that offers a lot of great extras and add-ons?
In today’s post, we’ve rounded up some of the best Boostrap resources you can find online. Generators, utilities, templates… you’ve got them all here! So go ahead, check them out, and have fun creating miracles with Bootstrap!
BootMetro
BootMetro is built on top of Bootstrap and inspired by the Metro UI CSS by Sergey Pimenov. It’s a simple yet flexible HTML/CSS/JavaScript for web designers and developers who want to use the Windows 8 Metro style.
Bootstrap Video Player
Bootstrap Video Player is an easy-to-customize HTML5 video player plugin for jQuery based on Bootstrap’s UI. Some of its features include multi-video support, Pause/Play button, progress bar, timer, show and set volume, full-screen, auto-play, and auto-hide control bar.
Tocify
This jQuery plugin dynamically generates a table of contents. It can be optionally styled with Bootstrap or jQuery UI Themeroller, and optionally animated with jQuery show/hide effects. It also supports smooth scrolling, scroll highlighting, scroll page extending, as well as forward and back button support.
Bootstrap-Ready Font Custom
Font Custom generates custom icon web fonts from the comfort of the command line. It creates styles using Bootstrap’s .icon-{{your-icon-name}} naming convention. Just include fontcustom.css, and you’re all set to go.
Fbootstrapp
This toolkit is designed to kickstart development of Facebook iFrame apps in relevant sizes. It comes with base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more; styled to have a Facebook-like look and feel.
Bootswatch
This is a collection of 12 theme for Bootstrap. All you need to do is to download the bootstrap.min.css file associated with each theme, and replace it with Bootstrap’s style sheet.
jQuery File Upload
jQuery File Upload is a widget that supports multiple file selection, drag-and-drop, progress bars, and preview images. It also supports cross-domain, chunked, and resumable file uploads, and client-side image resizing, among others.
Mobile-First Bootstrap Grid
Mobile-First Bootstrap Grid comes with desktop styles by default, and uses media queries to change the layout for mobile and large screens. This version starts with mobile styles first and uses media queries up to larger screens.
Bootstrap Image Gallery
This is an extension to Bootstrap’s modal dialog, making navigation easy between a set of gallery images. Some of its features include mouse and keyboard navigation, transition effects, full-screen mode, and slideshow functionalities.
jQuery UI Bootstrap
jQuery UI Bootstrap offers a jQuery UI compatible template inspired by Bootstrap’s design. It also has a version of the Bootstrap CSS, with a few sections commented out which allows the template to work alongside it.
