add code modals on previews

1 files changed, 214 insertions, 164 deletions

diff --git a/cerulean/index.html b/cerulean/index.html
index a57251dc..e2666e02 100644
--- a/cerulean/index.html
+++ b/cerulean/index.html
@@ -126,7 +126,7 @@
               <h1 id="navbar">Navbar</h1>
             </div>
 
-            <div class="bs-example">
+            <div class="bs-component">
               <div class="navbar navbar-default">
                 <div class="navbar-header">
                   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
@@ -169,10 +169,11 @@
                       </ul>
                     </li>
                   </ul>
-                </div><!-- /.nav-collapse -->
-              </div><!-- /.navbar -->
-
+                </div>
+              </div>
+            </div>
 
+            <div class="bs-component">
               <div class="navbar navbar-inverse">
                 <div class="navbar-header">
                   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
@@ -215,8 +216,8 @@
                       </ul>
                     </li>
                   </ul>
-                </div><!-- /.nav-collapse -->
-              </div><!-- /.navbar -->
+                </div>
+              </div>
             </div><!-- /example -->
 
           </div>
@@ -238,33 +239,29 @@
         <div class="row">
           <div class="col-lg-6">
 
-            <div class="bs-example">
-              <p>
-                <button type="button" class="btn btn-default">Default</button>
-                <button type="button" class="btn btn-primary">Primary</button>
-                <button type="button" class="btn btn-success">Success</button>
-                <button type="button" class="btn btn-info">Info</button>
-                <button type="button" class="btn btn-warning">Warning</button>
-                <button type="button" class="btn btn-danger">Danger</button>
-                <button type="button" class="btn btn-link">Link</button>
-              </p>
-            </div>
-
-            <div class="bs-example">
-              <p>
-                <button type="button" class="btn btn-default disabled">Default</button>
-                <button type="button" class="btn btn-primary disabled">Primary</button>
-                <button type="button" class="btn btn-success disabled">Success</button>
-                <button type="button" class="btn btn-info disabled">Info</button>
-                <button type="button" class="btn btn-warning disabled">Warning</button>
-                <button type="button" class="btn btn-danger disabled">Danger</button>
-                <button type="button" class="btn btn-link disabled">Link</button>
-              </p>
-            </div>
-
-
-            <div class="bs-example" style="margin-bottom: 15px;">
-              <div class="btn-toolbar" style="margin: 0;">
+            <p class="bs-component">
+              <button type="button" class="btn btn-default">Default</button>
+              <button type="button" class="btn btn-primary">Primary</button>
+              <button type="button" class="btn btn-success">Success</button>
+              <button type="button" class="btn btn-info">Info</button>
+              <button type="button" class="btn btn-warning">Warning</button>
+              <button type="button" class="btn btn-danger">Danger</button>
+              <button type="button" class="btn btn-link">Link</button>
+            </p>
+
+            <p class="bs-component">
+              <button type="button" class="btn btn-default disabled">Default</button>
+              <button type="button" class="btn btn-primary disabled">Primary</button>
+              <button type="button" class="btn btn-success disabled">Success</button>
+              <button type="button" class="btn btn-info disabled">Info</button>
+              <button type="button" class="btn btn-warning disabled">Warning</button>
+              <button type="button" class="btn btn-danger disabled">Danger</button>
+              <button type="button" class="btn btn-link disabled">Link</button>
+            </p>
+
+
+            <div style="margin-bottom: 15px;">
+              <div class="btn-toolbar bs-component" style="margin: 0;">
                 <div class="btn-group">
                   <button type="button" class="btn btn-default">Default</button>
                   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
@@ -275,7 +272,8 @@
                     <li class="divider"></li>
                     <li><a href="#">Separated link</a></li>
                   </ul>
-                </div><!-- /btn-group -->
+                </div>
+
                 <div class="btn-group">
                   <button type="button" class="btn btn-primary">Primary</button>
                   <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
@@ -286,7 +284,8 @@
                     <li class="divider"></li>
                     <li><a href="#">Separated link</a></li>
                   </ul>
