Apply Bootstrap cards to the Block Details page

apps/explorer_web/lib/explorer_web/templates/block_transaction/index.html.eex

@@ -1,10 +1,11 @@
-<section class="container__section">
+<section class="container-fluid">
-  <div>
+  <section>
     <h1><%= gettext("Block Details") %></h1>
-    <h2 data-test="block_detail_number"><%= @block.number %></h2>
+    <p data-test="block_detail_number"><%= @block.number %></p>
-  </div>
+
-  <div class="panels container__subsection">
+    <div class="card mb-3">
-    <div class="panels__container row">
+      <div class="card-body">
+        <div class="row">
           <div class="col-lg-6">
             <table class="table table-font table-responsive-sm table-horizontal">
               <tbody>
@@ -111,7 +112,10 @@
           </div>
         </div>
       </div>
-  <div>
+    </div>
+  </section>
+
+  <section>
     <ul class="nav nav-tabs">
       <li class="nav-item">
         <%= link(
@@ -121,9 +125,9 @@
             ) %>
       </li>
     </ul>
-  </div>
+
-  <div class="panels container__subsection">
+    <div class="card mb-3">
-    <div class="panels__container">
+      <div class="card-body">
         <table class="table table-responsive-sm table-font">
           <thead>
             <tr>
@@ -173,6 +177,7 @@
         </table>
       </div>
     </div>
+
     <div class="blocks__pagination">
       <%= pagination_links(
             @conn,
@@ -186,3 +191,4 @@
             view_style: :bulma
           ) %></div>
   </section>
+</section>