Twitter Bootstrap 101: Customize
videos

Twitter Bootstrap 101: Customize

on Oct 9th 2012 with 22 comments
Tutorial Details
  • Topic: Twitter Bootstrap
  • Difficulty: Beginner
  • Screencast duration: 16 mins
Download Source Files
Demo View It Online
This entry is part 8 of 8 in the series Twitter Bootstrap 101

Twitter Bootstrap 101

Built into Twitter Bootstrap’s documentation is a handy Customize page, which provides a quick way to implement a custom color scheme, custom typography and a number of other CSS customizations. Of course, the most powerful approach is to work directly with Bootstrap’s LESS files. But with a few quick adjustments, and for those who prefer to work in straight CSS, this page offers you a great way to jumpstart your customizations.

Customize Colors and Typography

In this screencast, I’ll walk you through converting a basic Bootstrap site to a dark color scheme. We’ll give it a taller navbar and we’ll pull in a pair of Google web fonts. The process is fast and pretty painless!

In a short follow-up video, I’ll show you how to check for errors that can disrupt the creation of your custom CSS files. You’ll need to watch out for these and be able to go back and fix them when they occur. I’ll show you how that’s done.

In the end, many of you will find this a great way to get the ball rolling for your custom designs.


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

Watch for Errors!

Even a small typo can introduce an error into the customization process. You’ll need to watch for an “error.txt” file. If it appears alongside your custom CSS, you’ll need to open and use it to help you find and correct error-causing entries in the Customize page. Let me show you an example!


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

Resources

During these videos we used:

You might also find it useful to reference the color and typography values used in the screencast:





Series Navigation<< Twitter Bootstrap 101: Trimming File Size

 
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
  • http://www.amrabdelaziz.com amrabdelaziz

    i use bootstrap usale
    thanks so much :D

  • dj

    As usual a very timely (and well done) tutorial. I’d wondered if you were ever going to do another – it’s been a long time. I hope you’re back now for awhile and I’m glad you ended with “look forward to future topics in the coming weeks.” I can think of several such topics that would interest me. Bootstrap is so, let’s say… full featured, that it seems the ‘learning curve’ would be just too steep to tackle in a lifetime. But we pick up on your apparent ‘ease’ with it and dare to attempt.

    • http://alittlecode.com David Cochran
      Author

      DJ — I appreciate the encouragement. I do have next steps in the works, and I hope to be a bit more frequent!

  • http://codeconquest.com Charles from CodeConquest.com

    Thanks for this series! Twitter Bootstrap is a powerful styling tool but can be hard to figure out. I tried once but just didn’t know how to do it, so hopefully next time with the help of these tutorials I’ll be able to figure it out.

    • http://alittlecode.com David Cochran
      Author

      Charles — Yes there are many interacting parts to Bootstrap. It’s enjoyable getting them clicking together.

  • http://www.bootstrapcms.net Marcellino Bommezijn

    Great tutorial on how to use the Bootstrap customizing options on there website. I came across a new cool web application that let’s you design your Bootstrap template real-time through your web browser. This will be much easier for people to create a Bootstrap website.

    Bootstrap Designer – http://www.bootstrapdesigner.com

    • Serge

      Hey, very cool website, looks like a huge time saver.

      Do you know if the generated styles are downloadable as LESS files?

      I usually just use my custom.less file and extend the existing classes by rewriting them with my custom styles which includes custom-variables.less, custom-mixin.less etc..

      Anyway thanks for sharing, I might give this site a go for my next project.

  • http://skattabrain.com Greg

    I was just thinking, what we really need is a ‘save & load css customizations’ feature on the site. So we can load existing work done in a previous version into a Bootstrap update.

    @Marcellino… that’s interesting, but I’d like to try it out at least once before i commit to the monthly though.

  • borus

    Is this a good base for html and WP themes?? I mean like those for sale on themeforest.

    • http://www.snaptin.com Ian Yates

      There are currently over 100 themes on Themeforest which have been built on Bootstrap, 25 of which being WP themes, so I reckon that’s a safe ‘yes’ :)

      • borus

        Thanks for a quick response Ian :)

  • Pingback: Twitter Bootstrap 101: Customize | Webdesigntuts+ | Beachdrop

  • http://sk-web.nl/ Simon Kloostra

    Awesome tutorial, follwed all parts of the serie. For me is it especially usefull since Bootstrap is currently built into version 3.0 of Joomla , which I use to develop my websites.

    • http://alittlecode.com David Cochran
      Author

      Simon,
      Thanks. Yes, I thought this was a great move by Joomla. A boon for developers, and a usability gain for users.

  • Johan

    Very interesting! I will use it for my own clients about web design in Costa Rica. Thanks for the article.

  • Hamid

    thq m8 for the series, keep it up.

  • http://www.facebook.com/mona.abdelmeged.1 Mona Abd Elmeged

    thank you, really awesome tutorial :)

  • Imran Chaudhry

    Hey there David, thank you so much for your Bootstrap tutorials. The official site assumes alot of knowledge already leaving a big gap that your tutorials provide.

    One bit of feedback, I like to know what version of the “language” is being covered in a tutorial so make it clear that your are working in Bootstrap v2.0.2 and above. I say this because I found your v1.4 tutorial first which the website seems to link to in places (with “v2″ in the URL) making it confusing as to which tutorial is which.

    I see that you’re now using Sublime Text 2 instead of Coda in the later tutorials. Good choice! As a long time user of vim I have just moved to ST2 for all my development and not looked back. BTW, what tool do you use to select and preview colours?

    Thanks

  • Pingback: 5 Great Twitter Bootstrap Tutorials For Bootstrap Newbies | Twitter Bootstrap Tutorials

  • Vishwas

    This is such a nice tutorial for a person trying to understand the basics of Bootstraps. Thanks for your patient explanation and clarifying each step. You are brilliant teacher. Thanks for sharing these videos.

  • http://www.facebook.com/dloudon Dan Loudon

    Thanks for the great article! Just started looking in to boostrap a couple of days ago and this has really helped me learn enough to start mucking around with it on my own.

    You rock!

  • Chris

    Brilliant tutorials, I look forward to more sessions on bootstrap very clear intro thank you

  • Juan

    Does that even looks appealing to you?

  • Nigel Buckner

    I thank you for your hard work in presenting these tutorials. I am just starting out with exploring TB with the aim of working on a project and you have given me a way in to exploring the framework. Plus, I have discovered a few other things as well.