Twitter Bootstrap

Or, you can have four narrow columns:


<div class="row">
    <p class="span3">Narrow paragraph. Narrow paragraph. Narrow
    paragraph. Narrow paragraph.</p>
    <p class="span3">Narrow paragraph. Narrow paragraph. Narrow
    paragraph. Narrow paragraph.</p>
    <p class="span3">Narrow paragraph. Narrow paragraph. Narrow
    paragraph. Narrow paragraph.</p>
    <p class="span3">Narrow paragraph. Narrow paragraph. Narrow
    paragraph. Narrow paragraph.</p>
</div>

Or, even a left-hand sidebar, with main text on the right:


<div class="row">
  <p class="span2">Sidebar. Sidebar. Sidebar. Sidebar.
  Sidebar. Sidebar. Sidebar. Sidebar. Sidebar. Sidebar.
  Sidebar. Sidebar. Sidebar. Sidebar. Sidebar. Sidebar.
  Sidebar. Sidebar.</p>

  <p class="span10">Main text. Main text. Main text. Main
  text. Main text. Main text. Main text. Main text. Main
  text. Main text. Main text. Main text. Main text. Main
  text. Main text. Main text. Main text. Main text.</p>
</div>

Now, it's true that these class names lack any semantic value, and they are in some ways a new-fangled technique for doing tables—which, as all of us know, are a terrible non-CSS way to do layout. But, the advantages are huge. I know that these classes have made it far easier for me to experiment with layouts, moving text to different places on the page, and understanding what will happen to the rest of the items on my page when I do so.

Now, Bootstrap provides a number of classes that are not meant to be used on their own, but rather in conjunction with other classes. For example, you always can have a title that uses the h1 tag, but perhaps you really want the h1 to stick out on your home page. To do that, just add the "hero-unit" class to your h1's list of classes. The fact that each tag may contain any number of classes makes it trivially easy to add and remove design styles from Bootstrap and to experiment with what different ones will look like.

Now, it's true that h1, h2 and their friends get styled nicely by default when you use Bootstrap, setting not only the font size and boldface but also the line height. But, you can make them even snazzier than the defaults, by (you guessed it) using some of Bootstrap's classes. If your h1 is the page header, you can enclose it in a div whose class is "page-header".

Non-headlined text can enjoy some treats too. If you want some text, such as a glossary definition, to appear when the user's mouse cursor hovers over it, just wrap the text in an "abbr" tag:


<abbr title="GNU'S Not Unix!">GNU</abbr>

Text with such an abbr tag has a light underline beneath it, which allows users to identify such text more easily.

Tables get some fancy styling as well. By using the table-striped class, you automatically can have alternate rows contain a light background color to distinguish them.

Forms

Bootstrap also has strong support for HTML forms. Like all other block-level elements, the "form" tag can take a "spanN" class, indicating its width. But the form itself will look much spiffier than would be the case without Bootstrap. Text fields are sized appropriately and get a nice shadow when they receive the input focus. Submit buttons have nicely rounded corners, and the mouse cursor changes to a pointer when hovering over them.

But wait, it gets better. Let's say you want your submit button to be a bit larger than usual. Well, just add the "btn-large" class to the "input" tag, and you'll have a larger button. You also can use btn-small or btn-mini for buttons of other sizes.

You also can colorize your buttons by setting additional classes. The "btn-primary" class will use Bootstrap's primary color (blue, by default). But, instead you can use "btn-danger" (for red), "btn-warning" (for yellow) and a host of other colors. In this way, Bootstrap is using CSS classes semantically. I find it very useful to be able to think in terms of what the buttons are for, rather than what color they contain. The levels and colors are consistent across Bootstrap as well. If you put text within a span or div with both the "label" and "label-warning" classes, or the "badge" and "badge-warning" classes, the text will be highlighted with the warning color. You also can have button groups, labeling of check boxes and radio buttons (so people can click on the text, not just the widget), and many other features.

______________________

Reuven M. Lerner, Linux Journal Senior Columnist, a longtime Web developer, consultant and trainer, is completing his PhD in learning sciences at Northwestern University.

Comments

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Bootstrap

RonTrex's picture

Bootstrap is awesome. I've been using it for various projects but my favorite by far is to create mobile websites with Bootstraps fluid design. In fact, Bootstrap has been gaining quite the popularity recently and there's even a website for all sorts of bootstrap resources. What makes me love bootstrap is it's simplicity. You only have to specify a few classes to get the website looking the way you like it, the rest is already done for you.

Ron @ http://www.bluepelicanloans.com/

Everybody got lazy!

Robson's picture

Twitter Bootstrap is a wonderful tool and it help developing sites really faster.
The problem of Bootstrap is that it seems to have made everybody lazy: I'm really tired of seing sites with the same look over and over.
To try to solve this issue, I made a themer for it: http://bootswatcher.com.
I hope it helps to get back people's creativity...

Not just for CSS challenged

Scott Keller's picture

Bootstrap is great even for those who aren't CSS challenged. Every good web developer uses some predefined CSS to set sane base fonts, even out browser inconsistencies and provide necessary utility classes (like clearfix).

Bootstrap not only provides this but using less, you can set some variables and customize the look and feel quickly and easily so your page doesn't look exactly like every other Bootstrap page ever created.

I wish they'd convert their icons to a web font (see Font Awesome for a great implementation of this). I also wish it was a little friendlier with jQuery UI (I want Bootstrap look & feel buttons with jquery's .button() function to provide better functionality).

minor nits...

Michael J. Ryan's picture

should be explicit; npm -g install less

less prefers to go into a global install, but for demo purposes, as this blog, it's best to specify... also, in windows "global" is per user, not per system.

There are also server plugins that will do less compilation (and caching of compiled files for you). And they are available for a number of frameworks as well (if you're using RoR, Express, IIS, Apache, etc..) I've gotten it plugged into a couple of web projects with Visual Studio, as well as in deployment scripts.

It's a really nice starting point for new web projects, and imho a lot cleaner than using say jQuery Mobile or jQuery UI for an application base... There is definitely not a kitchen sink approach with makes it flexible... Here's a site that I've been working on using it recently.

White Paper
Linux Management with Red Hat Satellite: Measuring Business Impact and ROI

Linux has become a key foundation for supporting today's rapidly growing IT environments. Linux is being used to deploy business applications and databases, trading on its reputation as a low-cost operating environment. For many IT organizations, Linux is a mainstay for deploying Web servers and has evolved from handling basic file, print, and utility workloads to running mission-critical applications and databases, physically, virtually, and in the cloud. As Linux grows in importance in terms of value to the business, managing Linux environments to high standards of service quality — availability, security, and performance — becomes an essential requirement for business success.

Learn More

Sponsored by Red Hat

White Paper
Private PaaS for the Agile Enterprise

If you already use virtualized infrastructure, you are well on your way to leveraging the power of the cloud. Virtualization offers the promise of limitless resources, but how do you manage that scalability when your DevOps team doesn’t scale? In today’s hypercompetitive markets, fast results can make a difference between leading the pack vs. obsolescence. Organizations need more benefits from cloud computing than just raw resources. They need agility, flexibility, convenience, ROI, and control.

Stackato private Platform-as-a-Service technology from ActiveState extends your private cloud infrastructure by creating a private PaaS to provide on-demand availability, flexibility, control, and ultimately, faster time-to-market for your enterprise.

Learn More

Sponsored by ActiveState