Learn About Bootstrap: Get Started Developing Responsive Websites

This guide will introduce you to Bootstrap, the popular open-source front-end framework for websites. Continue reading for an introduction and brief history, or use the navigation on the right to jump to the Bootstrap resource you are looking for.

Since version 2, Bootstrap incorporates Responsive Web Design (RWD) components, making it an excellent tool for scaling websites with a single code base shared between different devices using CSS media queries.

Bootstrap is open-source and it is hosted, developed and maintained on GitHub. At the moment, it is the most starred project on GitHub. Let’s find out why.

What Is Bootstrap?

Bootstrap development was started by Twitter’s Mark Otto and Jacob Thornton as an effort to develop an internal tool — a new framework to encourage consistency across internal tools at Twitter.

During these early stages of development, Bootstrap was originally named “Twitter Blueprint.” The new framework matured quickly and was released as an open-source project on August 19, 2011.

The Bootstrap core team is continuing development, and the latest version is Bootstrap 3, which was released in August 2013.

Bootstrap is a free, open-source HTML, CSS, and JS framework containing templates for text, forms, buttons, navigation, and other relevant interface components.

Being a front-end framework, Bootstrap is an interface for the user, unlike server-side code that resides on the back-end server. With the use of RWD components, Bootstrap automatically adapts web pages to different screen sizes and pixel densities on various devices.

With Bootstrap, web developers can concentrate on the actual development, without worrying about design, and get a good looking website up and running quickly.

Bootstrap can be used in any development environment or editor, and any server-side technology and language, from ASP.NET to PHP to Ruby on Rails.

Since August 2015, official Bootstrap themes are available for purchase with a single payment and a multiple-use license with free updates.

Bootstrap is copyrighted by Twitter, but it is released under the MIT license, permitting you to use and modify Bootstrap or its components for both private and commercial purposes.

Bootstrap Features

Bootstrap is compatible with the latest versions of Google Chrome, Mozilla Firefox, Internet Explorer, Opera, and Safari browsers. Some of these browsers are not supported on all platforms.

Stylesheets that provide basic style definitions for all major HTML components are included with Bootstrap, allowing easy customization of website appearance.

One of the main features of Bootstrap is its fluid grid system that can scale up to 12 columns according to the size of the screen, from mobile devices up to desktop screen sizes, and everything in between, both portrait and landscape oriented.

This grid system creates the essential building blocks for dynamic pages.

Bootstrap also features many other common interface elements, including buttons with advanced features, labels, lists, thumbnails, warning messages, progress bars, and several JavaScript components like dialog boxes, carousels, tooltips, alerts, buttons, and so on.

Some of these components extend the functionality of existing interface elements, for example adding an auto-complete function for input fields.

Benefits to Using Bootstrap

In the last few years, Bootstrap has become an increasingly popular front-end framework with millions of websites using it.

According to Bootstrapbay’s Christopher Gimmer, there are five top reasons to use Bootstrap.

First, Bootstrap increases the speed of development. One of the main advantages of Bootstrap is the sheer speed of development.

With Bootstrap, you can use ready-made blocks of code, and combined with the framework’s cross-browser compatibility, you can quickly develop a website. Using ready-made Bootstrap themes and modifying them to suit your needs can save even more time.

Secondly, Bootstrap generates responsive, mobile ready websites.

With the continued rise in popularity of mobile devices, and optimistic predictions of global mobile data traffic growth, having a responsive website that can work on devices with wildly different form-factors is becoming very important.

With Bootstrap’s built-in RWD components and the fluid grid layout that dynamically adjusts to the device’s screen resolution, creating responsive websites requires next no extra effort from the developer.

Third, using Bootstrap ensures consistency.

Bootstrap was originally developed to encourage consistency. Bootstrap ensures consistency regardless of who is working on the project. In addition, results are uniform across platforms, so output remains the same across different web browsers.

Fourth, Bootstrap is easily customizable.

Bootstrap can be tailored according to different needs of specific projects. Developers can pick the features they need using the Bootstrap customize page and download only those features in a custom version of Bootstrap, making code leaner and cleaner in the process.

Fifth, Good Support.

Thanks to the size of the community and Bootstrap’s popularity, support tends to be good. The Bootstrap core team has also been good at publishing timely updates, and the development work is continuous. Given its popularity, we don’t expect this to change anytime soon.

Getting Started With Bootstrap

If you are ready to start learning how to use Bootstrap, but you aren’t already familiar with HTML and CSS, the first step to learning Bootstrap is to learn the basics of HTML and CSS.

