More Bootstrap 4 migration.

dondi · Oct 4, 2017 · abfebb5 · abfebb5
1 parent 29fbc2b
commit abfebb5
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 26 deletions.
diff --git a/site/_layouts/component.html b/site/_layouts/component.html
@@ -4,12 +4,12 @@
 
 <h2>{{ page.title }}</h2>
 {% if page.contributors %}
-<dl class="dl-horizontal">
-  <dt>Contributor{% if page.contributors.size > 1 %}s{% endif %}</dt>
-  <dd>
+<dl class="row">
+  <dt class="col-2 text-right">Contributor{% if page.contributors.size > 1 %}s{% endif %}</dt>
+  <dd class="col">
     <ul class="list-inline">
       {% for contributor in page.contributors %}
-      <li><a href="https://github.com/{{ contributor.github }}">{{ contributor.name }}</a></li>
+      <li class="list-inline-item"><a href="https://github.com/{{ contributor.github }}">{{ contributor.name }}</a></li>
       {% endfor %}
     </ul>
   </dd>

diff --git a/site/_layouts/default.html b/site/_layouts/default.html
@@ -1,6 +1,6 @@
 ---
 layout: base
 ---
-    <div class="container" role="main">
+    <div class="container mt-5" role="main">
       {{ content }}
     </div>
diff --git a/site/index.html b/site/index.html
@@ -6,7 +6,7 @@
 <div class="jumbotron">
   <div class="container">
     <div class="row">
-      <div class="col-xs-12 panel-body">
+      <div class="col">
         <h1>The Paradixm Project</h1>
 
         <p>A survey of known user interface elements at the micro and macro levels</p>
@@ -43,11 +43,11 @@ <h2>Catalog of Component Articles</h2>
     <div class="col-lg-2 col-sm-3 col-xs-4 component-nav">
       <h3>{{ group.group }}</h3>
 
-      <ul class="nav nav-pills nav-stacked">
+      <div class="nav flex-column nav-pills">
   {% for component in group.components %}
-        <li><a href="{{ site.baseurl }}/components/{{ component.path }}">{{ component.name }}</a></li>
+        <a class="nav-link" href="{{ site.baseurl }}/components/{{ component.path }}">{{ component.name }}</a>
   {% endfor %}
-      </ul>
+      </div>
     </div>
 {% endfor %}
   </div>

diff --git a/site/template/index.html b/site/template/index.html
@@ -179,43 +179,43 @@ <h3>Platform-Specific Instances</h3>
     platform-specific user interface component.</p>
 </blockquote>
 
-<div class="row">
+<div class="row mb-4">
   <div class="col-xs-6 col-sm-3">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        <h4 class="panel-title text-center">Alto</h4>
+    <div class="card">
+      <div class="card-header text-center">
+        <strong>Alto</strong>
       </div>
-      <div class="panel-body">
+      <div class="card-body">
       </div>
     </div>
   </div>
 
   <div class="col-xs-6 col-sm-3">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        <h4 class="panel-title text-center">Amiga</h4>
+    <div class="card">
+      <div class="card-header text-center">
+        <strong>Amiga</strong>
       </div>
-      <div class="panel-body">
+      <div class="card-body">
       </div>
     </div>
   </div>
 
   <div class="col-xs-6 col-sm-3">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        <h4 class="panel-title text-center">Material Design</h4>
+    <div class="card">
+      <div class="card-header text-center">
+        <strong>Material Design</strong>
       </div>
-      <div class="panel-body">
+      <div class="card-body">
       </div>
     </div>
   </div>
 
   <div class="col-xs-6 col-sm-3">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        <h4 class="panel-title text-center">watchOS</h4>
+    <div class="card">
+      <div class="card-header text-center">
+        <strong>watchOS</strong>
       </div>
-      <div class="panel-body">
+      <div class="card-body">
       </div>
     </div>
   </div>