-                </div><!-- /btn-group -->
+                </div>
+
                 <div class="btn-group">
                   <button type="button" class="btn btn-success">Success</button>
                   <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
@@ -297,7 +296,8 @@
                     <li class="divider"></li>
                     <li><a href="#">Separated link</a></li>
                   </ul>
-                </div><!-- /btn-group -->
+                </div>
+
                 <div class="btn-group">
                   <button type="button" class="btn btn-info">Info</button>
                   <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
@@ -308,7 +308,8 @@
                     <li class="divider"></li>
                     <li><a href="#">Separated link</a></li>
                   </ul>
-                </div><!-- /btn-group -->
+                </div>
+
                 <div class="btn-group">
                   <button type="button" class="btn btn-warning">Warning</button>
                   <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
@@ -319,30 +320,26 @@
                     <li class="divider"></li>
                     <li><a href="#">Separated link</a></li>
                   </ul>
-                </div><!-- /btn-group -->
-              </div><!-- /btn-toolbar -->
+                </div>
+              </div>
             </div>
 
-            <div class="bs-example">
-              <p>
-                <button type="button" class="btn btn-primary btn-lg">Large button</button>
-                <button type="button" class="btn btn-primary">Default button</button>
-                <button type="button" class="btn btn-primary btn-sm">Small button</button>
-                <button type="button" class="btn btn-primary btn-xs">Mini button</button>
-              </p>
-            </div>
+            <p class="bs-component">
+              <button type="button" class="btn btn-primary btn-lg">Large button</button>
+              <button type="button" class="btn btn-primary">Default button</button>
+              <button type="button" class="btn btn-primary btn-sm">Small button</button>
+              <button type="button" class="btn btn-primary btn-xs">Mini button</button>
+            </p>
 
           </div>
           <div class="col-lg-6">
 
-            <div class="bs-example">
-              <p>
-                <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
-              </p>
-            </div>
+            <p class="bs-component">
+              <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
+            </p>
 
 
-            <div class="bs-example" style="margin-bottom: 15px;">
+            <div class="bs-component" style="margin-bottom: 15px;">
               <div class="btn-group btn-group-justified">
                 <a href="#" class="btn btn-default">Left</a>
                 <a href="#" class="btn btn-default">Middle</a>
@@ -350,7 +347,7 @@
               </div>
             </div>
 
-            <div class="bs-example" style="margin-bottom: 15px;">
+            <div class="bs-component" style="margin-bottom: 15px;">
               <div class="btn-toolbar">
                 <div class="btn-group">
                   <button type="button" class="btn btn-default">1</button>
@@ -358,14 +355,15 @@
                   <button type="button" class="btn btn-default">3</button>
                   <button type="button" class="btn btn-default">4</button>
                 </div>
+
                 <div class="btn-group">
                   <button type="button" class="btn btn-default">5</button>
                   <button type="button" class="btn btn-default">6</button>
                   <button type="button" class="btn btn-default">7</button>
                 </div>
+
                 <div class="btn-group">
                   <button type="button" class="btn btn-default">8</button>
-
                   <div class="btn-group">
                     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                       Dropdown
@@ -381,7 +379,7 @@
               </div>
             </div>
 
-            <div class="bs-example">
+            <div class="bs-component">
               <div class="btn-group-vertical">
                   <button type="button" class="btn btn-default">Button</button>
                   <button type="button" class="btn btn-default">Button</button>
@@ -409,20 +407,18 @@
 
         <div class="row">
           <div class="col-lg-4">
-            <div class="bs-example bs-example-type">
+            <div class="bs-component">
               <h1>Heading 1</h1>
               <h2>Heading 2</h2>
               <h3>Heading 3</h3>
               <h4>Heading 4</h4>
               <h5>Heading 5</h5>
               <h6>Heading 6</h6>
-            </div>
-            <div class="bs-example">
               <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
             </div>
           </div>
           <div class="col-lg-4">
-            <div class="bs-example">
+            <div class="bs-component">
               <h2>Example body text</h2>
               <p>Nullam quis risus eget <a href="#">urna mollis ornare</a> vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
               <p><small>This line of text is meant to be treated as fine print.</small></p>
