Bootstrap Toolbox – Tools, Utilities, Generators and Templates

Ever since it was initially released, Bootstrap has taken the internet by a storm. It keeps growing in popularity with each passing day — and why shouldn’t it be popular? After all, where else do you find a responsive framework with such an extensive library of pre-styled components, and a community that offers many, many extras and addons?

In this collection, we have put together some of the best Bootstrap resources. Nay! We have tried to create the ultimate Bootstrap toolbox page: utilities, generators, templates… and much more! So go ahead, check ‘em out, and have fun creating miracles with Bootstrap!

Boostrap Tools & Utilities

Bootstrap wysihtml5

Bootstrap toolbox wysihtml5

Bootstrap-wysihtml5 is a Javascript plugin that makes it easy to create simple, beautiful wysiwyg editors.

Bootstrap wysihtml5 →

Bootpag – Dynamic Pagination

Bootpag - Dynamic Pagination jQuery Plugin Bootstrap toolbox

The Bootpag jQuery plugin helps you create dynamic pagination with Bootstrap (or any other HTML page for that matter).

Bootpag →

Bootstrap Modal

Bootstrap Modal - Extends Bootstrap's Native Modals Bootstrap toolbox

Bootstrap Modal extends Bootstrap's native modals with additional functionality by introducing a ModalManager class that operates behind the scenes to handle multiple modals by listening on their events.

Bootstrap Modal →

Bootbox.js

Bootbox.js - Alert, Confirm and Flexible Dialogs Bootstrap toolbox

Bootbox.js is a small JS library that allows you to create programmatic dialog boxes using Bootstrap modals, without having to worry about creating, managing or removing any of the required DOM elements or JS event handlers.

Bootbox.js →

Bootstrap Prompts

Prompts notifications Bootstrap toolbox

Bootstrap-Prompts is an implementation to replace the alert(), prompt(), confirm() notifications on the browser when using Bootstrap with Modal information.

Bootstrap Prompts →

Pines Notify

Pines Notify - jQuery Notifications for Bootstrap toolbox

Pines Notify is a JavaScript notification plugin designed to provide an unparalleled level of flexibility, while still being very easy to implement and use.

Pines Notify →

prettyCheckable

prettyCheckable jQuery Plugin

The prettyCheckable jQuery Plugin plugin replaces the default checkboxes and radio inputs of Bootstrap for better and more attractive ones.

prettyCheckable →

Bootstrap Tags

Bootstrap Tags jQuery Plugin

Bootstrap Tags is a lightweight jQuery plugin built to extend the Bootstrap UI to include tagging. It features: Autosuggest, Popovers, Exclusions, Filters and Placeholder Prompts.

Bootstrap Tags →

jQuery File Upload

jQuery File Upload

This is a jQuery File Upload widget that supports multiple file selection, drag & dropt, progress bars and preview images. it also supports cross-domain, chunked and re-sumable file uploads and client-side image resizing.

jQuery File Upload →

jQuery Simple Color Picker

jQuery Simple Color Picker

This jQuery Color Picker plugin is lightweight, unobtrusive and easy-to-use. It integrates seamlessly with Bootstrap (it will also works without).

jQuery Simple Color Picker →

Datepicker for Bootstrap

Datepicker for Bootstrap

This plugin will add a clean and lightweight datepicker to a field or to any other element.

Datepicker →

Multi-Color Progressbar Component

Bootstrap Multi-Color Progressbar Component

The Multi-Color Progressbar component creates a progressbar which consists of three colors or zones: Green (bar-success), Orange (bar-warning) and Red (bar-danger).

Multi-Color Progressbar Component →

Bootstrap Video Player

Bootstrap Video Player jQuery Plugin

The Bootstrap Video Player is an easy to customize HTML5 video player plugin for jQuery based on Bootstrap’s UI. Its features include: Multiple video support, pause/play button, progress bar, timer, show & set volume (1/10), full-screen, autoplay and auto hide control bar.

