Building Twitter Bootstrap

by Mark Otto

21 Reader Comments

Back to the Article
  1. We’ve been working with Bootstrap since it first came out. Soon our new webapp (Richmetrics.com) will be released and it’s all based on Bootstrap. Heavily modified but still, the building blocks is in there. It’s been a pleasure to work with Bootstrap! Thanks for the insight.

    Copy & paste the code below to embed this comment.
  2. It looks great on the desktop!  But sadly it’s not mobile/responsive/adaptive, etc.

    Copy & paste the code below to embed this comment.
  3. Great article, Bootstrap really takes things to the next level. I am interested to hear a little more about how you decided to include Less in the project. For myself, working with Sass allows an immense degree of flexibility that CSS just doesn’t provide for large frameworks. Bootstrap is pioneering these new styling systems and I am fascinated to see where this takes us. Like the leap to content management systems from HTML, will this be a leap to style management systems?

    Great stuff and thanks for writing and making Bootstrap open source!

    Copy & paste the code below to embed this comment.
  4. Mark, you’ve done a great job with Bootstrap. I absolutely love it. IT’s rejuvenated my development experience – I really am no designer, but Bootstrap has helped me to knock out some simple UIs for various projects and ideas – it really has been a joy to use.

    Thank you! And thanks for your support with Built With Bootstrap. It’s been amazing to see what hundreds of other developers and designers have been able to do with this brilliant toolkit.

    Copy & paste the code below to embed this comment.
  5. Mark I want to thank for putting all this together. Bootstrap helps us cut costs and speed product launch.

    Copy & paste the code below to embed this comment.
  6. erogers, if you take a look at the 2.0 branch on the Bootstrap Github repo you’ll see a bunch of responsive goodness. So it is coming, just not released quite yet.

    Copy & paste the code below to embed this comment.
  7. Thanks a ton for Twitter Bootstrap… I am now eagerly waiting for v 2.0… Is there any expected date of release?

    Copy & paste the code below to embed this comment.
  8. In the ALA Topics description for this article it says “Proper document markup. Separating structure from presentation and behavior.” I fail to see how any grid system separates structure from presentation. Markup such as class=“span6” or class=“col_6” are clearly presentational classnames.

    Copy & paste the code below to embed this comment.
  9. There are many of these types of tools out there by other good folks trying to do exactly what you are trying to achieve.  Simple prototyping with responsive grid layouts is enviable goal, how does your project differ from others (such as Foundation – http://foundation.zurb.com/docs/)?

    Copy & paste the code below to embed this comment.
  10. A great tool, just a quibble:

    > As one last step during abstraction to Bootstrap,
    > we opted to have the behavior triggered on click
    > rather than on hover

    Would be handy if the user gets to choose—messing with the JS source might not be advisable.

    Copy & paste the code below to embed this comment.
  11. We wasted soo much time designing our new site. Bootstrap means we can focus on functionality without having to worry about what it looks like. Our designer is happy. Our tech team love it. Its a great project. Thanks for sharing with the world. I will post link when we go live.

    Copy & paste the code below to embed this comment.
  12. i just feel its a great product great work you have done seriously

    Copy & paste the code below to embed this comment.
  13. This is just my sing up and would like to say hello to all of you. I think that I could make my contribution to this blog in the future.

    Copy & paste the code below to embed this comment.
  14. I was tasked to build or find a toolset that would create consistency within our app (www.3point5.com, www.promotive.com) that could span across different theming and it didn’t take long to find bootstrap paired with LESS CSS was the perfect solution for us.

    As we grow and more designers that don’t always get into the code as often but that do new feature mocks for the app I’ve found that having a PSD/Fireworks file for them to pull components from that match the bootstrap framework is useful. I took it upon myself to create one, with the help of @gradykelly’s firework template I converted it over to PSD and have started to refine it and provide it as a resource for our designers.

    // Twitter Bootstrap PSD Template
    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/

    Copy & paste the code below to embed this comment.
  15. Bootstrap does a great job packaging everything an all in one toolkit. The only problem I have run into with using Bootstrap is that it is very CSS heavy. I found that on one website, I was actually using a third of the CSS that Bootstrap has by default.
    The kit itself, I think, would be great for individuals with less front end development experience as I feel more restricted when I have so many options to choose with JS without Bootstrap. Then again, there may be a project where I will be handing everything off to less knowledgeable customers who would not be able to make future changes easily without Bootstrap.

    Copy & paste the code below to embed this comment.
  16. Today most servers and browsers deal ascii content gzipped—css is repetitive and so compresses extremely well, therefore with most sites there hardly shouldn’t be a noticeable delay. I’m not sure about a possible delay due to more work for the browser’s rendering engine, though. If there is one, Google might detect and penalise it.

    Copy & paste the code below to embed this comment.
  17. …there hardly should be

    Copy & paste the code below to embed this comment.
  18. I have been digging into Bootstrap lately. I just posted my experience with using LESS and Bootstrap together to achieve semantic markup – http://blog.appliedis.com/2013/02/04/bootstrap-with-less/
    It links to a working example and also the github repo of the source code for the example.

    Copy & paste the code below to embed this comment.
  19. I have only recently found Twitter Bootstrap and love it for developing the project core. So glad it was shared and OS!

    Copy & paste the code below to embed this comment.
  20. I have only recently found Twitter Boots trap and love it for developing the project core. So glad it was shared here & OS!

    Copy & paste the code below to embed this comment.
  21. I think it’s great for prototyping your app. Before you’ll open photoshop you need to interact with interface, make some test with other people, so you can decide: is it good enough?

    After it could be taken final shape

    Copy & paste the code below to embed this comment.