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?
Bootstrap is an open source framework
for building web interfaces employing responsive design. Bootstrap allows all levels of
application to provide advanced functionality, or you can use it to build
applications from the ground up.
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,
img directory. With the download/install complete, you are ready to put Bootstrap
Bootstrap has four categories of design
scaffolding (or global styles) is built on responsive 12-column grids, layouts,
and components. The components include basic styles for common user interface
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
bottom of the page.
<strong><!DOCTYPE html> </strong><html>
<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>
<h1>Greetings from TechRepublic!</h1>
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
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.