@@ -433,9 +429,8 @@
 
           </div>
           <div class="col-lg-4">
-
-            <h2>Emphasis classes</h2>
-            <div class="bs-example">
+            <div class="bs-component">
+              <h2>Emphasis classes</h2>
               <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
               <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
               <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
@@ -456,16 +451,20 @@
         </div>
         <div class="row">
           <div class="col-lg-6">
-            <blockquote>
-              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-              <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
-            </blockquote>
+            <div class="bs-component">
+              <blockquote>
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+                <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
+              </blockquote>
+            </div>
           </div>
           <div class="col-lg-6">
-            <blockquote class="pull-right">
-              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
-              <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
-            </blockquote>
+            <div class="bs-component">
+              <blockquote class="pull-right">
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+                <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
+              </blockquote>
+            </div>
           </div>
         </div>
       </div>
@@ -480,7 +479,7 @@
               <h1 id="tables">Tables</h1>
             </div>
 
-            <div class="bs-example table-responsive">
+            <div class="bs-component">
               <table class="table table-striped table-hover ">
                 <thead>
                   <tr>
@@ -553,8 +552,8 @@
 
         <div class="row">
           <div class="col-lg-6">
-            <div class="well">
-              <form class="bs-example form-horizontal">
+            <div class="well bs-component">
+              <form class="form-horizontal">
                 <fieldset>
                   <legend>Legend</legend>
                   <div class="form-group">
@@ -630,39 +629,47 @@
           </div>
           <div class="col-lg-4 col-lg-offset-1">
 
-              <form class="bs-example">
+              <form class="bs-component">
                 <div class="form-group">
                   <label class="control-label" for="focusedInput">Focused input</label>
                   <input class="form-control" id="focusedInput" type="text" value="This is focused...">
                 </div>
+
                 <div class="form-group">
                   <label class="control-label" for="disabledInput">Disabled input</label>
                   <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled="">
                 </div>
+
                 <div class="form-group has-warning">
                   <label class="control-label" for="inputWarning">Input warning</label>
                   <input type="text" class="form-control" id="inputWarning">
                 </div>
+
                 <div class="form-group has-error">
                   <label class="control-label" for="inputError">Input error</label>
                   <input type="text" class="form-control" id="inputError">
                 </div>
+
                 <div class="form-group has-success">
                   <label class="control-label" for="inputSuccess">Input success</label>
                   <input type="text" class="form-control" id="inputSuccess">
                 </div>
+
                 <div class="form-group">
                   <label class="control-label" for="inputLarge">Large input</label>
                   <input class="form-control input-lg" type="text" id="inputLarge">
                 </div>
+
                 <div class="form-group">
                   <label class="control-label" for="inputDefault">Default input</label>
                   <input type="text" class="form-control" id="inputDefault">
                 </div>
+
                 <div class="form-group">
                   <label class="control-label" for="inputSmall">Small input</label>
                   <input class="form-control input-sm" type="text" id="inputSmall">
                 </div>
+
                 <div class="form-group">
                   <label class="control-label">Input addons</label>
                   <div class="input-group">
@@ -694,7 +701,7 @@
         <div class="row">
           <div class="col-lg-4">
             <h2 id="nav-tabs">Tabs</h2>
-            <div class="bs-example">
+            <div class="bs-component">
               <ul class="nav nav-tabs" style="margin-bottom: 15px;">
                 <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
                 <li><a href="#profile" data-toggle="tab">Profile</a></li>
@@ -728,7 +735,7 @@
           </div>
           <div class="col-lg-4">
             <h2 id="nav-pills">Pills</h2>
-            <div class="bs-example">
+            <div class="bs-component">
               <ul class="nav nav-pills">
                 <li class="active"><a href="#">Home</a></li>
                 <li><a href="#">Profile</a></li>
@@ -748,7 +755,7 @@
               </ul>
             </div>
             <br>
-            <div class="bs-example">
+            <div class="bs-component">
               <ul class="nav nav-pills nav-stacked" style="max-width: 300px;">
                 <li class="active"><a href="#">Home</a></li>
                 <li><a href="#">Profile</a></li>
