5 simple design tips to improve your Bootstrap site

It’s tempting to use Bootstrap for your project and be done with the design, especially if you don’t come from a design background. What you often end up with resembles something like this (view live):


But if you care about how your content is received, don’t let Bootstrap be the final word on your design. A small effort here will pay off in spades.

To help with this, here are five simple tips to get the most out of Bootstrap. Don’t worry: you won’t have to dig into LESS and customize the Bootstrap source.

As I go through the list, I’ll apply each piece of advice to the example above.

1. Limit lines of text

When it comes to typography, a common rule of thumb is to limit lines of text (i.e., the measure) to 50-75 characters for improved readability. To put it in Bootstrap terms, your text should use 6 columns at most, given the default 14 pixel font size. Using all 12 columns for long-form text results in 170-character lines, well over the optimal range.

Here, I’ve reduced the text to 8 columns while bumping the font size up to 20 pixels. (view live)


2. Use plenty of whitespace

Adding whitespace to your sections, paragraphs, etc. can dramatically improve the readability of your site. By default, Bootstrap often doesn’t provide sufficient margins and paddings. Not that I blame Bootstrap — it can’t know in advance how your content and components are going to fit together, which is what determines the effective use of whitespace.

In my example, I’ve increased the paragraph top and bottom margins and line height to 1.6em. (view live)


3. Less is more…

When it comes to interface design, less is more. You want to bring the content to the forefront. Use only a few fonts, a few colors in your palette, and even as few Bootstrap components as necessary. The slighter the differences are, the more likely it is that you should eliminate them by combining styles.

I noticed slight discrepancies with the font size, weight, and color between the main paragraph text, the lead, the button text, and the navbar brand in my example. I’ve made them consistent here. (view live)


4. …Except when it comes to images

There is one exception to the “less is more” maxim: when it comes to images, bigger is better. For example, if you have a jumbotron at the top of your page, consider replacing it with a full-width background image or pattern. background-size: cover is your friend here.

In my example, I simply darkened a photo by 75% to contrast the white text and set it as the background image. (view live)tumblr_inline_n2wazerTaR1qb17pp

5. Use a theme

Last but not least, consider using a Bootswatch theme to give your site a fresh look. This gives your Bootstrap components a distinct style with minimal effort. Unless you’re confident in what you’re doing, stick with a more neutral theme like Lumen,Darkly, or Yeti.

Here, I’ve replaced the default Bootstrap stylesheet with Yeti, giving the page’s button and typography a new spin. (view live)


Putting it all together

Here’s an animation that shows the progression. Granted this is a basic example, but these same principles can be applied to any website. Keep them in mind and even if you’re not a design guru, hopefully they help you take your Bootstrap-based site to the next level.



Photo by David Masters. Text courtesy of Wikipedia.


About 智足者富



电子邮件地址不会被公开。 必填项已用*标注

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>