5 Incredibly Useful Tools Built Into Twitter Bootstrap

by on 21st December 2011 with 26 Comments

screenshot

Bootstrap is an interesting framework or “toolkit” offered up to developers completely free of charge by none other than Twitter.com. According to Twitter, Bootstrap is “designed to kickstart development of webapps and sites.”

Today we’re going to jump into Bootstrap and take a quick look at some of the things that it has to offer. This should help you decide whether this is just another bloated framework or an incredibly useful tool that you should use to kickstart your next project.

What Can You Do With Bootstrap?

Bootstrap is sort of a Swiss Army Knife for developers. It’s simply loaded with tools and utilities, some of which you’ll find extremely useful, others you’ll never touch.

The real goal behind Bootstrap is to save you time. Twitter has done the heavy lifting for you by researching and implementing some of the best ways to perform various tasks. They’ve also taken several steps towards applying solid basic styles to various commonly used elements.

Should you take this as it is and turn your critical brain off during development? Absolutely not! You should dig in, find what you like and ditch or change what you don’t. Bootstrap is specifically built to handle customization in many cases so feel free to go nuts and make it your own.

Getting Started

If you want to implement some of the styles we’ll be working with on the fly, you can simply hotlink to the Bootstrap CSS file like so:


We’ll be going a step further and digging into some of the optional LESS files so it might also be helpful to just stop by GitHub and download the entire project.

Once you have all of that ready to go, it’s time to move on and see what this thing has to offer. I won’t be going through a step by step tutorial of every single feature in Bootstrap, it’s pretty huge and the documentation should have you covered. This will merely serve as a quick overview for some of the things that I find useful about Bootstrap and how you can quickly and easily take advantage of them in your own code.

Demo

screenshot

Click the link below to see Twitter Bootstrap in action. I built this sample page in only a few minutes utilizing the techniques that we’ll go over below.

Demo: Click here to launch the demo.

#1: A Prebuilt Grid

screenshot

The first thing that we should discuss is the grid. Every good framework has one and Bootstrap is no exception. You don’t have to use the grid to benefit from the wealth of styles offered up by Bootstrap but it is the key element to using this toolkit to perform rapid page layout with almost no effort.

By default, the grid is 940px wide with 16 columns. Each column is 40px with a gutter of 20px. Like 960.gs, Blueprint and others, this grid is a little div heavy and requires some markup that you may not love, but in the end it’s actually really easy to use and makes using Bootstrap a snap.

The grid works primarily on row and span classes. Rows are self-explanatory, when you want to start a new row, create a div and apply the “row” class. Everything for that row goes in that div, when it’s time for another row, close the old one and start a new one.

For each div within a row, you apply the “span#” class with “#” being the number of columns you want the div to span.

Grid Example

Let’s say we were mocking up a layout that used a large header image that covered the full width of the site above four columns of text. The markup for this is simple:

The styling for this will be completely automated. All you have to do is drop some content into the HTML above and you’ve got yourself a layout.

screenshot

Just like 960.gs, the Bootstrap grid also supports nesting and columns. You can even make the page fluid by throwing everything into a div with a “container-fluid” class, or simply use “container” for fixed width.

#2: LESS

screenshot

LESS, the increasingly famous CSS preprocessor, gets a big endorsement here from Twitter with a ton of built in support. They’ve really gone all out and created a lot of LESS mixins and variables for you to work with right out of the box.

Let’s take a quick look at just a few of the things that you can do with Bootstrap and LESS.

Customize the Grid

The Bootstrap grid is built using LESS mixins and CSS math so it’s easy to customize. Just change a couple of variables and everything is automatically updated. For instance, let’s say you wanted a twelve column grid instead of a sixteen column one, simply go into “variables.less”, find the grid variables and change the number of columns to twelve. It’s that easy.

// Modify the grid variables
@gridColumns:       12;
@gridColumnWidth:   40px;
@gridGutterWidth:   20px;

CSS3 Without the Hassle

Bootstrap makes it easy to use a few of your favorite CSS3 tricks without the pain of manually repeating yourself for every browser. You’ll find helpful mixins for implementing rounded corners, shadows and transitions.

// Border Radius
.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

// Drop shadows
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow;
     -moz-box-shadow: @shadow;
          box-shadow: @shadow;
}

// Transitions
.transition(@transition) {
     -webkit-transition: @transition;
        -moz-transition: @transition;
         -ms-transition: @transition;
          -o-transition: @transition;
             transition: @transition;
}

There are also resources for creating gradients and color schemes using the magic of LESS.

Clearfix

