Fix bootstrap and make cards for top of index

src/blog.ml

@@ -281,7 +281,7 @@ let links_to_home_pages =
   Format.sprintf
     {|
     <div class="row">
-      <div class="col-lg-4" align="left">
+      <div class="col-6 col-lg-4" align="left">
         <p class="toplinks2">
           <a href="/blog">
             Home
@@ -291,14 +291,14 @@ let links_to_home_pages =
           <img class="blogimg" src="/blog/assets/img/icon_home.svg"/>
         </p>
       </div>
-      <div class="col-lg-4" align="center">
+      <div class="col-6 col-lg-4" align="center">
       <p class="toplinks">
         <a href="/blog/feed">
           <img class="blogimg" src="/blog/assets/img/icon_atom_feed.svg"/>
         </a>
       </p>
       </div>
-      <div class="col-lg-4" align="right">
+      <div class="col-6 col-lg-4" align="right">
         <p class="toplinks3">
           <img class="blogimg" src="/blog/assets/img/icon_categories.svg"/>
         </p>
@@ -320,19 +320,19 @@ let pp_article_excerpt fmt article =
       <h3><a href="/blog/%s">%s</a></h3>
     </div>
     <div class="row">
-      <div class="col-lg-3">
+      <div class="col-6 col-lg-3">
         <img class="icon" src="/blog/assets/img/icon_person.svg"/>
         Authors: %a
       </div>
-      <div class="col-lg-3">
+      <div class="col-6 col-lg-3">
         <img class="icon" src="/blog/assets/img/icon_calendar.svg"/>
         Date: %4d-%02d-%02d
       </div>
-      <div class="col-lg-3">
+      <div class="col-6 col-lg-3">
         <img class="icon" src="/blog/assets/img/icon_category.svg"/>
         Category: <a href="/blog/category/%s">%s</a>
       </div>
-      <div class="col-lg-3">
+      <div class="col-6 col-lg-3">
         <img class="icon" src="/blog/assets/img/icon_tags.svg"/>
         Tags: %a
       </div>
@@ -361,22 +361,22 @@ let specific_article_header title authors (year, month, day) category tags =
   Format.asprintf
     {|<h1 id="page-title">%s</h1>
     <div class="row">
-      <div class="col-lg-3">
+      <div class="col-6 col-lg-3">
       <img class="icon" src="/blog/assets/img/icon_person.svg"/>
         Authors: %a
       </div>
-      <div class="col-lg-2">
+      <div class="col-6 col-lg-2">
       <img class="icon" src="/blog/assets/img/icon_calendar.svg"/>
         Date: %4d-%02d-%02d
       </div>
-      <div class="col-lg-1" align="center">
+      <div class="col-6 col-lg-1" align="center">
         <a href="/blog/feed"><img class="icon" src="/blog/assets/img/icon_atom_feed.svg"/></a>
       </div>
-      <div class="col-lg-3">
+      <div class="col-6 col-lg-3">
       <img class="icon" src="/blog/assets/img/icon_category.svg"/>
         Category: <a href="/blog/category/%s">%s</a>
       </div>
-      <div class="col-lg-3">
+      <div class="col-6 col-lg-3">
       <img class="icon" src="/blog/assets/img/icon_tags.svg"/>
         Tags: %a
       </div>

src/content/index.md

-<h1 id="page-title">Harnessing Cutting-Edge Technologies</h1>
+<h1 style=font-size:50px id="page-title">Harnessing Cutting-Edge Technologies</h1>
 
 <hr class="featurette-divider">
 
@@ -8,18 +8,33 @@ We have years of experience on the research and development of programming langu
 <br />
 <br />
 <div class="row">
-  <div class="col-lg-4">
-    <p><img src="assets/img/home_industry.png" /></p>
-    <h3 align="center">For industrial partners who face challenges</h3>
-  </div>
-  <div class="col-lg-4">
-    <p><img src="assets/img/home_research.png" /></p>
-    <h3 align="center">For R&amp;D labs who need collaboration</h3>
-  </div>
-  <div class="col-lg-4">
-    <p><img src="assets/img/home_dev.png" /></p>
-    <h3 align="center">For developers to reach mastery</h3>
-  </div>
+<div class="col-4">
+  <div class="card bg-transparent"  >
+  <img src="assets/img/home_industry.png" />
+  <div class="card-body">
+    <h5 class="card-title">For industrial partners who face challenges</h5>
+
+   </div>
+</div>
+</div>
+<div class="col-4">
+  <div class="card bg-transparent"  >
+  <img src="assets/img/home_research.png" />
+  <div class="card-body">
+    <h5 class="card-title">For R&amp;D labs who need collaboration</h5>
+ 
+   </div>
+</div>
+</div>
+<div class="col-4">
+  <div class="card bg-transparent" >
+  <img src="assets/img/home_dev.png" />
+  <div class="card-body">
+    <h5 class="card-title">For developers to reach mastery</h5>
+ 
+   </div>
+</div>
+</div>
 </div>
 <br />
 <p align="center">
@@ -38,44 +53,44 @@ We cater to very specific needs. For example, we can translate a “black box”
 
 <br />
 <div class="row">
-  <div class="col-lg-3">
+  <div class="col-6 col-lg-3">
     <p><img class="img_products" src="assets/img/logo_opam.png"/></p>
     <h3 align="center"><a href="https://opam.ocaml.org">opam</a></h3>
     <p class="p_index_center">A highly scalable package manager</p>
   </div>
-  <div class="col-lg-3">
+  <div class="col-6 col-lg-3">
     <p><img class="img_products" src="assets/img/logo_ocaml.svg" /></p>
     <h3 align="center"><a href="https://ocaml-sf.org/learn-ocaml-public/#">Learn OCaml</a></h3>
     <p class="p_index_center">Exercise platform for teachers and learners around the world aiming to discover OCaml</p>
   </div>
-  <div class="col-lg-3">
+  <div class="col-6 col-lg-3">
     <p><img class="img_products" src="assets/img/logo_altergo.png" /></p>
     <h3 align="center"><a href="https://alt-ergo.ocamlpro.com/">Alt-Ergo</a></h3>
     <p class="p_index_center">An SMT solver for software verification</p>
   </div>
-  <div class="col-lg-3">
+  <div class="col-6 col-lg-3">
     <p><img class="img_products" src="assets/img/logo_dune_gimp.png"/></p>
     <h3 align="center"><a href="https://dunscan.io/">DunScan</a></h3>
     <p class="p_index_center">The Dune network explorer</p>
   </div>
 </div>
 <div class="row">
-  <div class="col-lg-3">
+  <div class="col-6 col-lg-3">
     <p><img class="img_products" src="assets/img/logo_love_gimp.png"/></p>
     <h3 align="center"><a href="https://dune.network/docs/dune-node-next/love-doc/reference/love.htmlo/">LOVE</a></h3>
     <p class="p_index_center">A smart-contract language for the Dune Network blockchain</p>
   </div>
-  <div class="col-lg-3">
+  <div class="col-6 col-lg-3">
     <p><img class="img_products" src="assets/img/logo_tezos.svg" /></p>
     <h3 align="center"><a href="https://en.wikipedia.org/wiki/Tezos">Tezos</a></h3>
     <p class="p_index_center">A blockchain with integrated governance</p>
   </div>
-  <div class="col-lg-3">
+  <div class="col-6 col-lg-3">
     <p><img class="img_products" src="assets/img/logo_solidity.png" /></p>
     <h3 align="center"><a href="https://gitlab.com/o-labs/solidity-parser-ocaml">Solidity parser</a></h3>
     <p class="p_index_center">A Solidity Parser in OCaml with Menhir</p>
   </div>
-  <div class="col-lg-3">
+  <div class="col-6 col-lg-3">
     <p><img class="img_products" src="assets/img/logo_tzscan_gimp.jpg"/></p>
     <h3 align="center"><a href="https://tzscan.io/">TZScan</a></h3>
     <p class="p_index_center">The Tezos network explorer</p>
@@ -119,56 +134,56 @@ We cater to very specific needs. For example, we can translate a “black box”
 <br />
 <br />
 <div class="row">
-  <div class="col-lg-2">
+  <div class="col-4 col-lg-2">
     <p><a href="https://www.janestreet.com"><img src="assets/img/logo_janestreet.svg" width="150"/></a></p>
   </div>
-  <div class="col-lg-2">
+  <div class="col-4 col-lg-2">
     <p><a href="https://www.samsung.com"><img src="assets/img/logo_samsung.svg" width="150"/></a></p>
   </div>
-  <div class="col-lg-2">
+  <div class="col-4 col-lg-2">
     <p><a href="https://www.mitsubishielectric-rce.eu/"><img src="assets/img/logo_merce.png" width="150"/></a></p>
   </div>
-  <div class="col-lg-2">
+  <div class="col-4 col-lg-2">
     <p><a href="https://www.adacore.com/"><img src="assets/img/logo_adacore.svg" width="150"/></a></p>
   </div>
-  <div class="col-lg-2">
+  <div class="col-4 col-lg-2">
     <p><a href="https://trust-in-soft.com/"><img src="assets/img/logo_trustinsoft.svg" width="150"/></a></p>
   </div>
-  <div class="col-lg-2">
+  <div class="col-4 col-lg-2">
     <p><a href="https://cryptosense.com/"><img src="assets/img/logo_cryptosense.png" width="150"/></a></p>
   </div>
 </div>
 <div class="row">
-  <div class="col-lg-2">
+  <div class="col-4 col-lg-2">
     <p><a href="https://www.inria.fr"><img src="assets/img/logo_inria.svg" width="150"/></a></p>
   </div>
-  <div class="col-lg-2">
+  <div class="col-4 col-lg-2">
     <p><a href="http://www-list.cea.fr"><img src="assets/img/logo_cealist.png" width="150"/></a></p>
   </div>
-  <div class="col-lg-2">
+  <div class="col-4 col-lg-2">
     <p><a href="https://www.lexifi.com"><img src="assets/img/logo_lexifi.svg" width="150"/></a></p>
   </div>
-  <div class="col-lg-2">
+  <div class="col-4 col-lg-2">
     <p><a href="https://www.bloomberg.com"><img src="assets/img/logo_bloomberg.svg" width="150"/></a></p>
   </div>
-  <div class="col-lg-2">
+  <div class="col-4 col-lg-2">
     <p><a href="https://www.facebook.com/"><img src="assets/img/logo_facebook.svg" width="150"/></a></p>
   </div>
-  <div class="col-lg-2">
+  <div class="col-4 col-lg-2">
     <p><a href="https://dune.network/"><img src="assets/img/logo_dune_network.svg" width="150"/></a></p>
   </div>
 </div>
 <div class="row">
-  <div class="col-lg-2">
+  <div class="col-4 col-lg-2">
     <p><a href="https://ocaml-sf.org/"><img src="assets/img/logo_fondation_ocaml.svg" width="150"/></a></p>
   </div>
-  <div class="col-lg-2">
+  <div class="col-4 col-lg-2">
     <p><a href="https://www.irill.org/"><img src="assets/img/logo_irill.png" width="150"/></a></p>
   </div>
-  <div class="col-lg-2">
+  <div class="col-4 col-lg-2">
     <p><a href="https://origin-labs.com/"><img src="assets/img/logo_origin_labs.svg" width="150"/></a></p>
   </div>
-  <div class="col-lg-2">
+  <div class="col-4 col-lg-2">
     <p><a href="https://systematic-paris-region.org/"><img src="assets/img/logo_systematic-paris-region.png" width="150"/></a></p>
   </div>
 </div>