Advertisement
HTML/CSS

Twitter Bootstrap 101: Introducing 2.0

by

Twitter Bootstrap's version 2.0 has added some fantastic new features to an already very strong front-end development framework. If you're new to Twitter Bootstrap, you'll want to check it out. And if you've been using Bootstrap, you may appreciate the chance to walk through some of its key features together. So let's get started!

Today we'll begin with the basics:

  • Downloading the files, including the new option to customize your download.
  • Setting up a template markup file.
  • Working with Bootstrap 2.0's new 12-column grid.
  • Leveraging the new option to make your layout fully responsive - ready for multiple screen sizes.

The Screencast

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes!


Links and Downloads

This will get you rolling with the essential tools to make use of the rest of what Twitter Bootstrap has to offer. In future tutorials, we'll keep rolling from there!

Related Posts
  • Web Design
    eCommerce
    E-commerce for Mobile: Making the Most of Your SiteMobile thumb
    In this article we’re going to address some mobile e-commerce hurdles. I'll break down a few of the most important steps to take account of in preparing an e-commerce site for mobile access and offer you some advice based on my experience.Read More…
  • Web Design
    HTML/CSS
    Why I Choose Stylus (And You Should Too)Stylus thumb
    The world of front end web development has been steadily increasing its uptake of what we call "CSS Preprocessors", which extend the functionality of regular CSS. Arguably the two most well known, with the greatest user base, are LESS and Sass/SCSS. However there is a third preprocessor that hasn't received quite as much attention, and that's Stylus.Read More…
  • Web Design
    UX
    Walk Users Through Your Website With Bootstrap TourTour retina
    When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order. Creating a walkthrough directly on top of the interface makes things very clear, so that's what we're going to build, using Bootstrap Tour.Read More…
  • Code
    PHP
    Authentication With Laravel 4Laravel 4 auth retina preview
    Authentication is required for virtually any type of web application. In this tutorial, I'd like to show you how you can go about creating a small authentication application using Laravel 4. We'll start from the very beginning by creating our Laravel app using composer, creating the database, loading in the Twitter Bootstrap, creating a main layout, registering users, logging in and out, and protecting routes using filters. We've got a lot of code to cover, so let's get started!Read More…
  • Business
    Entrepreneurship
    An Introduction to Bootstrapping Your Online Business1 bootstrapping into
    Over the past several years a new economy has risen out of the remains of the dot-com bubble. Between that bubble bursting and the later uncertainty provoked by the Great Recession (that's right, it has a name), we've had to reevaluate how business works. Things are different now. Venture capitalism is no longer en vogue. The age of the bootstrapper has risen. The publication of books such as The Lean Startup, The $100 Startup and Rework serve to demonstrate how entrepreneurs' attitudes have shifted. The new mantra demands that you throw out the eighty-page business plans (they'll only weigh you down) and reject the search for big backers (you don't need their money). More than ever before, today's entrepreneurs embrace a philosophy that rejects reliance on outside funding and instead focuses on individual initiative and the freedom to succeed. In this post — the first in a series of three — we look at the concept of bootstrapping in the context of online business and learn why it is so effective.Read More…
  • Web Design
    Workflow
    Twitter Bootstrap 101: Tabs and PillsBootstrap preview
    Twitter Bootstrap 2.0 makes it easy to set up tabs, enabling your users to quickly switch between panes of content. On top of an excellent JavaScript plugin, the framework provides a number of options for style and layout which are well built and easy to implement. In the following two short videos, I'll give you a brief introduction.Read More…