Try Tuts+ Premium, Get Cash Back!
Twitter Bootstrap 101: The Grid
basixvideos

Twitter Bootstrap 101: The Grid

on Jan 17th 2012 with 65 comments
Tutorial Details
  • Topic: Twitter Bootstrap
  • Difficulty: Basix
  • Screencast duration: 36 mins
Download Source Files
Demo View It Online
This entry is part 2 of 8 in the series Twitter Bootstrap 101

Twitter Bootstrap 101

Today, let’s look at the grid system that comes with Twitter Bootstrap and we’ll take a look at their media grid while we’re doing so. In the process we’ll build ourselves a nice little mockup for a portfolio page.

Note: The grid we’re working with today comes with the Bootstrap release current at the time of publication: 1.4.0.

Get the Code

  • We’ll start with these files, based on where we ended with Part 1 of this series.

Video 3: Bootstrap’s Grid System

Let me introduce you to Bootstrap’s grid, which is based on the 960 grid system. I’ll encourage you to learn by playing around with the grid, using the hero.html file.

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

Topics Mentioned

Video 4: Laying out a Portfolio Page

Now let’s create our own custom portfolio page. We’ll embed two YouTube videos and arrange them in an alternating pattern using the grid system. As we do so, I’ll share how to calculate appropriate widths for fitting media within the grid.

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

Video 5: Now for a Media Grid

Let’s continue developing our portfolio page. We’ll use the class media-grid to setup two rows of thumbnail images. And I’ll introduce you to the very helpful placehold-image site: Placehold.it.

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

Video 6: Time for Some Custom CSS

With our content in place, we’re ready to add some of our own custom styles. Let’s link up our own stylesheet, importing Bootstrap’s styles and adding our own. This step will have you ready to be off and running, ready to create your own beautifully customized Bootstrap-built site.

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

Next Steps?

Exciting things are going on in the development community which has taken shape around the project. In a few weeks (at last report), Twitter Bootstrap 2.0 will be released to the world, and it will include some exciting new touches, including a responsive grid. That’s certainly something to look out for.

Meanwhile, we’ll prepare ourselves by becoming fully familiar with the current best that Bootstrap has to offer.

