How to Customize Bootstrap – The Resources You Are Looking For

by Karol   |   last updated July 26, 2015   |   Blog · Bootstrap · HTML5 ·

As we all know, Bootstrap can be used for multiple purposes and is capable of running any type of site. However, when it comes to the appearance of its individual elements – things like content blocks, forms, buttons – it’s very easy to spot the typical Bootstrap footprint, so to speak.

As a result, many Bootstrap sites seem to look very much alike.

Note. This is part three in our Bootstrap series. Previously, we talked about whether or not you should be using Bootstrap in the first place, and we also listed the ultimate set of Bootstrap resources for developers who want to get started with the framework.

This time, the topic is about customizing sites built with Bootstrap framework.

Or in other words, what we’re going to be focusing on today is how to make your Bootstrap site stand out from everyone else’s.

Here are the resources you should look into:

Official customizer for Bootstrap

The official Bootstrap customizable download. This is the first place to go if you want to customize your Bootstrap installation. The interesting thing about how it works is that instead of giving you a settings file of some kind, you actually get to customize the framework prior to downloading and installing it.

Just some of the things you can adjust: common CSS styles, Bootstrap components, JS components, jQuery plugins in use, default colors, global styles, individual elements of every CSS class, margins, padding settings, and many many more.

Once you’re done, just click the Compile and Download button and get your own version of Bootstrap.

Customizing/extending Bootstrap CSS

StyleBootstrap. Great tool for editing the default UI elements of Bootstrap. Compared to the official customization tool, this one delivers some helpers in the form of color pickers that should make the customization faster for you. When you’re done adjusting your custom styles, you can download the final CSS file and add it to your existing Bootstrap installation.

Bootstrap Magic. Another customization tool for the Bootstrap CSS. This one is a bit more advanced and delivers some cool helpers for faster usage. For example, it gives you autocomplete for LESS variables and functions, you get contextual and live preview of the changes you’re making, you can import and create variables, and there’s also a color picker. You can export your custom CSS when you’re done adjusting it.

BootSwatchr. This CSS editor for Bootstrap is more code-based in a sense that you can customize your version of the framework by adjusting the actual CSS code. However, you get to see a preview of your actions on the right side of the screen at all times (provides you with immediate feedback). Additionally, there’s a gallery of ready-made modifications, which you can use too.

Bootstrap Live Customizer. Similar to BootSwatchr, but more geared towards developers who prefer to use a UI instead of doing everything in the source code. This customizer allows you to adjust any element of the Bootstrap stylesheet and do so through an easy-to-grasp interface.

New fonts

Font Awesome. It is perhaps the most popular icon font of them all. The Bootstrap version gives you 360+ icons that you can use on your site. Since it is a font, all the icons are in vector formats and will look great on any device and at any scale.

Adjusting the UI

Flat UI by Designmodo. Great package by the guys over at Designmodo. It includes all the basic graphical elements of the framework, such as buttons, input fields, checkboxes, typography settings, icons, color swatches, and many more. Everything available for free. And like the name suggests, it’s a “flat design” take on the Bootstrap framework.

Fbootstrapp. A very interesting package designed to make Facebook app development easier. It mimics the design of Facebook, including all the basic elements such as buttons, forms, grids, and more. Great for any developer building something for Facebook.

Bootstrap plugins and snippets

• Bootsnipp. It’s an element gallery for Bootstrap. You’ll find a lot of short and sweet snippets there that provide quick fixes and modifications to the Bootstrap framework. For instance, you can find snippets for custom checkboxes, login and registration forms, profile picture styling, pricing tables, and much more.
• Bootstrap Calendar. A full calendar plugin that allows you to display months, years, weeks, and the events assigned to them.
• Bootstrap Prompts. Alerts for Bootstrap that display modal windows instead of using browser alerts.
• Bootstrap Image Gallery. A touch-enabled, responsive and customizable image and video gallery.
• Bootstrap Modal Carousel. A set of JS and CSS extensions that allow you to display a carousel in Bootstrap.
• Bootstrap Media Lightbox. A lightweight and borderless media lightbox extension for Bootstrap.
• Social Buttons for Bootstrap. A set of great looking social media buttons for Bootstrap based on Font Awesome.
• Yamm! A great mega-menu for Bootstrap. It utilizes the default navbar markup and grid system.
• Bootstrap Sidebar. A responsive sidebar plugin. Helpful if your menus are too big to fit into a horizontal menubar.
• BootstrapTreeNav. A plugin that makes it possible to create tree-style navigation in Bootstrap.
• jqBootstrapValidation. A great jQuery form validation plugin for Bootstrap.
• Bootstrap Tabcollapse. Adjusts the Bootstrap tabs component for smaller screens by making it collapsible.
• Tokenfield for Bootstrap. A great tagging plugin for Bootstrap that uses jQuery. Big focus on keyboard support.
• ClockPicker. A nice clock-style time-picker for Bootstrap.
• Accordian Wizard. An accordion-based wizard implementation for Bootstrap.
• Bootstrap Confirmation. A very nice plugin that replaces the default confirmation dialogs with pop-overs.
• Bootstrap Star Rating. A cool star rating plugin based on jQuery. Supports fractional star fill and RTL input.

Books

Extending Bootstrap by Christoffer Niska. Published by PACKT Publishing, this book is geared towards intermediate developers who want to extend Bootstrap through themes and plugins (already existing ones and their own).

Modifying the grid

Shoelace. Visual Bootstrap grid builder. Instead of experimenting with HTML, build your site’s Bootstrap grid through an easy-to-use UI.

LayoutIt. Another Bootstrap layout builder. But this time, apart from the grid adjustments, you can also add basic site elements such as titles, paragraphs, navigation, forms, tables, images, and everything else that’s part of Bootstrap’s structure.

That’s about it for our set of Bootstrap goodies and extensions, so now it’s your turn to chip in! Do you know of any other Bootstrap resource that would look good on this list?