@@ -770,14 +777,16 @@
           </div>
           <div class="col-lg-4">
             <h2 id="nav-breadcrumbs">Breadcrumbs</h2>
-            <div class="bs-example">
+            <div class="bs-component">
               <ul class="breadcrumb">
                 <li class="active">Home</li>
               </ul>
+
               <ul class="breadcrumb">
                 <li><a href="#">Home</a></li>
                 <li class="active">Library</li>
               </ul>
+
               <ul class="breadcrumb" style="margin-bottom: 5px;">
                 <li><a href="#">Home</a></li>
                 <li><a href="#">Library</a></li>
@@ -792,7 +801,7 @@
         <div class="row">
           <div class="col-lg-4">
             <h2 id="pagination">Pagination</h2>
-            <div class="bs-example">
+            <div class="bs-component">
               <ul class="pagination">
                 <li class="disabled"><a href="#">&laquo;</a></li>
                 <li class="active"><a href="#">1</a></li>
@@ -802,6 +811,7 @@
                 <li><a href="#">5</a></li>
                 <li><a href="#">&raquo;</a></li>
               </ul>
+
               <ul class="pagination pagination-lg">
                 <li class="disabled"><a href="#">&laquo;</a></li>
                 <li class="active"><a href="#">1</a></li>
@@ -809,6 +819,7 @@
                 <li><a href="#">3</a></li>
                 <li><a href="#">&raquo;</a></li>
               </ul>
+
               <ul class="pagination pagination-sm">
                 <li class="disabled"><a href="#">&laquo;</a></li>
                 <li class="active"><a href="#">1</a></li>
@@ -822,13 +833,12 @@
           </div>
           <div class="col-lg-4">
             <h2 id="pager">Pager</h2>
-            <div class="bs-example">
+            <div class="bs-component">
               <ul class="pager">
                 <li><a href="#">Previous</a></li>
                 <li><a href="#">Next</a></li>
               </ul>
-            </div>
-            <div class="bs-example">
+
               <ul class="pager">
                 <li class="previous disabled"><a href="#">&larr; Older</a></li>
                 <li class="next"><a href="#">Newer &rarr;</a></li>
@@ -853,11 +863,10 @@
           </div>
         </div>
 
-
         <div class="row">
           <div class="col-lg-12">
             <h2>Alerts</h2>
-            <div class="bs-example">
+            <div class="bs-component">
               <div class="alert alert-dismissable alert-warning">
                 <button type="button" class="close" data-dismiss="alert">&times;</button>
                 <h4>Warning!</h4>
@@ -868,28 +877,34 @@
         </div>
         <div class="row">
           <div class="col-lg-4">
-            <div class="alert alert-dismissable alert-danger">
-              <button type="button" class="close" data-dismiss="alert">&times;</button>
-              <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
+            <div class="bs-component">
+              <div class="alert alert-dismissable alert-danger">
+                <button type="button" class="close" data-dismiss="alert">&times;</button>
+                <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
+              </div>
             </div>
           </div>
           <div class="col-lg-4">
-            <div class="alert alert-dismissable alert-success">
-              <button type="button" class="close" data-dismiss="alert">&times;</button>
-              <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
+            <div class="bs-component">
+              <div class="alert alert-dismissable alert-success">
+                <button type="button" class="close" data-dismiss="alert">&times;</button>
+                <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
+              </div>
             </div>
           </div>
           <div class="col-lg-4">
-            <div class="alert alert-dismissable alert-info">
-              <button type="button" class="close" data-dismiss="alert">&times;</button>
-              <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
+            <div class="bs-component">
+              <div class="alert alert-dismissable alert-info">
+                <button type="button" class="close" data-dismiss="alert">&times;</button>
+                <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
+              </div>
             </div>
           </div>
         </div>
         <div class="row">
           <div class="col-lg-4">
             <h2>Labels</h2>
-            <div class="bs-example" style="margin-bottom: 40px;">
+            <div class="bs-component" style="margin-bottom: 40px;">
               <span class="label label-default">Default</span>
               <span class="label label-primary">Primary</span>
               <span class="label label-success">Success</span>
