Twitter Bootstrap 101: Introduction
Tutorial Details
- Topic: Twitter Bootstrap
- Difficulty: Basix
- Screencast duration: 19 mins
- Twitter Bootstrap 101: Introduction
- Twitter Bootstrap 101: The Grid
- Twitter Bootstrap 101: Introducing 2.0
- Twitter Bootstrap 101: The Navbar
- Twitter Bootstrap 101: Tabs and Pills
Twitter’s Bootstrap is an excellent set of carefully crafted user interface elements, layouts, and javascript tools, freely available to use in your next web design project. This video series aims to introduce you to Bootstrap; taking you all the way from downloading the resources, to building a complete Bootstrap-based website.
When Mark Otto (@mdo) and Jacob Thornton (@fat) released Twitter Bootstrap to the world in August 2011, their announcement explained what its value would be: empowering front-end developers to kickstart projects more efficiently and effectively.
The Bootstrap stylesheet provides an easy-to-implement 960 grid for efficient layout, as well as expertly crafted styles for typography, navigation, tables, forms, buttons, and more. To take care of everyday JavaScript touches, Bootstrap provides a well built set of jQuery plugins for drop-down menus, tabs, modal boxes, tooltips, alert messages, and more.
Together, these interface elements provide all the trappings of a standards compliant, user-friendly, professionally built HTML5 website, right out of the box. As @mdo put it in the original post:
Bootstrap is a very simple way to promote quick, clean and highly usable applications … providing a clean and uniform solution to the most common, everyday interface tasks developers come across.
And yet none of it gets in the way of further customization. Again, in the words of @mdo, while Twitter Bootstrap "is very extensive," it nevertheless remains "flexible enough to work for many unique design needs." Thus,
You can use Bootstrap to throw together quick prototypes or guide the execution of more sophisticated designs and larger engineering efforts.
The liberal licensing terms, under the Apache 2.0 license, provide a great deal of creative freedom. So long as you give the good folks at Twitter due credit for their work, you’re free to take, tweak, and customize everything to your heart’s content, then turn around and launch the resultant site for yourself or for a client, for free or for profit. (For further reading, check out this discussion thread, where the folks at Twitter have explained how to remain in compliance with the license while customizing the code.)
Given the obvious value of what it offers and the liberal terms of its license, it’s no wonder so many developers have begun taking full advantage of it. The Tumblr site, "Built with Bootstrap", has documented a number of Bootstrap-built sites, including:
- CodeAcademy.com
- CodeCards.com
- Codesprint
- The Hub Cycle Shop
- Concerts in the Clearing
- And even MSNBC’s new site: BreakingNews.com
In all of these examples, you’ll note a clean grid and an interface that connotes professionalism. You’ll also note a good deal of variety in the details. And you may be struck by the fact that developers at respected outfits like Code Academy and MSNBC have opted to build with Bootstrap.
If you’re anything like me, you’ll be sorely tempted to check it out for yourself — and you should!
In fact, I’ve been checking it out recently. Let me show you around.
In the two brief videos below, I’ll introduce you to Twitter Bootstrap’s home base, walk you through downloading the code, after which we’ll crack it open and begin organizing things to prepare our own Bootstrap-built site.
Get the Code
- Go to Twitter Bootstrap’s Homepage
- Download Bootstrap v. 1.4.0 (used in this tutorial)
Video 1: Introduction
Steps covered in this video:
- Visit Bootstrap’s homepage of online documentation
- View some sites built with Bootstrap
- Download the code from Github
- Unzip it
Video 2: Unpack and Organize
Steps covered in this video:
We’ll do the following, but not precisely in this order:
- Organize the CSS
- Organize the JavaScript
- Get rid of unneeded files (saving LESS for another day)
- Keep the Apache 2.0 license file, as required by Twitter Bootstrap’s licensing terms
- Prepare to develop our own Bootstrap-built site
Next Steps?
In future tutorials, I’ll walk you through Bootstrap’s main features, and I’ll help you use Bootstrap to build your own custom repository of Bootstrap snippets. In so doing, we’ll get to know Bootstrap, gain experience using it and customizing it, and prepare ourselves to work with even greater efficiency on our future Bootstrap-built projects.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By David Cochran
Sign up now!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Webdesigntuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Kind of Basic intro
Yep, that’s exactly what it is :) The coming screencasts will continue by looking further into the various aspects of Bootstrap, taking novice users from the foundations all the way to building a functional website.
Great idea of starting frmo scratch, as it is my first experience with this new tool, I’m gonna learn alot from it. Looking forward to the next screencasts. :)
I like this tutorial, its simple but sweet. If anyone needs a PSD or fireworks template to play around with in there designs before jumping into the dev work feel free to download them free here: http://www.bentdesignstudio.com/v2/2012/03/twitter-bootstrap-2-photoshop-template-psd/
Thanks for your great work.
Pavel Zelezny
Czech Republic
thanks for tutorial. but i can’t see the video, because blip.tv is banned in Turkey.
Could you upload the video to another site, please.
Is it?! I hadn’t realised, sorry. Each video (as with all videos on Webdesigntuts+) has a download link underneath the controls – that should help.
@Ian The download link is also from blip.tv :P
@Sitki Bagdat You can try to subscribe to the iTunes http://itunes.apple.com/podcast/webdesigntuts/id450451641
Wow, do I feel stupid…! That’s a good point, from now on I’ll use our own hosted copies as the download alternative.
@Sitki Bagdat – download at will!
You may give both links blip.tv and our own host, it saves some GB if they download from blip.tv :D
thanks for your kind answer :)
Actually, had never heard about this until now, so you’re a good advertiser for them; and, am looking forward to seeing more on the topic.
One suggestion, if you won’t be offended, could you back up from the mike a bit? The sound is good, but all the “wet” sounds of your breath, swallowing and lips is a bit intense and distracting. I know it’s intensified by my using headphones in this cubicle; but, it’s still there on speakers too.
Otherwise, a well thought out tut.
dj — Thanks for the compliment — and the suggestion. I’ll back the microphone off a bit. Sorry ’bout that! :)
David,
Thanks very much for the intro.
I’ve had the Twitter Bootstrap page open in my browser for the past few weeks with the intention of downloading and getting to grips with it so the timing of this couldn’t be better. I look forward to digging into it further with you.
Thanks again.
This is a really nice intro David. Thanks for putting it together. Looking forward to future Bootstrap’s main features videos.
thanks again.
Good start, looking forward to more… especially the efficient ways to customize the css to match our projects.
I really, really hate to say this but, I have learned more about building a website from these 25 minutes of tutorial than I have learned from hours and hours of other tutorials about building websites. When will the next lesson be out? I can not say thank you enough sir.
Please do a detailed one on the grid system.I mean building a costume one.
I think they are the highlighted feature in bootstrap.
I think it can be combined with less..
Never getting into my head though tried and failed…:(
Thanks for this looking forward to the next tutorial. When I first looked at the Bootstrap site I was a little confused until I saw your intro tutorial!
I use it in my WordPress theme currently on sale at ThemeForest:
http://themeforest.net/item/ux-user-first/1210346
Thanks David, this is a great primer for the novice developer. I’m very excited to see the next few videos.
Very useful! I was wondering how to customise the default download to allow me to work out site, helped immensely.
Love the videos, very informative stuff, however, are you eating a boiled sweet?
Very useful tutorial you made there :D, cant wait for the 2.0 parts/next parts
Great info! Can’t wait to see what is next! Thanks
I have just used Bootstrap on a project and I’ll just make three quick observations ::
- It *is* very cool. Lots of little components that add bling with little effort. Very slick “out of the box”.
- It can be a pain in the butt if you try to do something a little different and suddenly have to track down all these weird CSS rules that are getting applied to your elements. I tried to attach a Shadowbox implementation to the stock Bootstrap “media grid”. Headache!
- I worry about a whole slew of very “Bootstrappy” looking sites and apps coming out now.
There is a new version of the Bootstrap v2.0
Great info, I also love bootstrap. I recently found a pretty awesome bootstrap wordpress theme and have converted my quotes website to bootstrap. I am really liking it.
Hi all, just an update. I’m currently working through the great new features of version 2.0 and hope to start producing next tuts soon, most likely to include a walk through the process of upgrading from 1.4 to 2.0. Meanwhile, I’ll try to watch comments here, so feel free to ask questions or post recommendations. All the best.
Thanks for this introduction to Twitter Bootstrap ! I’ll use it for my next development.
*Posted this on your other Bootstrap course (can’t help but love sharing free resources).
These are both awesome courses. :) I love your simply step by step approach :)
Designers and developers who love CSS but want to drag/drop mockups may also be interested in the Free templates Keynotopia just released as resource to the Bootstrap community.
They can be downloaded here: http://keynotopia.com/bootstrap/
Caroline
caroline@keynotopia.com
Keynotopia – templates for creating interactive wireframes/prototypes w/o writing code.
First video was good one, what was second video for btw? You don’t need to tell a web developer how to download a file from github and then how to fix css and js file paths?
@asif… please don’t think that he is writing only to you. There are lots more readers with way more varied backgrounds than only experienced web developers. He’s doing a well thought out job of preparing readers to be on the same page and shouldn’t offend anyone who already knows info contained in a paragraph or two. Either consider it a “refresher” or skip it; but, don’t feel the necessity to be critical. Frankly, more of Nettuts authors should be so organized in their organizational approach!
Hi Asif and dj —
Yes, this is very much a 101 course, by design! Very 101, I would add, and thus some of the details I cover are more than what some need or want. But we’re finding that a good number of our readers are appreciating it.
How long before the next tutorial?
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.
Great intro to Twitter Bootstrap. It’s such a beautiful and powerful framework.
I have followed the Twitter Bootstrap 101 and I can admit it’s really helpful. I have ended up crafting my first site (actually a commercial template) and can be found at http://wrapbootstrap.com/theme/acacia-WB001U10E
Guys, look at http://openlastminute.it
It’s a Twitter Bootstrap website with a masonry layout.
It’s powered by rails 3.2.