How to Make Twitter Bootstrap Not Look Like Twitter Bootstrap

Bootstrap is probably the most popular responsive front end framework on the web today. But if we are being honest, you can easily spot a Boostrap styled website – or can you? I’ll take you through five changes you can make to your bootstrap site to get rid of that ‘bootstrappy’ feel. We’ll also look at some nice looking sites made with Boostrap, and some resources for sprucing up your bootstrapped site.

Giving Bootstrap a Makeover

These are the features that often stand out and make you notice that its a Bootstrap site, so lets tweak them a little.

1. Add Your Logo

A small thing to start with, but it really makes a big difference.

2. Change fonts

Bootstraps default font is Helvetica. Helvetica Helvetica Helvetica. Changing from Helvetica is an easy enough to go. Head over to Google Fonts (it’s free) or Typekit (it’s paid) and swap Helvetica for another web font you fancy. If you are feeling adventurous, why not use two well paired fonts for the headings and body of your site (check out these great Google Font Combinations).

3. Fiddle with the Button Styles

Bootstraps buttons have a certain bootrappy quality about them. This step requires a bit more CSS knowledge. Try playing around with the colour, gradient, shadow, stroke and corner radius of the buttons to make them your own.

4. Change the Nav Bar

The Bootstrap Nav bar just screams Bootstrap Site. Playing around with the CSS of the Nav Bar (or perhaps removing it completely and writing your own) is a must.

5. Add customs colours, images, icons, textures etc.

These are the final touches and can be a lot of work, but it will make all the difference. Also, if you want to change icons, check out our list of the best value icon sets.

For more insight about changing a bootstrap theme, check out this post about building kippt with bootstrap.

Examples

Here are 5 examples of the kind of site you can create by tweaking Boostrap.

Screen Shot 2013 02 20 at 7 54 35 PM

Screen Shot 2013 02 20 at 7 54 52 PM

Screen Shot 2013 02 20 at 7 55 05 PM

Screen Shot 2013 02 20 at 7 55 46 PM

Screen Shot 2013 02 20 at 7 55 57 PM

Images From wrapbootstrap.com

Free Twitter Boostrap Resources

Bootswatch

Bootswatch has a nice collection of free themes for Bootstrap.

http://stylebootstrap.info/

A GUI for generating a bootstrap theme yourself – change the fonts, buttons, and most importantly, that nag bar.

Paid Resources

These two sites offer paid Twitter Bootstrap themes. Most of them are fairly reasonably priced.

Conclusion

I hope I’ve given you some insights in how you can battle the dreary ‘bootstrappy’ website feel. Good luck and gods speed.

Leave a Reply

Your email address will not be published. Required fields are marked *

*