@@ -900,7 +915,7 @@
           </div>
           <div class="col-lg-4">
             <h2>Badges</h2>
-            <div class="bs-example">
+            <div class="bs-component">
               <ul class="nav nav-pills">
                 <li class="active"><a href="#">Home <span class="badge">42</span></a></li>
                 <li><a href="#">Profile <span class="badge"></span></a></li>
@@ -921,55 +936,60 @@
               <h1 id="progress">Progress bars</h1>
             </div>
 
-
             <h3 id="progress-basic">Basic</h3>
-            <div class="bs-example">
+            <div class="bs-component">
               <div class="progress">
                 <div class="progress-bar" style="width: 60%;"></div>
               </div>
             </div>
 
             <h3 id="progress-alternatives">Contextual alternatives</h3>
-            <div class="bs-example">
-              <div class="progress" style="margin-bottom: 9px;">
+            <div class="bs-component">
+              <div class="progress">
                 <div class="progress-bar progress-bar-info" style="width: 20%"></div>
               </div>
-              <div class="progress" style="margin-bottom: 9px;">
+
+              <div class="progress">
                 <div class="progress-bar progress-bar-success" style="width: 40%"></div>
               </div>
-              <div class="progress" style="margin-bottom: 9px;">
+
+              <div class="progress">
                 <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
               </div>
+
               <div class="progress">
                 <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
               </div>
             </div>
 
             <h3 id="progress-striped">Striped</h3>
-            <div class="bs-example">
-              <div class="progress progress-striped" style="margin-bottom: 9px;">
+            <div class="bs-component">
+              <div class="progress progress-striped">
                 <div class="progress-bar progress-bar-info" style="width: 20%"></div>
               </div>
-              <div class="progress progress-striped" style="margin-bottom: 9px;">
+
+              <div class="progress progress-striped">
                 <div class="progress-bar progress-bar-success" style="width: 40%"></div>
               </div>
-              <div class="progress progress-striped" style="margin-bottom: 9px;">
+
+              <div class="progress progress-striped">
                 <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
               </div>
+
               <div class="progress progress-striped">
                 <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
               </div>
             </div>
 
             <h3 id="progress-animated">Animated</h3>
-            <div class="bs-example">
+            <div class="bs-component">
               <div class="progress progress-striped active">
                 <div class="progress-bar" style="width: 45%"></div>
               </div>
             </div>
 
             <h3 id="progress-stacked">Stacked</h3>
-            <div class="bs-example">
+            <div class="bs-component">
               <div class="progress">
                 <div class="progress-bar progress-bar-success" style="width: 35%"></div>
                 <div class="progress-bar progress-bar-warning" style="width: 20%"></div>
@@ -989,7 +1009,7 @@
             <div class="page-header">
               <h1 id="container">Containers</h1>
             </div>
-            <div class="bs-example">
+            <div class="bs-component">
               <div class="jumbotron">
                 <h1>Jumbotron</h1>
                 <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
@@ -1007,7 +1027,7 @@
         </div>
         <div class="row">
           <div class="col-lg-4">
-            <div class="bs-example">
+            <div class="bs-component">
               <ul class="list-group">
                 <li class="list-group-item">
                   <span class="badge">14</span>
@@ -1025,7 +1045,7 @@
             </div>
           </div>
           <div class="col-lg-4">
-            <div class="bs-example">
+            <div class="bs-component">
               <div class="list-group">
                 <a href="#" class="list-group-item active">
                   Cras justo odio
@@ -1038,7 +1058,7 @@
             </div>
           </div>
           <div class="col-lg-4">
-            <div class="bs-example">
+            <div class="bs-component">
               <div class="list-group">
                 <a href="#" class="list-group-item">
                   <h4 class="list-group-item-heading">List group item heading</h4>
@@ -1061,65 +1081,76 @@
         </div>
         <div class="row">
           <div class="col-lg-4">
-            <div class="panel panel-default">
-              <div class="panel-body">
-                Basic panel
+            <div class="bs-component">
+              <div class="panel panel-default">
+                <div class="panel-body">
+                  Basic panel
+                </div>
               </div>