Bootstrap Video Player →

Hover Dropdown

Bootstrap toolbox Hover Dropdown

This is an unofficial Bootstrap plugin that enables Bootstrap dropdowns to activate on hover.

Hover Dropdown →

jQuery Form Validation with Styles

jQuery Form Validation with Styles from Bootstrap toolbox

This jQuery Validation plugin is a fantastic tool for giving users immediate feedback while completing a web form in a Boostrap style.

jQuery Form Validation with Styles →

Bootstrap Image Gallery

Bootstrap Image Gallery

Bootstrap Image Gallery is an extension to the Modal dialog of Bootstrap, to ease navigation between a set of gallery images. It features mouse and keyboard navigation, transition effects, fullscreen mode and slideshow functionalities.

Bootstrap Image Gallery →

Bootstrap Lightbox

Bootstrap Lightbox

Based on the modal dialog, Bootstrap Lightbox is a plugin that adds a lightbox with ease to Bootstrap.

Bootstrap Lightbox →

Bootstrap Arrows jQuery Plugin

Bootstrap Arrows jQuery Plugin

A simple jQuery plugin to include the use of arrows at any angle in your Bootstrap UI designs.

Bootstrap Arrows jQuery Plugin →

Tocify – A Bootstrap jQuery Table of Contents Plugin

Tocify is a jQuery plugin that dynamically generates a table of contents. It can be optionally styled with Bootstrap or jQueryUI Themeroller, and optionally animated with jQuery show/hide effects. It also offers support for smooth scrolling, scroll highlighting, scroll page extending, and forward and back button support.

Tocify →

CSS3 Microsoft Modern Buttons

CSS3 Microsoft Modern Buttons

Designed to work with Bootstrap, these CSS3 Microsoft/Metro buttons are a lightweight and easy-to-use CSS/JS library that uses CSS3 styles for rich button design.

CSS3 Microsoft Modern Buttons →

tablecloth.js

tablecloth.js - A jQuery plugin that helps you easily style HTML tables

tablecloth.js, built off Bootstrap, is a jQuery plugin that helps you easily style HTML tables.

tablecloth.js →

Fuel UX

Fuel UX - Additional Lightweight JavaScript Controls

Fuel UX extends Bootstrap with additional lightweight JavaScript controls, including: Checkbox, Combobox, Datagrid, Pillbox, Radio Elements, Search, Select, Tree and Wizard.

Fuel UX →

X-Editable

X-Editable - In-Place Editing for Bootstrap

X-Editable allows you to create editable elements on your page. It can be used with either Bootstrap, jQuery UI or jQuery and includes both popup and inline modes.

X-Editable →

Sublime Text 2 Bootstrap Snippets

A useful selection of categorized Bootstrap code snippets for Sublime Text.

Sublime Text 2 Bootstrap Snippets →

Mobile-First Bootstrap Grid

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

Mobile-First Bootstrap Grid →

jQuery UI Bootstrap

jQuery UI Bootstrap offers a jQuery UI-compatible theme inspired by Bootstrap's design. It also provides a version of the Bootstrap CSS with a few sections commented out which allows the theme to work along-side it.

jQuery UI Bootstrap →

MooTools for Bootstrap

The Javascript included in Bootstrap isn’t very useful if you prefer to use MooTools. This library offers all the tools necessary to get the same functionality released by Twitter but using custom plugins that work with MooTools.

MooTools for Bootstrap →

Sass Bootstrap

Bootstrap uses LESS, but if you prefer your CSS flavour to be SASS, here it is.

Sass Bootstrap →

Grid Displayer Bookmarklet for Bootstrap

Grid Displayer Bookmarklet for Bootstrap

This bookmarklet makes in-browser web design that little bit easier by displaying Bootstrap’s grid (it will also work with Foundation).

Grid Displayer Bookmarklet for Bootstrap →

Bootstrap-Ready Font Custom

Bootstrap-Ready Font Custom