Basically, Bootstrap CSS needs to be referenced in the head section of your HTML files. JavaScript files are called at the end of the body section of your HTML files. This basic HTML structure is called a Bootstrap template.

Using Bootstrap comes down to applying its CSS classes and JavaScript to your HTML elements, therefore you need to have a good grasp of CSS and HTML. Luckily, this won’t be an issue for serious developers.

Bootstrap Development Environment

After downloading and extracting the precompiled version of Bootstrap, you get the Bootstrap file structure, which is very simple. Bootstrap files are located in three directories: css, js, and fonts.

This file structure is self-explanatory and simple to include in any web project. Besides the ready-to-use CSS and JS files, Glyphicons fonts are also included along with the optional default Bootstrap theme.

Before you start using Bootstrap, you will have to integrate it into your development environment. Detailed instructions can be found online for various platforms, so adding Bootstrap to your development environment is very easy.

Bootstrap Resources

Due to its popularity, you should have no trouble finding plenty of quality Bootstrap learning resources online. The community is thriving and new resources are published on a regular basis.

However, since Bootstrap is a relatively young framework, you won’t find a lot of paperbacks. Most Bootstrap resources are published online, so don’t expect to find any in your local bookstore.

GitHub is a good place to start your search for Bootstrap resources. In addition, you can find numerous Bootstrap guides and tutorials published by individual developers and software companies. Their quality can vary, so make sure you check community feedback before choosing one.

Free Interactive Courses

Reading about software and frameworks can show you the basic usage models and rules, but to get a real feel of how a framework performs, you have to see it in action.

Free online interactive courses are the best way to get a real-life feel for how a framework performs and what it can do.

These courses feature an online compiler, so you can execute and view the examples immediately:

• Check out the basics of Bootstrap at Codecademy tutorial. This is a short beginner’s tutorial that will guide you through basic HTML, CSS, and adding Bootstrap to your web site. This tutorial will show you the basic syntax of Bootstrap with its online compiler.
• W3Schools Bootstrap 3 Tutorial is a comprehensive and very detailed step-by-step guide with a complete Bootstrap reference of all CSS classes, components, and JavaScript plugins.
• Tutorialspoint Bootstrap tutorial is very detailed, covering almost everything you need to know about Bootstrap, from Bootstrap CSS, layout components, plugins, demos, and useful resources. This Bootstrap tutorial also features an online compiler, and is also available as a PDF download.

These interactive courses should give you a good-enough understanding of Bootstrap to start using it on your projects without much hassle.

Bootstrap Demos and Additional Resources

Since Bootstrap is so popular and widely used, it is not easy to single out a few websites to showcase the power and features of it in action.

That is why we will leave that choice to the Bootstrap core team and bring you their official Bootstrap Expo with beautiful and inspiring examples of Bootstrap.

Open the examples and change the size of the browser window to see the RWD features of Bootstrap in action, dynamically adapting the page layout to different screen sizes.

If you are ready to start using Bootstrap, and you need additional useful resources for your projects, check out some of the following:

• Bootstrap official themes from the creators of Bootstrap
• Marketplaces with with premium, commercial Bootstrap themes and templates: creativemarket.com, wrapbootstrap.com, themeforest.net
• Free Bootstrap templates and themes: startbootstrap.com, shapebootstrap.net, bootstrapzero.com.

Of course, there are many other Bootstrap resources available online, and the community contributes new ones on a regular basis, so finding what you need should not be a problem.

Ebooks and Paperbacks

There are a lot of online resources available for Bootstrap, but if you prefer a book or an ebook, the choice is limited.

Though, with so many free online tutorials and resources, maybe it is better to try some of these freebies first. Once you’ve mastered them, you can consider buying a few books.

If you prefer physical texts and books, here are some of the Bootstrap texts available today:

• Step By Step Bootstrap 3: A Quick Guide to Responsive Web Development Using Bootstrap 3 by Riwanto Megosinarso is a true step-by-step guide for beginners. It is recommended if you are completely new to Bootstrap and it covers enough to get you started.
• Jump Start Bootstrap by Syed Fazle Rahman is well suited for beginners and intermediate developers, covering everything you need implement Bootstrap to your webpage.
• Bootstrap Site Blueprints by David Cochran and Ian Whitley is written for the beginner to intermediate front end developers. Good coverage of customizing Bootstrap components and layouts.

All three are also available in eBook form for Kindle.

Important Links

• Bootstrap
• Bootstrap on GitHub.