-            </div>
-            <div class="panel panel-default">
-              <div class="panel-heading">Panel heading</div>
-              <div class="panel-body">
-                Panel content
+
+              <div class="panel panel-default">
+                <div class="panel-heading">Panel heading</div>
+                <div class="panel-body">
+                  Panel content
+                </div>
               </div>
-            </div>
-            <div class="panel panel-default">
-              <div class="panel-body">
-                Panel content
+
+              <div class="panel panel-default">
+                <div class="panel-body">
+                  Panel content
+                </div>
+                <div class="panel-footer">Panel footer</div>
               </div>
-              <div class="panel-footer">Panel footer</div>
             </div>
           </div>
           <div class="col-lg-4">
-            <div class="panel panel-primary">
-              <div class="panel-heading">
-                <h3 class="panel-title">Panel primary</h3>
-              </div>
-              <div class="panel-body">
-                Panel content
-              </div>
-            </div>
-            <div class="panel panel-success">
-              <div class="panel-heading">
-                <h3 class="panel-title">Panel success</h3>
-              </div>
-              <div class="panel-body">
-                Panel content
+            <div class="bs-component">
+              <div class="panel panel-primary">
+                <div class="panel-heading">
+                  <h3 class="panel-title">Panel primary</h3>
+                </div>
+                <div class="panel-body">
+                  Panel content
+                </div>
               </div>
-            </div>
-            <div class="panel panel-warning">
-              <div class="panel-heading">
-                <h3 class="panel-title">Panel warning</h3>
+
+              <div class="panel panel-success">
+                <div class="panel-heading">
+                  <h3 class="panel-title">Panel success</h3>
+                </div>
+                <div class="panel-body">
+                  Panel content
+                </div>
               </div>
-              <div class="panel-body">
-                Panel content
+
+              <div class="panel panel-warning">
+                <div class="panel-heading">
+                  <h3 class="panel-title">Panel warning</h3>
+                </div>
+                <div class="panel-body">
+                  Panel content
+                </div>
               </div>
             </div>
           </div>
           <div class="col-lg-4">
-            <div class="panel panel-danger">
-              <div class="panel-heading">
-                <h3 class="panel-title">Panel danger</h3>
-              </div>
-              <div class="panel-body">
-                Panel content
-              </div>
-            </div>
-            <div class="panel panel-info">
-              <div class="panel-heading">
-                <h3 class="panel-title">Panel info</h3>
+            <div class="bs-component">
+              <div class="panel panel-danger">
+                <div class="panel-heading">
+                  <h3 class="panel-title">Panel danger</h3>
+                </div>
+                <div class="panel-body">
+                  Panel content
+                </div>
               </div>
-              <div class="panel-body">
-                Panel content
+
+              <div class="panel panel-info">
+                <div class="panel-heading">
+                  <h3 class="panel-title">Panel info</h3>
+                </div>
+                <div class="panel-body">
+                  Panel content
+                </div>
               </div>
             </div>
           </div>
@@ -1132,23 +1163,42 @@
         </div>
         <div class="row">
           <div class="col-lg-4">
-            <div class="well">
-              Look, I'm in a well!
+            <div class="bs-component">
+              <div class="well">
+                Look, I'm in a well!
+              </div>
             </div>
           </div>
           <div class="col-lg-4">
-            <div class="well well-sm">
-              Look, I'm in a small well!
+            <div class="bs-component">
+              <div class="well well-sm">
+                Look, I'm in a small well!
+              </div>
             </div>
           </div>
           <div class="col-lg-4">
-            <div class="well well-lg">
-              Look, I'm in a large well!
+            <div class="bs-component">
+              <div class="well well-lg">
+                Look, I'm in a large well!
+              </div>
             </div>
           </div>
         </div>
       </div>
 
+      <div id="source-modal" class="modal fade">
+        <div class="modal-dialog modal-lg">
+          <div class="modal-content">
+            <div class="modal-header">
+              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+              <h4 class="modal-title">Source Code</h4>
+            </div>
+            <div class="modal-body">
+              <pre></pre>
+            </div>
+          </div>
+        </div>
+      </div>
 
       <footer>
         <div class="row">