How can the slogan “Sleek, intuitive, and powerful front-end framework for faster and easier web development” be ignored, especially when it refers to a project backed by the folks at Twitter? The project is called Bootstrap, and it has gained a sizable following since its inception, with NASA being one of the more recognizable names using it. The Built With Bootstrap site provides more examples. Here’s a peek at what Bootstrap can do for you.

What is Bootstrap?

Bootstrap is an open source framework for building web interfaces employing responsive design. Bootstrap allows all levels of Web developers and designers to use it. Bootstrap utilizes JavaScript (including jQuery), CSS, and HTML and includes support for CSS3 and HTML5. You can bolt Bootstrap onto your application to provide advanced functionality, or you can use it to build applications from the ground up.

Getting Bootstrap

Bootstrap is available as a free download via GitHub in two flavors: the minimal, compiled version and the full blown source code including documentation. The first option (compiled) is the fastest way to get up and running with Bootstrap. It contains three subdirectories: css, js, and img. The directory names are self-explanatory, but just in case — the css contains style sheets, js contains JavaScript files, and images used by Bootstrap are stored in the img directory. With the download/install complete, you are ready to put Bootstrap in motion.

Using Bootstrap

Bootstrap has four categories of design features: scaffolding, components, JavaScript plugins, and base CSS. The scaffolding (or global styles) is built on responsive 12-column grids, layouts, and components. The components include basic styles for common user interface features. JavaScript plugins follow components but use JavaScript not styles for elements. The base CSS includes styles for basic HTML elements, and it includes a set of icons called Glyphicons.

One caveat with Bootstrap is that some features utilize HTML5, so the HTML5 doctype must be used on all pages. The following snippet shows its format:

<!DOCTYPE html>
<p><html lang="en"></p>
<p>...page body...</p>
</html>

The documentation provides great instructions for using Bootstrap. A good section of it describes the basics of Bootstrap-enabling a web page. The following code provides an example of these basics. The main points are the HTML5 doctype, the viewport meta element, the bootstrap.min.css stylesheet, and the two JavaScript files referenced at the bottom of the page.

<strong><!DOCTYPE html>
</strong><html>
<head>
<title>TechRepublic.com - Bootstrap</title>
<strong><meta name="viewport" content="width=device-width, initial-scale=1.0"></strong>
<!-- Bootstrap -->
<strong><link href="css/bootstrap.min.css" rel="stylesheet" media="screen"></strong>
</head>
<body>
<h1>Greetings from TechRepublic!</h1>
<strong><script src="http://code.jquery.com/jquery.js"></script></strong>
<strong><script src="js/bootstrap.min.js"></script></strong>
</body>
</html>

One feature of Bootstrap that I have enjoyed with a current project is the column layout with the fluid example providing a visual representation of the layout. I used similar elements with YAML, but I find Bootstrap more straightforward and has more features.

The next steps in terms of using Bootstrap depend on what you want or need to do for your design. In the web realm, mimicry is flattery — “borrowing” other designs is commonplace and, dare I say, accepted. The examples section of the Bootstrap site provides great visuals of Bootstrap in action, and you can easily view the source to borrow what has already been done.

An interesting option with Bootstrap is the ability to roll your own and download the result — this is available by way of the Customize page. It allows you to choose components and jQuery plugins, as well as specify variables. With your choices complete, you may download the results in a compressed zip file. The file contains the Bootstrap standard directories: css, img, and js, with the necessary files in each.

Another option is purchasing or downloading designs created by third parties. A Google search yields an overwhelming number of matches, so I will leave the details of the search to you, but there are a variety of great templates available at your fingertips. I have tested a few offerings, but nothing to the point where I can recommend them over others.

Give Bootstrap a try

I am fairly new to the framework, but I find designing and laying out a site is a simple and straightforward process when using Bootstrap. I have received similar feedback from colleagues, but this is a small sample size, so take Bootstrap for a test drive with your next project and decide for yourself.