Custom Web Design & Development

Bootstrap Contextual Classes & Themes

Add visual interest to web pages without custom CSS code.

before after


Easily transform the look of your web site with Contextual Classes and Bootswatch Themes. The following video demonstrates how in Dreamweaver CC 2014 but you can do this with any HTML code editor.

Project Files


Bootstrap Contextual Classes are frequently used with buttons and alert-boxes.  But it doesn't stop there.  Contextual classes may be combined with any of these other Bootstrap classes.

  • alert-boxes
  • backgrounds (bg-)
  • buttons (btn-)
  • labels
  • list-groups
  • panels
  • progress-bars
  • tables
  • text

Bootswatch Themes for Bootstrap are free and conveniently hosted on Max CDN. Minified scripts on CDNs (content delivery networks) are smaller and faster loading, too. Simply paste code below into your document's <head> tag. Change theme_name as desired.

16 Themes to choose from:

  • Cerulean
  • Cosmo
  • Cyborg
  • Darkly
  • Flatly
  • Journal
  • Lumen
  • Paper
  • Readable
  • Sandstone
  • Simplex
  • Slate
  • Spacelab
  • Superhero
  • United
  • Yeti

That's all there is to it.  Hope you enjoyed this brief demonstration.