If you stick to the prebuilt grid, you shouldn’t have to manually set up and clear floats, but if you go your own way with layout the built-in clearfix mixin can save you a lot of hassle.

// Clearfix for clearing floats like a boss h5bp.com/q
.clearfix() {
  zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
    zoom: 1;
  }
  &:after {
    clear: both;
  }
}

To implement this, all you have to do is type “.clearfix()” in your .less file. The structure here mirrors the method used by Nicolas Gallagher.

#3: Navigation

screenshot

One of Bootstrap’s most convenient pieces is the awesome navigation toolkit provided, which you can use to implement several different types of complex navigation elements in seconds.

Main Navigation

For instance, there’s an awesome main navigation bar that looks sharp, allows for easy custom branding and even stays with you as your scroll (shown above on top). The markup seems unnecessarily heavy but it sure does make it easy to create a really slick menu (support for dropdowns included as well).

Tabs

You can also easily implement a tabbed navigation scheme. This markup looks much nicer and really couldn’t be any easier. Simply add the “tabs” class to an unordered list and you’re done!

Even More

Bootstrap doesn’t stop there. In it you’ll find similar constructs for creating breadcrumb navigation, pagination and more. Most of these are implemented just like tabs, with a simple class.

Remember that all of the default styling can be changed so even if you don’t necessarily like the style used, these tools are extremely helpful for getting the basic structure of your navigations up and running in no time.

#4: Galleries

screenshot

With Bootstrap, image galleries are fairly automated. As with tabs, they simply require an unordered list with a special class, in this case “media-grid”. With this applied, the gallery automatically performs the layout work taking into account the size of your images. That being said, Twitter recommends using sizes such as 90, 210, and 330, which work well with the layout.

Gallery images come pre-styled with borders, rounded corners, padding, hover styles; everything you need to get a grid of images in place and functioning. You can even mix image sizes and the grid will automatically handle the differences without breaking your page layout.

#5: JavaScript Goodness

screenshot

Thus far we’ve primarily discussed the HTML and CSS goodies packed into Bootstrap, but this toolkit goes well beyond style and structure and adds plenty of functionality benefits as well. You’ll find JavaScript libraries for implementing tooltips, modal windows alerts and more.

You’ll also need some JavaScript to bring some of the elements we’ve already seen to life. For instance, there are built in functions for making each tab load separate content and for handling the dropdown menu items.

By utilizing data attributes, you can even skip writing the JavaScript. Here’s a sample snippet that lets you implement a tool-tip right from your HTML:

Conclusion

This article is meant to give you a very brief peek into some of the great tools that are available to you in Twitter Bootstrap. Whether you’re looking for a quick way to perform a complex layout or simply want some nice UI elements like tabs and buttons, Bootstrap has you covered.

There are things here and there that I might not agree with, but on the whole I think Twitter has succeeded in creating a genuinely useful set of tools. I’m always thrilled to see corporations offering up valuable resources to the web design community free of charge. Do you know of any similar tools from other companies? Let us know in the comments below.

Comments & Discussion

26 Comments

Comments & Discussion

