Ultimate Collection of Resources for Developers Starting With Bootstrap

by Karol   |   last updated April 18, 2015   |   Blog · Bootstrap · HTML5 ·

A couple of weeks ago, we published a general overview of Bootstrap and its pros and cons. Basically, the goal was to help you decide whether or not Bootstrap is a platform worth using for your next web development project.

Feel free to check that post right now if you haven’t already (link).

Some of you have expressed really strong opinions in the comments section under that post, which only proves that Bootstrap framework remains to be one of the hot topics in the web development world today. So as a follow-up, this time we’re taking a look at some of the most useful Bootstrap developer resources from around the web.

This list goes through various types of information, tutorials, and tools related to Bootstrap framework. I’ve divided it into a handful of categories just to make everything a bit easier to grasp and allow you to skip things you’re not interested in.

Starting with:

Official documentation

Getting started with Bootstrap. This is the first place you go for everything Bootstrap-related. While the official docs are not always written in the most beginner-friendly form, they surely are the most up-to-date, and they provide you with everything needed to make Bootstrap work. Make sure to look into:

• CSS in Bootstrap. A breakdown of everything that the Bootstrap stylesheet has to offer (an explanation of every class) and how to work with it effectively.
• Components in Bootstrap. A handy cheat-sheet listing every element that the default installation of Bootstrap comes with. Including glyphicons, drop-downs, buttons, input fields, navbars, labels, and much more.
• JavaScript in Bootstrap. A description of the JS libraries and classes delivered with Bootstrap, plus how to use them to bring Bootstrap’s components to life.

Customizable download package. A truly great section on the official site, rarely seen with other systems and frameworks. Here, you can customize your version of Bootstrap by enabling or disabling certain modules. You can even adjust things like the default typography settings, colors, margins, and much more. In short, customizing your version of Bootstrap prior to downloading and installing it is a much faster alternative to doing it afterward (on a live site).

Bootstrap SASS. It’s where you can download a version of Bootstrap ported to SASS.

Bootstrap step-by-step tutorials

Understanding Twitter Bootstrap 3. Brief tutorial by SitePoint.com taking you all the way from scratch to an operational Bootstrap website. It’s the shortest tutorial on this list as it’s presented in a single blog post. Skips a couple of steps, but still gives you a great overview on how to work with the platform.

Bootstrap Tutorial by Tutorial Republic. This tutorial is divided into two main parts – basic, and advanced. Each part features a number of lessons on individual aspects of Bootstrap. In them, you will learn things such as working with the grid, making sure that the result of your work is responsive, creating tables, lists, forms, and working with everything else on your way to Bootstrap mastery. That being said, the focus here is more on the individual elements of Bootstrap rather than teaching you how to build a complete site from start to finish.

Bootstrap 3 Tutorial by W3Schools. You can find a lot of great stuff at w3schools.com, so it’s no surprise that they have a whole section dedicated to Bootstrap as well. With this tutorial, you will learn how to work with Bootstrap both in terms of the general website structure, as well as its individual elements. There are 19 chapters as part of the tutorial, and each one comes with written descriptions and source code demos that you can test through an operational dev environment.

Online courses

Make a Website: Bootstrap. Great free course at CodeCademy.com that takes you by hand through the process of re-building Airbnb’s homepage with Bootstrap. The course uses a custom three-column interface that presents the current instructions (1st column), the source code editor (2nd column), and the preview section (3rd column). The whole process is nicely guided, so you can easily understand what’s going on under the hood.

Code a Responsive Website with Bootstrap. This is a Udemy course priced at €89 ($95). Out of all Udemy courses on Bootstrap, this one seems the most professional and with the videos having the highest production value. Apart from that, it’s been taken by nearly 2,500 students and has the overall rating of 4.7 based on 104 reviews. The course goes through the steps of hand-coding a responsive site using Bootstrap, and it consists of 28 lectures that add up to a total of four hours of video tutorials.

Blasting Off with Bootstrap. A course that’s part of the “HTML/CSS Path” at CodeSchool.com. The first module of the course is free and the rest can be accessed by buying the $29 / month membership (which gives you unlimited access to all courses at CodeSchool.com, by the way). The course is well-structured and it takes you all the way from basic understanding of how Bootstrap works to working with grids, to adjusting typography, to adding a bit of flare to your creations, to adding extra JavaScript components.

Individual elements of Bootstrap explained

First, let’s take a look at what W3Schools has to offer in this department:

• Grids in Bootstrap. Bootstrap’s grid system explained (along with examples and code demos).
• Basic CSS classes explained: typography, buttons, forms and form elements, helper classes, images, tables.
• Individual components explained: glyphicons, drop-downs, navs.

Understanding Bootstrap’s Grid System. An in-depth breakdown of what Bootstrap’s grid system is and how to work with it.

Bootstrap and WordPress

Bootstrap Basic. A simple WordPress theme for developers to build their own creations on top of. You can treat it as a starter theme, or just as a point of reference when you get stuck working on a custom build.

BootstrapWP. A detailed online course teaching how to build a complete WordPress theme with Bootstrap. It covers not only the basic steps required in order to build a theme, but also how to create custom post types, a theme options panel, and even updating your theme later down the road when new versions of the framework come out.

Bootstrap 3! Create a Responsive WordPress Theme Now! Another Udemy course (€87, ~$93). This one focuses exclusively on building your first WordPress theme on Bootstrap. There’s three hours of video content across 35 lectures. Everything is divided into a handful of sections that transition nicely from one to another. The course has the average rating of 4.9 (25 reviews) and it’s been taken by nearly 4,000 students.

Free Bootstrap themes

Start Bootstrap. A collection of Bootstrap themes and templates. There’s a lot of free and open source themes here, as well as some great premium products.

Bootstrap Zero. Said to be the largest open-source, free Bootstrap template collection. What’s great here is that apart from standard website templates, you’ll also find templates for dashboards, admin interfaces, and more.

Other Bootstrap tools and resources

Shoelace. A visual grid builder for Bootstrap. This nice drag-and-drop interface lets you construct a grid structure in no time. Then you can export the result of your work as HTML. Saves a lot of time during development.

Button builder. Very small yet handy button generator for Bootstrap. Just a couple of clicks and you have yourself a good-looking button.

Jetstrap. A drag-and-drop Bootstrap site builder. It provides a faster alternative to building a Bootstrap site by hand with source code. The plans start at $16 per month.

Resources at Bootsnipp. A massive roundup of various Bootstrap resources. Some of the things you’ll find inside: icon fonts, JavaScript extensions, forms, templates, prototyping tools, development resources, extensions, UI elements, and more.

There you have it, more than 32 Bootstrap resources for you to devour! Feel free to comment and let us know if there’s anything else that should be listed here. We’d be happy to update this post with your input.