Custom Web Design & Development

Bootstrap Contextual Classes & Themes

Add visual interest to web pages without custom CSS code.

Before
After
 
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.