Improved Article Aside in article.html into a Bootstrap Project

Close #45
Riverfount · Mar 5, 2019 · f36a8fe · f36a8fe
1 parent 1d532b9
commit f36a8fe
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/bootstrap4/article.html b/bootstrap4/article.html
@@ -70,7 +70,7 @@ <h4 class="h6">In this article</h4>
                 </div>
             </nav>
         </div>
-        <div class="col-12 col-lg-7 pt-3">
+        <div class="col-12 col-lg-6 pt-3">
             <article>
                 <h2>Article Heading</h2>
                 <div class="small">Last update:
@@ -209,8 +209,14 @@ <h3>Article Sub Heading</h3>
                 </table>
             </article>
         </div>
-        <div class="col-12 col-lg-2">
+        <div class="col-12 col-lg-3">
             <aside class="sticky-top">
+                <h4 class="h6">Related Articles</h4>
+                <ul>
+                    <li><a href="article.html">Related Article Heading</a></li>
+                    <li><a href="article.html">Related Article Heading</a></li>
+                    <li><a href="article.html">Related Article Heading</a></li>
+                </ul>
                 <h4 class="h6 pt-3">Technical Suport</h4>
                 <a href="#" class="btn btn-secondary">Contact Suport</a>
             </aside>

diff --git a/bootstrap4/category.html b/bootstrap4/category.html
@@ -70,7 +70,7 @@ <h4 class="h6">Sub Categories</h4>
                     </div>
                 </nav>
             </div>
-            <div class="col-12 col-lg-7 pt-3">
+            <div class="col-12 col-lg-6 pt-3">
                 <main>
                     <h2>Category Heading</h2>
                     <h3 class="font-italic" id="section-1">Category Subheading</h3>
@@ -126,7 +126,7 @@ <h3 class="font-italic" id="section-5">Category Subheading</h3>
 
                 </main>
             </div>
-            <div class="col-12 col-lg-2">
+            <div class="col-12 col-lg-3">
                 <aside class="sticky-top">
                     <h4 class="h6 pt-3">Technical Suport</h4>
                     <a href="#" class="btn btn-secondary">Contact Suport</a>