Breadcrumbs.

albums.html

@@ -30,8 +30,8 @@
         <!-- uncollapsed navbar -->
         <div id="main_navbar" class="collapse navbar-collapse">
           <ul class="nav navbar-nav">
-            <li class="active"><a href="index.html">Home</a></li>
-            <li><a href="albums.html">Albums</a></li>
+            <li><a href="index.html">Home</a></li>
+            <li class="active"><a href="albums.html">Albums</a></li>
             <li><a href="photos.html">All photos</a></li>
           </ul>
         </div><!-- /uncollapsed navbar -->
@@ -39,9 +39,15 @@
     </nav>
 
     <div class="container">
+
       <h1>Here are my albums</h1>
+      <ol class="breadcrumb">
+        <li><a href="index.html">Home</a></li>
+        <li><a href="albums.html">Albums</a></li>
+      </ol>
 
       <a href="photos.html"><img class="album_cover" src="images/img_1.jpg" alt="Graffiti cover image" /></a>
+      <p>Graffiti album</p>
       <a href="photos.html"><img class="album_cover" src="images/img_2.jpg" alt="Full english breakfast" /></a>
       <a href="photos.html"><img class="album_cover" src="images/img_3.jpg" alt="Racks of cheese!" /></a>
     </div>

index.html

@@ -40,6 +40,9 @@
 
     <div class="container">
       <h1>Hello from my Bootstrap site</h1>
+      <ol class="breadcrumb">
+        <li><a href="index.html">Home</a></li>
+      </ol>
     </div>
   
     <script src="js/jquery.min.js"></script> <!-- jquery libraries -->

photo1.html

@@ -40,6 +40,13 @@
 
     <div class="container">
       <h1>Some graffiti I found</h1>
+      <ol class="breadcrumb">
+        <li><a href="index.html">Home</a></li>
+        <li><a href="albums.html">Albums</a></li>
+        <li><a href="photos.html">Graffiti album</a></li>
+        <li><a href="photo1.html">Wall</a></li>
+      </ol>
+
       <img src="images/img_1.jpg" alt="Some graffiti" class="single_photo" />
     </div>
   

photos.html

@@ -30,9 +30,9 @@
         <!-- uncollapsed navbar -->
         <div id="main_navbar" class="collapse navbar-collapse">
           <ul class="nav navbar-nav">
-            <li class="active"><a href="index.html">Home</a></li>
+            <li><a href="index.html">Home</a></li>
             <li><a href="albums.html">Albums</a></li>
-            <li><a href="photos.html">All photos</a></li>
+            <li class="active"><a href="photos.html">All photos</a></li>
           </ul>
         </div><!-- /uncollapsed navbar -->
       </div>
@@ -40,6 +40,11 @@
 
     <div class="container">
       <h1>Here are the photos</h1>
+      <ol class="breadcrumb">
+        <li><a href="index.html">Home</a></li>
+        <li><a href="albums.html">Albums</a></li>
+        <li><a href="photos.html">Graffiti album</a></li>
+      </ol>
 
       <a href="photo1.html"><img class="photo_list" src="images/img_1.jpg" alt="Graffiti cover image" /></a>
       <a href="photo1.html"><img class="photo_list" src="images/img_2.jpg" alt="Graffiti cover image" /></a>