Twitter Bootstrap 101: Introducing 2.0
basixvideos

Twitter Bootstrap 101: Introducing 2.0

on Mar 5th 2012 with 40 comments
Tutorial Details
  • Topic: Twitter Bootstrap
  • Difficulty: Beginner
  • Screencast duration: 17 mins
Download Source Files
This entry is part 3 of 8 in the series Twitter Bootstrap 101

Twitter Bootstrap 101

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!

Series Navigation<< Twitter Bootstrap 101: The GridTwitter Bootstrap 101: The Navbar >>

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

David Cochran is Associate Professor of Communication at Oklahoma Wesleyan University. He and his students have designed and manage a number of websites, including DeclaringAmerica.com, OKWUeagle.com, and aLittleCode.com.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Alexander Rohmann

    Good information in this video. But it’s really long. You don’t really get into using anything new until ten and a half minutes into the video. And it you take a long time just to get the files ready which anyone who would actually be using this would probably know how to do…

    • guido

      oh rearry. This guy is really taking his time to explain it all. so what if its long. good for noobs. I can dig it man. good video. stop hating.
      thanks for the vid david!

      • http://www.thinkstewart.com Jami

        haha exactly! :)

    • villimagg

      In the old days of VHS we used to do something called “fast-forward” to skip things that were boring. Maybe you’ve heard of this concept?

  • http://illution.dk Frederik Lassen

    Nice to see that Bootstrap 2.0 is warmly welcomed. Will there be a whole series about that? I would love it!

    Keep up the good work.

  • @sheixt

    Currently re-designing my site using Bootstrap 2.0…. can’t recomend it highly enough. Like most things there’s a small learning curve but once you’ve got a firm hold of the reins it’s daaaaamn powerful!!

    • Jorge

      I agree with @sheixt.
      Currently re-designing my site using Bootstrap 2.0…. can’t recomend it highly enough.

      This tutorial is so boring. I doesn’t know how to skin or do theming with the Bootstrap framework.

  • erminio ottone

    Can we start from scratch whit previous tuts (part1 & 2) using bootstrap v2?

  • supprof

    thank you very mutch body

  • supprof

    see you next time soon
    very good tutorial

  • Jim

    Great videos and series! I so look forward to the upcoming videos. Alexander’s comment is completely inaccurate as I’m a beginner and am using bootstrap as it makes it much easier than coding all of the css myself, so the detail is MUCH appreciated. Keep up the great work!

  • dj

    Actually… Alexander’s comment is spot on, except perhaps a bit understated. This could use A LOT of improvement in organization and a “part three” in a series should never cater, in anything except cursory overview, to people too lazy to do their own “catchup” using tons of material readily available on this same site.

  • Pingback: Twitter Bootstrap 101: Introducing 2.0 | Shadowtek | Hosting and Design Solutions

  • Ross

    Thank you for this Excellent Tutorial. It is necessary to show what can be downloaded and where for the full picture and everything covered so far is exactly what I wanted to know for starters, Thanks again

  • http://alittlecode.com David Cochran
    Author

    Hi Alexander and dj,

    Admittedly, I’m making a serious effort to reach folks who:
    (a) are new to Twitter Bootstrap, and/or
    (b) may not have yet worked their way through the documentation, and/or
    (c) may be relatively new web developers and appreciate covering the basic things.

    I’ll do my best in future posts to bridge between these and
    (d) experienced developers who like to move faster.

    Tough gap to bridge … but I’ll try!

    • Tom

      I don’t really think you should try both. This series should be about bootstrap and the features of bootstrap. Not an introduction for people starting in the webdev world. They have tons of other tutorials on this site.
      I was getting a bit frutstrated when you started explaining the paths to css files _again_ and “here you can change the title of your page” so I started clicking through the video.

    • Joakim

      As a new developer who had not heard of bootstrap until today, I have to say you did what you aimed to do very nicely. Good job!

    • Abendit

      In college a 101 class was introductory so even though it
      may be boring to some just think, less homework and less studying. LOL So just bear with it and sit back or skip ahead.

      Good job David on Bootstrap 101!

  • Thomas Bush

    David,

    Just a thought while viewing the tutorial and comments. You seem to have two very distinct audiences – beginners and more advanced users. Maybe theres an opportunity to break this into two groups of tuts.

    TBS101 for beginners that’s slow paced, basic download, install, set features.

    TBS Pro where you dive into the deeper topics I myself would love to see more rails/less or sass types of tutorials.

    I think theres plenty of info to warrant the two tut sets and that way you will have a much easier time catering to your audience. The way this currently functions I think u are going to be right on the money with about half the crowd and frustrating the other half.

  • Pingback: Creative Fuel #1: Gridset, Status Board PSD, AP Rebrand & More | Fuel Your Creativity

  • http://transfersexpress.com.br Richard Feliciano

    bootstrap is fantastic to admin areas

    • Codename: Steeve Knight

      Yep – that’s where I’m taking it.

  • Mary Ann

    Great tutorial, David, thank you. I, too, appreciate the return to basics for Twitter 2.0 and I wish the tutorial was longer! Don’t want to rush you or anything, but please hurry with the navigation and jQuery segments – can’t wait!

  • Pingback: ISMA205 Web Essentials – Twitter’s Bootstrap Framework

  • andrew

    great! thank youuuuuuuuu, please more and more about use media queries! in a tutorial

  • Anil Sampth

    David excellent tutorial, but I think what is missing is information as to how to skin or do theming with the Bootstrap framework. Will you do a tutorial on this?

  • http://www.eddiechungdesign.com Eddie Chung

    Thank you for the tutorial !!! Great stuff.

  • miteybig

    David.
    Thank you for the 2.0 tutorial. Speaking for myself (which is all I’m capable of doing with any degree of precision), the tempo is perfect. Don’t change a thing.

  • Cookie Rojas

    When is the next video coming out?

  • Bharat Ruparel

    This series is incredibly useful to me. Please keep the tutorials coming at a fast face.
    Thanks.
    Bharat

  • http://www.raghavd.com raghav

    Nice tutorial

    It will very helpful if you have done in part by part working with all other option using the frame work.

    Thanks
    Raghav

  • amalita

    thxxxxxxxx alot ..series is useful .. i need more taturial to bootstrap v 2.0 …example of make more advanced sites not basics one

  • jonschlinkert

    Great series! any chance you could do a tutorial on how to work with the makefile in bootstrap? that and mustache.js!

  • Pingback: Creative Fuel #1: Gridset, Status Board PSD, AP Rebrand & More | My Creative Directory

  • Jick Lee

    The video is what im looking for. Nice job! THanks mate!

  • phil

    Hi i was trying to put the twitter bootstrap jquery plugin slider instead of the hero unit. The slider jquery carousel banner is working but it doenst resize correctly or responsively and it doesnt centrally align even though its in the main container and in span12 tags. Anyway i can fix the carousel so it centrally aligns and resizes responsively. I tried using flexlider but it doenst show up at all.

    Other question is if bootstrap2 is a 12 grid framework why are there span tags that go upto span24.

    thanks for any assistance

  • mahree

    it is nice to have this tutorial but you have to upload the other part of this video maybe . . . the part 2, since it is the part 1 . . . keep it up!

  • http://roughlyrefined.com Brad

    I found your tut to hit the spot. Including some ready-made code helped it skip along without missing good explanations etc.

    but…

    It left me hanging. When’s the next one?

  • Zoran

    The tool itself is so useful but the tutorials are not really giving to anybody that have been working with html and css. I think the author took the easy way by (and in a sense more messy aproach) modifying a html file instead of building from the ground up and explaining why and how to think. I think it would been beneficial to all to get the thinking behind of building a grid and responsive design. Thats really whats its about how to think when building a structure and that really what this tutorial needed. This is a great tutorial for copy pasters.

    Hard words maybe but i love a lot of stuff from this site and this is actually one of my first comments ever here. So this topic with bootstrap and grid and responsive design need to get a new tutorial.

    To the author no offense man. Its nothing personal i really appreciate your time, and based on the comments a lot of people appreciated it.

    • Whatever

      I’m so late but this is so true…

    • Ghost Rider

      I think that’s is not true. What he did pretty much explain everything and the concept can be applied to a project starting from zero.

  • Pingback: Delicious Bookmarks for July 15th from 08:39 to 09:37 « Lâmôlabs

  • http://www.automotive-management-services.com Lyka Hayes

    NIce ARTICLE about the responsive design, im starting doing it to my websites coz now the mobile technology arise and more people using mobile now then and it has benefits like SEO and many more

  • Sally

    I am new to Boostrap and really appreciate these tutorials! I think you did a good job with pace and level of detail. Some parts did seem a bit slow to me, but I could understand how the slow pace could be very useful to webdev beginners. Thanks again!

  • Tony

    Thanks for these. I was considering Foundation for a few clients but after checking out these, I think I’ll go with bootstrap.

  • Pingback: Bootstrap | Bassu

  • Pingback: All about Twitter Bootstrap | Jayesh Chandrapal