With Font Custom you can generate custom icon webfonts from the comfort of the command line. Font Custom creates styles using Bootstrap's .icon-{{your-icon-name}} naming convention. Just include fontcustom.css and you're good to go.

Bootstrap-Ready Font Custom →

WordPress Bootstrap CSS

WordPress Bootstrap CSS

This WP plugin will link the latest Bootstrap CSS and JS to all pages, regardless of the WordPress theme. It comes with WordPress [SHORTCODES] to allow you to easily add elements to your site.

WordPress Bootstrap CSS →

Bootstrap Generators & Builders

Jetstrap – Web-Based Interface Building Tool for Bootstrap

Jetstrap →

Bootstrap Button Generator

Bootstrap Button Generator

Bootstrap Button Generator →

Divshot – The Bootstrap Interface Builder for Web Apps

Divshot →

Bootstrap ThemeRoller – Customize the Look and Feel of Bootstrap

Bootstrap ThemeRoller - Customize the Look and Feel of Bootstrap

Bootstrap ThemeRoller →

Bootstrap Form Builder

Bootstrap Form Builder

Bootstrap Form Builder →

Lavish – Generate your own Bootstrap Color Scheme

Lavish - Generate your own Bootstrap Color Scheme

Lavish is Rails app that will generate a Bootstrap color scheme from any image.

Lavish →

Bootstrap Templates, Themes & Frameworks

BootMetro

BootMetro

Built on top of Bootstrap and inspired by the Metro UI CSS by Sergey Pimenov, BootMetro is a simple and flexible HTML/CSS/JS for web designers/developers that wants to use the Windows 8 Metro style.

BootMetro →

Flat UI Free

Flat UI Free

Built on top of Bootstrap and inspired by the Metro UI CSS by Sergey Pimenov, BootMetro is a simple and flexible HTML/CSS/JS for web designers/developers that wants to use the Windows 8 Metro style.

Flat UI Free →

Roots WordPress Theme

Roots WordPress Theme

Roots is a starting WordPress theme made for developers that’s based on HTML5 Boilerplate and Bootstrap.

Roots WordPress Theme →

Initializr – An HTML5 Templates Generator

Initializr - An HTML5 Templates Generator

Initializr is an HTML5 template generator (with the option of Bootstrap) to help you get started with a new project based on the HTML5 Boilerplate.

Initializr – An HTML5 Templates Generator →

jQuery Mobile Bootstrap – A jQuery Mobile Theme Based on Bootstrap

jQuery Mobile Bootstrap - A jQuery Mobile Theme Based on Bootstrap

jQuery Mobile Bootstrap →

Fbootstrapp – Facebook iframe AppToolkit

Fbootstrapp - Facebook iframe AppToolkit

Fbootstrapp is a toolkit designed to kickstart development of facebook iframe apps in both relevant sizes. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more, styled in the typical facebook look and feel.

Fbootstrapp →

Bootswatch – A Collection of Free Themes for Bootstrap

Bootswatch - A Collection of Free Themes for Bootstrap

Bootswatch is a collection of 12 free themes for Bootstrap. All you have to do is download the bootstrap.min.css file associated with each theme and replace it with Bootstrap's stylesheet.

Bootswatch →

Bootstrap for Github Pages

Bootstrap for Github Pages

This is a Github pages theme based on Bootstrap for your Github projects.

Bootstrap for Github Pages →

Font Awesome 3.0 – The Iconic Font for Bootstrap

Font Awesome 3.0 - The Iconic Font for Bootstrap

Font Awesome →

Elusive Icons – 271 Vector Icons for Bootstrap

Elusive Icons - 271 Vector Icons for Bootstrap

Elusive Icons →

…and finally…

Bootsnipp.com

Bootsnipp.com

Bootsnipp is a super-useful repository of snippets, resources and tips for the Bootstrap framework.

Bootsnipp.com →

Author: (939 Posts)

This post has been written by the team here at Speckyboy Design Magazine.

Comments