Use bootstrap 4 in about us page

Author: jeroendesloovere

about/index.html

@@ -9,28 +9,25 @@ <h2>About us</h2>
     <p>These docker images are created by the Dockerwest team:</p>
 
     <div class="row">
-      <div class="col-md-6 item">
-        <div class="thumbnail">
-          <img class="group list-group-image" src="https://avatars1.githubusercontent.com/u/293691?v=3&s=200">
-          <div class="caption">
-            <h4 class="group inner list-group-item-heading">Ike Devolder "BlackIkeEagle"</h4>
-            <p class="group inner list-group-item-text">
-              <a href="https://github.com/BlackIkeEagle">Github</a>
-            </p>
+      <div class="col-12 col-md-6">
+        <div class="card mb-1">
+          <img class="card-img-top" src="https://avatars1.githubusercontent.com/u/293691?v=3&s=200" alt="Ike Devolder 'BlackIkeEagle'">
+          <div class="card-body">
+            <h5 class="card-title">Ike Devolder "BlackIkeEagle"</h5>
+            <a href="https://github.com/BlackIkeEagle" class="btn btn-primary">Github</a>
           </div>
         </div>
       </div>
-      <div class="col-md-6 item">
-        <div class="thumbnail">
-          <img class="group list-group-image" src="https://avatars1.githubusercontent.com/u/491565?v=3&s=200">
-          <div class="caption">
-            <h4 class="group inner list-group-item-heading">Pieter Meyvaert "Pegasuz"</h4>
-            <p class="group inner list-group-item-text">
-              <a href="https://github.com/Pegasuz">Github</a>
-            </p>
+
+      <div class="col-12 col-md-6">
+        <div class="card mb-1">
+          <img class="card-img-top" src="https://avatars1.githubusercontent.com/u/491565?v=3&s=200" alt="Pieter Meyvaert 'Pegasuz'">
+          <div class="card-body">
+            <h5 class="card-title">Pieter Meyvaert "Pegasuz"</h5>
+            <a href="https://github.com/Pegasuz" class="btn btn-primary">Github</a>
           </div>
         </div>
       </div>
     </div>
   </div>
-</div>
+</div>

css/style.css

@@ -12,50 +12,6 @@ footer.container {
     border-top: 1px dashed #aaa;
 }
 
-.item.list-group-item {
-    float: none;
-    width: 100%;
-    background-color: #fff;
-    margin-bottom: 10px;
-}
-
-.item.list-group-item:nth-of-type(odd):hover, .item.list-group-item:hover {
-    background: #428bca;
-}
-
-.item.list-group-item .list-group-image {
-    margin-right: 10px;
-}
-
-.item.list-group-item .thumbnail {
-    margin-bottom: 0px;
-}
-
-.item.list-group-item .caption {
-    padding: 9px 9px 0px 9px;
-}
-
-.item.list-group-item:nth-of-type(odd) {
-    background: #eeeeee;
-}
-
-.item.list-group-item:before, .item.list-group-item:after {
-    display: table;
-    content: " ";
-}
-
-.item.list-group-item img {
-    float: left;
-}
-
-.item.list-group-item:after {
-    clear: both;
-}
-
-.list-group-item-text {
-    margin: 0 0 11px;
-}
-
 #mainNavbar {
     margin-bottom: 2em;
 }