More stuff!

If you want it, Bootstrap probably has it.

Before you write your own CSS, check and see if Bootstrap already has it. Examples I used in this presentation (there are many more):

  • Buttons
  • Panels (this content is in a panel: colored header with hover styles, thin grey border, rounded corners).
  • Wells (the help box: shadowed, rounded borders, plus a default grey background I overrode)
  • Glyphicons (yes, and and and are pure CSS)
  • Float anything right or left with class="pull-right" or class="pull-left"

Add JavaScript without writing any JavaScript.

You can create interactive effects just by adding the right class names, id names, and/or data attributes to components. Examples from this presentation (there are many more):

See the Yay Bootstrap! source for comments on troubleshooting Bootstrap JS.

Be different, just like everybody else.

  • Out-of-the-box bootstrap is super recognizable; don't use it.
  • Changing just the color and font makes a huge difference!
  • It is easy to customize.
  • Here's 100% of my custom styles: two fonts, a color scheme, a footer I copy-pasted from Bootstrap, and a handful of layout tweaks. And a gold star.
  • There are also lots of great free and cheap Bootstrap themes out there.
  • Thoughtful use of components looks distinctive, too.

less - it's magic. It lets you use variables and mixins in your CSS. Want to define a @green instead of remembering the hex code everywhere? Want a lot of your elements to have the same .rounded_corners_and_orange_background()? You can and it's the best. Bootstrap is built on less -- this is what makes customization such a snap.