Blog

Web Design and Development with Twitter Bootstrap
Apr 27, 2012
Author: David Hayden
Web Design and Development with Twitter Bootstrap

Twitter Bootstrap 2.0.3 was just released with a number of bug fixes and ehancements. I use Twitter Bootstrap as a Default Orchard Theme for Orchard CMS and wanted to mention it here in case you are a web designer or web developer who has not heard of it. Twitter Bootstrap is a free website template from Twitter designed to kickstart development of web applications and websites. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, etc. as well as a number of jQuery Plugins.

Free Website Template

Twitter Bootstrap is absolutely free and available for download on GitHub. You can see numerous examples on the documentation website.

A few things to point out that make Twitter Bootstrap a joy to develop web applications and websites:

  • Based on HTML5
  • Responsive Grid Layout that looks good on smartphones, tablets, and desktop PC's.
  • Extremely rich typography that includes tables, forms, buttons, navigation, code, blockquotes, etc.
  • Numerous jQuery Plugins, including modals, tooltips, dropdowns, popovers, alert messages, tabs, buttons, carousel, etc.

If you are looking for a free website template to build a web application or website, you will definitely want to look at Twitter Bootstrap.

Orchard CMS Twitter Bootstrap Theme

If you are developing websites using a popular CMS like Orchard, Umbraco, Drupal, Joomla or other content management system, Twitter Bootstrap is a great starter theme. As mentioned earlier, I use Twitter Bootstrap as my base Orchard Theme and include a neat little style switcher that allows my clients to swtich to various styles of Twitter Bootstrap.

Therefore, you use the base CSS, scaffolding, typography, and JavaScript Components in Twitter Bootstrap, but change the style to get a whole new variation of colors and fonts.

Free Website Template - Twitter Bootstrap

Responsive Web Design with Media Queries

Worth mentioning again is the support for a responsive web design using media queries and utility classes that allows your website and web application to support smartphones, tablets, and desktops.

Twitter Bootstrap includes an option bootstrap-responsive.css file that includes the default media queries and utility classes, but you can of course modify it to your liking.

// Landscape phones and down
@media (max-width: 480px) { ... }
 
// Landscape phone to portrait tablet
@media (max-width: 767px) { ... }
 
// Portrait tablet to landscape and desktop
@media (min-width: 768px) and (max-width: 979px) { ... }
 
// Large desktop
@media (min-width: 1200px) { ... }

Utility classes, which should be used sparingly, allow you to specify which elements should be visible or hidden based on the device type:

  • .visible-phone
  • .visible-tablet
  • .visible-desktop
  • .hidden-phone
  • .hidden-tablet
  • .hidden-desktop

Conclusion

There are a lot of free website templates that you can use to kickstart your web design and development. Twitter Bootstrap is fairly complete in what it offers so you may want to think about using it for your next website or web application.

Orchard CMS Developer

David Hayden is an Orchard Web Developer in Sarasota Florida specializing in web design and development using Orchard CMS. He develops Orchard Themes, Orchard Modules, and Orchard Websites.

Written by David Hayden, Apr 27, 2012