Bootstrap provides designers and developers with a straightforward way to create web interfaces that employ responsive design. Here's how to use the framework's design features.
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.
Note: This article originally appeared in our Software Engineer blog.
What is Bootstrap?
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>
<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.