Series Navigation<< Twitter Bootstrap 101: IntroductionTwitter Bootstrap 101: Introducing 2.0 >>

 
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
  • pelumini

    Thanks Dave. I’ve been waiting for this.

    • http://www.bentdesignstudio.com Ben Peck

      If anyone here wishes that there was a PSD of the Twitter Bootstrap 2.0 toolset I’ve started one. Hopefully designers will find it useful. I’ll be improving it and trying to keep up with the geniuses over at twitter.

      http://www.bentdesignstudio.com/v2/2012/03/twitter-bootstrap-2-photoshop-template-psd/

      • http://webbuilderstudio.com Raza

        Thank you Ben, your PSD helped a lot to develop my theme.

      • Sam Coult

        You, my friend, are a total G.
        This will be so incredibly useful.

  • Gavin

    Will the release of bootstrap 2.0 have an effect on sites already hot linking to bootstrap? or will it be in different repositories? Anyone know?

    • http://alittlecode.com David Cochran
      Author

      Gavin,
      Your question is important, because there are going to be a number of fundamental changes in version 2.0, which means what you build with 1.4 you should probably plan to stick with 1.4!

      Nice thing about the hotlink they provide in their docs (at http://twitter.github.com/bootstrap/ ) is that it’s a versioned URL, like this one which is current at the moment:

    • http://alittlecode.com David Cochran
      Author

      Oops — here’s what their hotlink to the github hosted css file looks like. You can see the versioning in the URL:

      <link rel=”stylesheet” href=”http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css”>

      • Gavin

        Thanks, we are using bootstrap in our app development. Looking forward to what it brings in the next version.

  • qborreda

    While it seems to be really simple to prototype with Bootstrap,
    video 1 and 2 are the same, and video 5 and 6 are the same too ..

    Interesting anyway ..

    • qborreda

      I meant, 3 & 4 .. but I think it’s corrected now ..

  • Pingback: Twitter Bootstrap 101: The Grid | Shadowtek | Hosting and Design Solutions

  • http://maomuffy.blogspot.com Mfawa Alfred Onen

    Happy new year! I have been expecting this…

  • Jesus

    the video flash of youtube is over html topbar..

  • jubi

    good work :)

  • http://www.dhaneshtk.com dini

    Thanks man!!! much awaited…

  • http://alittlecode.com David Cochran
    Author

    Hi all — Glad you’re finding these useful. Thanks for the feedback.

  • Mecha

    Keep them coming. I am getting so much out of your instruction. I think other web site building tuts miss the mark by not showing how to build on a framework like Bootstrap. I appreciate your thoroughness. Thanks.

  • http://paintndesign.com philip

    thanks for the post, will definitely try out this framework, could you make some more to explain the other stuff like nav bars tables alerts and jquery. coz your vids are really helpful for us beginners. thanks man

  • http://builtwithbootstrap.com/ Simon Hamp

    Another great tutorial. Nice to see Bootstrap getting such continued support. Don’t forget folks, if you build anything with it, make a submission over at http://builtwithbootstrap.com/submit :)

  • http://whyteboard.org Steven Sproat

    These are great! Thanks a bunch, very clear, informative and helpful. Bootstrap seems great.

  • Enrique

    [OFFTOPIC] is just me or webdesigntuts doesn’t work in IE9 ? I’ve installed it recently and this is how it looks in IE9: http://i.imgur.com/lJF0R.jpg
    Even more strange is that if I change to Internet Explorer 8 from the developer tools nothing changes. Maybe my IE9 is corrupt I don’t know…
    Does somebody has the same problem?

  • Siddharth

    Hi

    I am not able to find media-grid class in bootstrap 2.0
    Can anyone please help me finding it or any other alternative for that?

    Thanks
    Sid

  • http://www.ahoban.com Sumon @ WP Cypher

    Twitter Bootstrap 2.0 is here. We would love to have a tutorial on it as it has many new things like responsive layout and some jQuery plug-ins.

  • Andrew

    The videos are informative, but your presentation style needs worked on.

    I am skipping through and literally yelling at the screen during some of your videos, “Ok, ok, ok, GET ON WITH IT”.

  • Paula

    HI

    Just wanted to say thanks for the Bootstrap tutorials. Very clear and I’m really enjoying using and learning this framework. Been struggling with navigation though. I’ve been trying to change the size and background colour but can’t work out the CSS, I’m still quite new to it. Could you let me know when your next tutorial is?

    Just the right speed for me….some developers speak too quickly and just expect everyone to know everything. I’ve been doing some other tutorials on another framework and let me tell you, you are king compared to them….at least you don’t um too much or sniff…:)

  • Bart

    Thanks so much for this tutorial! I am completely new to web development and the speed of your tutorial is just perfect for me :) I had to change some small things to make it work with bootstrap 2.0, but it wasn’t that much different. It would be great if you could add more tutorials about the other abilities of bootstrap :)

    Siddharth: the media-grid class is now the thumbnails class. Check the bootstrap website -> Components -> Thumbnails for more info

  • http://alittlecode.com David Cochran
    Author

    Hi all, thanks for the comments and friendly prods. I am currently kicking the tires on Bootstrap 2.0 — lots of nice new touches in there. (Kudos to the Bootstrap development team and contributors.) I hope to start producing next tuts soon, most likely to include a walk through the process of upgrading from Bootstrap 1.4 to 2.0. Meanwhile, feel free to post questions here and I’ll help answer as best as I can!

  • Jan

    I was wondering, following your tuts and try to apply them to v2.0, when I use the new thumbnail class, and I enter a total of px that exceeds the 960px (including the gutter, line and white-space), it scales the image. Any way to prevent this?

  • Bart

    I also have a question about v2.0. The hero page of v2.0 imports bootstrap-responsive.css as well. When this is included, Bootstrap increases the size of 940 pixels if your browser window is much larger. Is there any way to change the size of the youtube video depending on the total size of the grid?

  • Jim

    David,

    Wow…your tutorial on bootstrap could not have come at a better time! Very well done videos and don’t let any naysayers tell you otherwise. Any projected date for the 2.0 version tutorial to come out?

    Thanks for this wonderful introduction to twitter bootstrap and am looking forward to your guidance regarding 2.0.

    Jim

  • Jan

    Hey David, I found a small error in your video.

    When you try to import the bootstrap.css in your custom css-file, you use the whole path: “assets/css/bootstrap.css”. When I tried to do the same it wouldn’t import, because the file directory is relative to the other css-file, not to the html-folder. When I did @import url(bootstrap.css) it worked just fine.

    • Reez

      Hi Jan,

      I tried @import url(bootstrap.css) it still didn’t work. Any idea? Thanks, reez

  • Frances

    Hi – I’m working with 2.0 and following the tutorials. The media-grid class doesn’t seem to be there. Am I missing something?
    Thanks for these tutorials – as a complete beginner I’d have been really lost without them.

  • Frances

    Doh! Sorry – just seen this is answered above.

  • http://www.csshtml.co Gautam Lakum

    Great! I started using it in my project and, IT IS JUST AWESOME. Thanks to tutsplus for this lesson.

  • Adam

    Dave-

    I was wondering if you were going to have a video on upgrading from bootstrap 1.4 to 2.0. I think I’m a little lost on this. Your videos have saved me!!!!

  • http://www.marklybrand.com Mark

    Are you holding out to do more tuts on 2.0. I have enjoyed these and would appreciate seeing more. Thanks….

    • clark

      +1 for me! I would love to see some tutorials on using the fluid grid in bootstrap 2.0!

  • Dev.

    Very helpful. Can’t wait for updated segments. These videos brought me to this site, and I’ve found tons of useful stuff. Cheers.

  • Xenu

    I love watching people with hypnotically mellow voices move files around and update paths.

  • Rich

    Excellent tutorials, you have made it all very clear, thank you :)

  • Emerson

    How different is version 2?

  • http://limpidity.co.uk Keith D Mains

    I contacted Github’s Hosts (Rackspace) by instant online support a few weeks ago to ask about hot linking to a newer version of Bootstrap CSS as the older version was not being offered on Bootstrap any more and was told quite simply “No”

    As is I asked if it was OK to hotlink to Twitter Bootstrap’s CSS on Github and was simple told “No”
    That was the end of the conversation!

    I was going to ask how come this was so as people are still hot linking to the old CSS but as I said that was the end of the conversation and so I was just left with a “NO” and two days work I had done linking to it had to be taken offline.
    So is the Racksapce Support employee telling me lies over instant support or are people no longer allowed to hotlink newer versions of Twitter bootstrap CSS on Githiub?

    • http://alittlecode.com David Cochran
      Author

      Hi Keith,
      My guess is that with its rapidly growing popularity, allowing hotlinking to the file would result in an unfair and unwieldy bandwidth burden. I’ve never felt entirely comfortable with hotlinking anyway. Would much prefer to have all needed files available together with all of my site files. (I also provide a local fallback for jQuery.)

  • peter jones

    Hi David,

    much appreciated you taking the time to create this. Very helpful for a novice like myself.

    Quick question. I have two horizontal grids of 4 boxes each. How would I merge the two left and right boxes on the vertical. Creating two large boxes on the vertical with 4 boxes in the centre 2 on each horizontal plan?

    Any advise would be appreciated.

    All the best,

    Peter

    • http://alittlecode.com David Cochran
      Author

      Thanks Peter,
      Trying to make sure I get the picture.

      For wide viewports, you’re starting with:

      Row 1
      Col1 Col2 Col3 Col4

      Row 2
      Col1 Col2 Col3 Col4

      And for narrow viewports you’d like to make it adjust to:

      Row1
      (Col1+Col2) (Col3+Col4) — the columns in parentheses merge together into one?

      Is that right? Or am I missing it?

  • Pingback: آشنایی با Bootstrap،فریمورک سی اس اس

  • http://www.fruiapps.com James Anderson

    Here is one good tutorial, it starts with the basics and takes you to a level, where you can start doing things yourself. For a demo it helps you create a demo website. http://www.blog.fruiapps.com/2012/03/Creating-a-Portfolio-site-with-Twitter-Bootstrap I found it really helpful.

  • Dave

    This is great, but the layout really could use some cleaning up here… very hard to follow along with multiple videos posted on multiple pages… Maybe I’m an idiot, but I missed that there’s more than one video per section of the tutorial.

  • Jared

    Thank you David, these are really nice.
    Bootstrap is made for engineers who do not get design :)

  • http://www.agilewebsitedev.com Pali Madra

    Thank for the tutorial. Very helpful.

    You are using Mac when in the videos you posted. I wanted to know the software you use for writing the code (It seems like coda to me)? I really liked the nifty calculator you use which you bring up for calculating box sizes. Is that part of coda or another application?

    Thank you in advance.

    • http://dribbble.com/leroice Leigh

      Hey Pali,

      It’s an App called Alfred- you can find it on the APP Store.

  • annie

    thank you for this tut – really clear – the media grid video seems to be missing?

  • annie

    Recall previous comment re. missing media grid…just read previous discussions on this.

    Thanks again for great video tuts !

  • Guy

    Thank for the videos, David. May I suggest a little video editing to remove all the mechanics of editing and a new voice over for the result? Watching and listening to you find and replace text by hand isn’t productive for your audience.

    Your videos would be half the length.

  • Pingback: Delicious Bookmarks for July 18th through July 20th « Lâmôlabs

  • Yevgen

    Thank for the videos, David.

    But shouldn’t the video’s width on portfolio page be 620 px instead of 600 px?
    960/3*2-20 = 620

  • simranjitsingh

    hi David, thanx for this video, Its very usefull ,thanx a lot can u plzz make some tutorial video for boilerplate html5 like this tutorial

  • Reez

    Hi David,

    Awesome video! Just have a rudimentary question on linking other css files. I tried both @import url(assets/css/bootstrap.css); and @import url(bootstrap.css); but both didn’t work. Any suggestions?

    Thanks, reez

  • http://kronprojects.com/ Dan

    @Ben Peck – Thank you very much for the bootstrap PSD and @ David Cochran – Thank you for taking the time to make this excellent video series

  • Stan

    how come when I make 4 columns mine isn’t in line with the top 3 boxes, can I send you my code hero.html so you can look at it?

  • Gregg

    Hi David,

    Enjoyed this tutorial series.

    It looks like the media-grid information is missing from the v2 docs.

    What is the best practice in the new Bootstrap for adding media like video, as shown in this tutorial?

    thanks

    Gregg

  • http://www.liamcarey.com Liam

    I have been looking for a detailed TB tutorial series for a while now, so well done and thanks for pulling together – looking forward to the V2.0 videos in due course.

  • hello

    Looks like someone dont like using default bstrap naming conventions ^^

    http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html

  • http://twitter.com/fumingli fumingli

    Love the tutorial and design. Will adjust to my new website adapted to Ethan Marcotte’s responsive design. I hope to pull it together easily without the skipping of slides as in my earlier script. Thank you!

  • Desiree

    Thanks again, David. Excellent series! I’ll be looking forward to more of your informative tutorials.

  • Pingback: Twitter Bootstrap 101: The Grid | Webdesigntuts+ h… | Tim Fox

  • Pingback: focusweb | Le framework Twitter Bootstrap