This is a guest post by Jon Hainstock, co-founder of ZoomShift, easy to use online employee scheduling software.
Hundreds of thousands of sites are using Bootstrap to jumpstart their web design and front-end development. For a lot of developers and designers, implementing Bootstrap is a no brainer. Some rely on Bootstrap for the responsive capabilities, while others simply like using the built-in elements.
Most of the sites that use Bootstrap do little to customize the look and feel–which, in my opinion, is too bad. I’m disappointed, because Bootstrap offers a great foundation that you can work with to prototype and design a completely custom site. It doesn’t take much to customize your design and give visitors a unique experience using Bootstrap’s elements.
In this post I’ll show you 5 easy ways you can avoid the standard ‘Boostrap look’ and create a custom design.
To use the examples below, create a new CSS file and link to it below the bootstrap.css file (found in the <head> of your page). Now any styles you add will override the default Bootstrap styles when targeting elements. I’m also including a zipped copy of the HTML and CSS from these examples a link below.
1. Create Custom Buttons
The default buttons are a dead giveaway that a site is using Bootstrap. You’ll notice in Bootstrap’s documentation that they create different colors for buttons using a btn-description naming convention. Instead of overriding these classes, create your own naming convention. Something like ‘btn-color’ works well. When it comes to customizing the color of your buttons, there is no better tool than Charlie Park’s ‘Beautiful Buttons for Bootstrap’ tool.
To go for the ‘flat’ look that is popular right now, simply add ‘background-image:none’ to your btn-color class to override the gradient. Once you have the perfect color, play around with padding, font-weight, letter-spacing and text transform properties to give your buttons their own look and feel.
Here are a couple examples of buttons that can be created using these methods. These examples show the flexibility you have with just a few lines of code. Feel free to use the snippets as a starting point to create your own.
HTML for Bootstrap buttons
Geckoboard Buttons
Basecamp Buttons
ZoomShift Buttons
Stripe Buttons
2. Avoid The Standard Navbar
Similar to buttons, Bootstrap’s standard navbar can be completely restyled easily. Use inspiration from the web, and create your own custom header instead of relying on what Bootstrap includes right out of the box.
Here are a couple example snippets you can use to help you explore different header options.
The HTML for a standard Bootstrap Navbar
Simple Navbar Header Inspired by Simple.com
Colored Navbar Header Inspired by Harvest
3. Use Custom Fonts
Fonts add dimension and personality to your site just as much as color or layout. There are tons of free fonts that you can use to liven up your design. I prefer Google Web Fonts, but also would recommend Typekit for finding awesome web fonts if you can afford it.
Learn by copying font choices from sites that are designed well. 10 Great Google Font Combinations You Can Copy is a great place to start. You can also find out what fonts sites are using with this Google Chrome plugin. If you want to get nerdy and learn the theory, check out this article on font pairing. And if Helvetica is your thing, then by all means, continue to use Bootstrap’s default font and adjust font weights to keep things interesting.
Here are a couple of examples of sites that use custom fonts with their Bootstrap design.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
4. Create Unique Layouts Using Offsets
Another way you can customize your Bootstrap design is by using offsets to create unique layouts. The general concept with offsets is to add whitespace to the left of a Bootstrap span. Play around with offsets to find some layouts that work well for you. At ZoomShift we use offsets to tighten up layouts where there is not a lot of content. Using offsets and a lot of vertical padding creates breathing rooms in your designs and can set it apart from the traditional layouts.
Here’s an example of the 3-2 layout on the ZoomShift homepage.
Image may be NSFW.
Clik here to view.
Here’s an example of nested columns in a closed two-column layout on the Desk pricing page.
Image may be NSFW.
Clik here to view.
5. Expand Your Icon Choices With Font Awesome
Icons can help you communicate big ideas and concepts quickly to your visitors. The default Bootstrap icons are great for most applications, however, there are times when you need more options. Font Awesome offers an expansive set of icons that you can use to improve your site’s feel.
Image may be NSFW.
Clik here to view.
Closing Thoughts
These are just a few of the ways you can create your own look and feel with Bootstrap. I’d love to see how you are using Bootstrap to come up with your own custom designs in the comments below!