sample example activate

css/css.css

@@ -14,12 +14,12 @@ div {
   color: white;
 }
 
-.btn {
+span .btn {
   margin: 8px;
 }
 
 /* Bubble Float Top */
-.btn {
+span .btn {
   display: inline-block;
   vertical-align: middle;
   -webkit-transform: translateZ(0);
@@ -33,7 +33,7 @@ div {
   -webkit-transition-duration: 0.3s;
   transition-duration: 0.3s;
 }
-.btn:before {
+span .btn:before {
   content: "\f1c8";
   position: absolute;
   left: 1em;
@@ -48,7 +48,7 @@ div {
   -webkit-transition-timing-function: ease-out;
   transition-timing-function: ease-out;
 }
-.btn:hover:before, .btn:focus:before, .btn:active:before {
+span .btn:hover:before, span .btn:focus:before, span .btn:active:before {
   -webkit-transform: scale(1.3) translateZ(0);
   transform: scale(1.3) translateZ(0);
 }

index.html

@@ -41,7 +41,7 @@
           <h5>Select from the following.</h5>
 
 <!-- sample example -->
-<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Displays information about a media file" data-target=".example">Sample example</button>
+<span data-toggle="modal" data-target=".example"><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Displays information about a media file">Sample example</button></span>
 <!-- Change the above data-target field, the button text, and the below div class (the word after modal fade) -->
 <div class="modal fade example" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
   <div class="modal-dialog modal-lg">