tablas en los listados dentro de un card de bootstrap

curriculumsearch/src/main/webapp/jsp/cargos.jsp

@@ -20,7 +20,10 @@ contentType="text/html;charset=UTF-8" language="java" %>
             </form>
             <a href="/cargo">Agregar Nuevo Cargo</a>
           </div>
-          <div>
+          <div class="card text-dark bg-light mt-3">
+        
+            <div class="card-body">
+              <div class="table-responsive">
               <table class="table">
                 <thead>
                   <tr>
@@ -45,6 +48,7 @@ contentType="text/html;charset=UTF-8" language="java" %>
               </table>
               </div>
             </div>
+          </div>
           <div class="card-footer">
             <div>
               <nav aria-label="Page navigation example">
@@ -57,6 +61,7 @@ contentType="text/html;charset=UTF-8" language="java" %>
             </div>
           </div>
         </div>
+      </div>  
     </layout:put>
     <layout:put block="scripts" type="APPEND">
       <script>

curriculumsearch/src/main/webapp/jsp/convocatorias.jsp

@@ -27,8 +27,11 @@
                 <input type="submit" value="Buscar">
             </form>
         </div>
-        <div>
         <a href="/convocatoria">Agregar Nueva Convocatoria</a>
+        <div class="card text-dark bg-light mt-3">
+        
+            <div class="card-body">
+              <div class="table-responsive">
                 <table class="table">
                 <thead>
                   <tr>
@@ -57,7 +60,8 @@
                  
                 </tbody>
                 </table>
-             
+             </div>
+            </div>
         </div>
     </layout:put>
     <layout:put block="scripts" type="APPEND">

curriculumsearch/src/main/webapp/jsp/tecnologias.jsp

@@ -15,12 +15,16 @@
             </form>
             <a href="/tecnologia">Agregar Nueva Tecnologia</a>
         </div>
-        <div>
+        <div class="card text-dark bg-light mt-3">
+        
+          <div class="card-body">
+            <div class="table-responsive">
               <table class="table">
                   <thead>
                     <tr>
                       <th scope="col">#</th>
                       <th scope="col">Tecnologia</th>
+                      <th scope="col"></th>
                     </tr>
                   </thead>
                   <tbody>
@@ -30,7 +34,7 @@
                               <th scope="row">${sta.index+1}</th>
                               <td>${tecnologia.getNombre()}</td>
                             
-                            <td><a href="/tecnologia/${tecnologia.id}">Editar tecnologia</a></td>
+                              <td><a href="/tecnologia/${tecnologia.id}"><i class="bi bi-pencil-fill"></i></a></td>
                           </tr>
                       </c:forEach>
                       
@@ -39,6 +43,7 @@
                   </tbody>
               </table>
             </div>
+          </div>
           <div class="card-footer">
               <div>
                 <nav aria-label="Page navigation example">
@@ -51,6 +56,7 @@
               </div>
             </div>
         </div>
+        </div>
        
         
       </layout:put>