Coding - HTML5 - Design - CSS3 - Responsive

Bootstrap 101

Want to save time on development? Want to learn the basics of a great foundation? In this article, I’ll briefly introduce you to Bootstrap and provide you with additional resources so you can learn more about it.

Check out our new Ultimate Guide To Bootstrap Resources

Bootstrap was initially developed by Twitter engineers, and here’s how they describe/define it:

Bootstrap is a front-end toolkit for rapidly developing web applications. It is a collection of CSS and HTML conventions. It uses some of the latest browser techniques to provide you with stylish typography, forms, buttons, tables, grids, navigation and everything else you need in a super tiny (only 6k with gzip) resource.

You can download just the Bootstrap core files: one folder with CSS, one with fonts, and one with javascript; Or download Bootstrap plus the source files. When you download the source you get all of Bootstrap and more, including sample html files with their respective CSS for different web elements, like navigation bars, a carousel, grids, footers etc.

Bootstrap core files

Bootstrap core/precompiled files in the dist/ folder

Getting Started

If you download Bootstrap’s source files, in addition to the html sample pages and CSS files, you’ll also get access to the LESS files (more below) and the javascript files.

The javascript files are the plugins that give your site dynamic behaviors, such as transitions, alerts, popovers. You can pick and choose from a variety of individual javascript elements from Bootstrap or you can use the Bootstrap core javascript file bootstrap.js. (Note that Bootstrap plugins require jQuery.)

Here’s a sample of the Bootstrap javascript/jQuery carousel template:

Bootstrap carousel template

Bootstrap javascript/jQuery carousel template

Getting More with LESS

The LESS files are part of what makes Bootstrap so powerful. It adds additional dynamic functionality to the CSS with variables, mixins, operations and functions. To find out more about LESS, visit or the LESS Github page.

You can play around and modify almost anything in Bootstrap, but you’ll want to avoid altering the core files that are shown in the first screenshot.

Bootstrap is entirely customizable but you have to be careful when customizing. You will want to keep whatever Bootstrap stylesheet you’re working with separate and intact and then create a new stylesheet for your own customized elements. Keeping Bootstrap’s files separate will make upgrading less of a headache.

All that being said, not all web projects will require all the files Bootstrap has to offer, so visit this handy Customizer Tool so you can choose and download which elements you need for your project. This gives you quick access to your own custom version of Bootstrap.

Responsive Ready

With the release of the latest version of Bootstrap (Bootstrap 3), all files are now coded to allow for responsive design and meant to work with mobile devices and tablets.

Because Bootstrap is a responsive framework, as a designer/developer you must use the HTML5 doctype when coding, and remember to make your images responsive-friendly by adding the .img-responsive bootstrap class.

If you want to see Bootstrap in action, visit Karma WiFi and Scoutzie. Both of these sites were built with Bootstrap and are heavily customized.


Karma WiFi Website

Scoutzie site

Scoutzie site

Bootstrap Themes/Templates

Bootstrap comes with its basic template, but if you want something more complex you can purchase other bootstrap themes/templates to build upon.

Bootstrap Unify Theme

Bootstrap Unify Theme

Additional Resources

Bootstrap is a trusted and thoroughly tested framework used by developers everywhere. If you are ready to start working with Bootstrap, be sure to read the documentation thoroughly and the getting-started.html file. Also check out our Ultimate Guide to Bootstrap: Bootstrap templates, themes and editors.

To keep up with Bootstrap news, developments and updates, visit the Bootstrap blog regularly.

If you want to find out more about how Bootstrap was developed and the reason why Twitter uses it, check out this blog post from 2011 announcing its release.

If you need more Bootstrap themes, visit:

About the author

Patricia is the Founder of Upwards Content, a fledgling content creation/management business. If you like my articles, follow me on Twitter!

Share this post

Leave a Comment

Subscribe To Our Newsletter