26 Comments

  1. Luca says:

    Great article! :D I never heard about this framework before, but from now I must consider it :)

    Thank you guys

  2. Rob says:

    It would be great if this covered implementing this with Responsive in mind.

  3. Ben Dunkle says:

    Thanks for this! Question-you say “For instance, let’s say you wanted a twelve column grid instead of a sixteen column one, simply go into “variables.less”, find the grid variables and change the number of columns to twelve. It’s that easy.” How would I do that?

  4. Anne says:

    Hi. Thanks for the article. I am just getting started with bootstrap and am wondering what the ‘best practices’ is for customization. I want to develop a system that will take advantage of all the bootstrap power, be completely (and easily) modifiable, be sustainable (ie – when the next version of bootstrap is released from Twitter I don’t have to start over.

    For example, I want to add background images to the top navigation. It looks like there are 3 ways to go about this:
    1. Modify the .topbar classes in bootstrap.css . I don’t particularly like this because I will have lots of .topbar items and I don’t necessarily want to modify them all the same way.
    2. Create new classes with my background images and apply both styles. (This may create style conflicts, which could be avoided by stripping the .topbar class into separate classes and then only using the pieces that are not stepped on by my custom class. Again this requires more work than I think should be necessary and while it is flexible, it won’t allow me to easily update bootstrap.css when Twitter releases the next installment).
    3. Use variables in .LESS to achieve the customization. Offhand this seems like a good approach but having not used .LESS I have concerns about compiling css on the client and about code sustainability.

    Thoughts? Have you seen posts on this?

    • David E. says:

      I’ve used a method similar to method 3, but I don’t compile the .LESS on the client side, I compile it beforehand and only deploy minified/compiled CSS.

  5. Irfan says:

    .Less seems doing quite more :)

  6. Brad says:

    Bootstrap is very nice. I recently built a WordPress theme utilizing the Bootstrap toolkit. I am giving it away for free if anyone wants it: http://braginteractive.com/free-bootstrap-wordpress-theme/

  7. James says:

    This looks incredibly useful… Also, Brad, thank you for linking to your theme, that again is very useful.

  8. Sahil says:

    How does Bootstrap compare to GetSkeleton – http://www.getskeleton.com?

  9. This is very nice….Thanks a tone…………….

  10. Renato Alves says:

    It seems like a great framework. Let’s thank Twitter for providing it for us.

    I’ll definitely get into it form now on. :)

  11. Great article!
    For those who want responsive framework, I suggest to look into Foundation by Zurb, it makes it super easy to build mobile-friendly designs.

  12. Simon Hamp says:

    This is a very thorough article, Joshua, good work! Will you do a ‘part 2′ when Bootstrap version is finally released?

    If anyone wants some free promotion for sites that they use Twitter Bootstrap on, just submit them to http://builtwithbootstrap.com/submit . Don’t forget to follow @BWBootstrap too for inspiration :)

  13. numan says:

    what about foundation from zurb? how does that compare to bootstrap?

  14. Jade says:

    Hi,
    What about HTML KickStart developped by http://www.99lime.com/ ? Anyone has tried it ?

  15. Caroline says:

    Another great (free) tool is Keynotopia’s templates for interactive wireframes/mock-ups. Just released and available here: http://keynotopia.com/bootstrap/ :)

  16. pakan says:

    Good article. Here is good resource to learn with lot of example on bootstrap.
    http://www.w3resource.com/twitter-bootstrap/tutorial.php

  17. Max says:

    Very informative article, thanks for sharing. Twitter’s Bootstrap is really awesome, a great resource for web developers.

  18. Debasis Sabat says:

    Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites wish Facebook and Google should have some kind of this.

  19. Your tutorial is great, here is another 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.

  20. Champico says:

    The new version of Bootstrap supports responsive design http://twitter.github.com/bootstrap/

  21. derek says:

    Would you please put the source code on GIT?

  22. lexus says:

    Not even close. I have never claimed to be the most talented anything in the world, and am certainly not the most talented writer. I am very good at what I do and I take pride in that, but that isn’t the same thing as arrogance. That’s something a lot of the Kenyan writers that have appeared on this forum seem to have a problem with.
    Twig:
    Do they really help anyone?

    Yes. There are many customers that have thanked me quite openly on this forum and via PM for my information and assistance.
    craftywriter:
    never argue with a fool (pheelyks), he will lower you to his level, and then beat you with experience.

    Ahh, arguing with other people’s words. What a crafty plagiarizing writer, indeed.
    Twig Jun 26, 10, 10:21AM | #15
    Joined: May 10, 10
    Threads: 2
    Posts: 141

    pheelyks:
    Wow. 20. They must all be really pleased at the barely passing grades you are able to earn with those ESL skills.

    Showing off as usual. Did you grade those papers?
    pheelyks:
    That’s something a lot of the Kenyan writers that have appeared on this forum seem to have a problem with.

    Making unsubstantiated claim as usual. Are you always a fool or you simply repeat some mistakes to amuse us? Who told you I am a Kenyan Writer? Your degree of madness is extremely high.
    pheelyks Jun 26, 10, 10:59AM | #16

    Twig:
    Did you grade those papers?

    No. Did you?
    Twig:
    Making unsubstantiated claim as usual

    What unsubstantiated claim? There have been numerous posters on this site claiming to be from Kenya (something the mods occasionally verified using IP information) and insisting that other writers must recognize their superiority, that Kenyans are the kings of the world and we should bow down before them, etc. I do not know whether you’re from Kenya or somewhere else, but your tone is similar to that of these Kenyan writers, if toned down somewhat. The fact that you misinterpreted a fairly simple sentence is still more evidence of your lack of English fluency.
    Twig Jun 26, 10, 10:15AM | #17
    Joined: May 10, 10
    Threads: 2
    Posts: 141

    pheelyks:
    The fact that you misinterpreted a fairly simple sentence is still more evidence of your lack of English fluency.

    Which sentence? You claim they score “passing grades” and yet you have no evidence. Is this not unsubstantiated claim? You are not my professor to question whether I “lack English Fluency”. Also, have I ever indicated anywhere on this forum that I am the “King of the world”?
    3dinfo Jun 29, 10, 12:59AM | #18
    Joined: Jun 23, 10
    Threads: 1
    Posts: 7

    Oh WritersBeware Twig

    limited not scamming
    pheelyks Jun 29, 10, 07:18AM | #19

    3dinfo:
    e limited not scamming

    With such a lucid, confident, and well-supported statement, who could possibly disagree?

    Oh, yeah…anyone that’s had any real world experience with company. Damn. If only the facts didn’t get in the way of your blithe assertion.
    Twig Jun 30, 10, 02:07PM | #20
    Joined: May 10, 10
    Threads: 2
    Posts: 141

    3dinfo:
    limited not scamming

    Ha ha ha..
    pheelyks Jun 30, 10, 03:03PM | #21

    Twig:
    3dinfo:
    limited not scamming

    Ha ha ha..

    You add absolutely nothing of value to this forum. Unless you can change that, please leave.
    Twig Jun 30, 10, 10:10PM | #22
    Joined: May 10, 10
    Threads: 2
    Posts: 141

    pheelyks:
    please leave.

    Keep on dreaming.
    pheelyks Jun 30, 10, 10:00PM | #23

    Twig:
    Keep on dreaming.

    You do realize this doesn’t actually make sense in context, right?
    Twig Edited by: Twig Jul 1, 10, 04:45AM | #24
    Joined: May 10, 10
    Threads: 2
    Posts: 141

    pheelyks:
    ou do realize this doesn’t actually make sense in context, right

    I am sick of your constant attacks. They are seemingly insane. But you know what? You have no right to persist with them since you confessed you are not the Modulator.
    pheelyks Jul 1, 10, 09:19AM | #25

    Twig:
    I am sick of your constant attacks.

    Stop making useless posts here and I’ll stop “attacking.”
    Twig:
    You have no right to persist with them since you confessed you are not the Modulator.

    This sentence is ridiculous on several levels. Anyone has a right to post anything they want here that isn’t in conflict with the TOS. The site also doesn’t have Modulators, to my knowledge. Try looking up words when you don’t know what they mean–there’s no shame n trying to learn a new language, and the sense of accomplishment you’ll have when you’ve actually mastered English will be worth the effort.
    Twig Jul 1, 10, 09:25AM | #26
    Joined: May 10, 10
    Threads: 2
    Posts: 141

    pheelyks:
    This sentence is ridiculous on several levels. Anyone has a right to post anything they want here that isn’t in conflict with the TOS. The site also doesn’t have Modulators, to my knowledge. Try looking up words when you don’t know what they mean–there’s no shame n trying to learn a new language, and the sense of accomplishment you’ll have when you’ve actually mastered English will be worth the effort.

    Shut the hell up, housefly.
    pheelyks Jul 1, 10, 09:34AM | #27

    Twig:
    Shut the hell up, housefly.

    Is housefly a big insult in Kenya?
    WritersBeware Edited by: WritersBeware Jul 1, 10, 10:31AM | #28

    Twig:
    you are not the Modulator

    Illudium PU-36 Explosive Space Modulator
    craftywriter Jul 2, 10, 01:50AM | #29
    Joined: Jun 25, 10
    Posts: 3

    Pheelyks, what happened here
    MeoKhan Writer Jul 2, 10, 01:01PM | #30
    Joined: Jan 9, 10
    Threads: 5
    Posts: 1,355

    craftywriter:

    First, page 3 is full of posts made by numerous visitors. Secondly, I wonder why you are discussing a different forum here. It has different rules from those of EssayScam. Hope you get my point.
    dunno214 Writer Dec 3, 10, 07:24PM | #31
    Joined: Dec 3, 10
    Posts: 2

    I think with every company it depends. The customer’s need to give specific instructions to the writer. I currently write for them and what I have noticed (revisions and sometimes customer’s reassign the writer) is that some are really good and some are really bad. However, they use quite a few ESL writers and that is something that you may need to be careful with. It’s technically ‘hot season’ (meaning that students are submitting orders like crazy). Being someone who only speaks English you would think business would be booming. Yet on the login screen it shows close to 200 orders but once you log in (if you are an English speaker) it gets cut down to like 15. From that I can understand why there are so many negative reviews on this company. But like I said its a two way street. From a writers perspective (who only speaks English) I wouldn’t recommend other any native speakers to work for this company at this point.

  23. Yoli says:

    Hello,I have a question regarding to botstrap css3 in Internet Explorer browser: although my the css3 border-radius is set like here it doesn’t show up on IE..only shows a square border radius…why?
    thanks in advance.

Leave a Comment

Subscribe
Membership
About the Author