fixed Icon layout

app/templates/create_bookmark.html

@@ -5,6 +5,7 @@
       <div class="row d-flex justify-content-center align-items-center h-100">
         <div class="col col-xl-10">
           <div class="row g-0">
+            <!--------Bookmark Logo---------->
             <div class="col-md-6 col-lg-5 d-none d-md-block">
               <img
                 src="/static/logo/bookmark_logo.png"
@@ -12,6 +13,7 @@
                 style="width: 1000px;"
               />
             </div>
+            <!--------Create Bookmark form--------->
             <div class="col-md-6 col-lg-7 d-flex align-items-center">
               <div class="card-body p-4 p-lg-5 text-black">
 
@@ -20,17 +22,17 @@
                   <div class="d-flex align-items-center mb-3 pb-1">
                     <span class="h1 fw-bold mb-0">Create your bookmark</span>
                   </div>
-
+                  <!---------Input:Website Link--------->
                   <div class="form-outline mb-4">
                     <label class="form-label" for="web_link">Website Link</label>
                     <input type="text" name="web_link" class="form-control form-control-lg" />
                   </div>
-
+                  <!---------Input:Name--------->
                   <div class="form-outline mb-4">
                     <label class="form-label" for="web_name">Name  <b>(Up to 12 characters in length)</b></label>
                     <input type="text" name="web_name" maxlength="12" class="form-control form-control-lg" />
                   </div>
-
+                  <!---------Select Group or Input new Group--------->
                   <div class="form-outline mb-4">
                       <label class="form-label" for="web_group">Existing Groups  <b>(Up to 12 characters in length)</b></label><br>
                       <select name="web_group" style="height:47px" required aria-invalid="false"> 
@@ -41,7 +43,7 @@
                       </select>
                       <input type="text" name="new_group" maxlength="12" style='position:relative; left:20px; padding-right: 0px; height:47px;' placeholder="Name new group here"/>
                   </div>  
-                  
+                  <!---------Select Public Or Private Status--------->
                   <div class="form-outline mb-4">
                       <label class="form-label" for="share_public_private">Is this a Public or Private bookmark?</label><br>
                       <input type="radio" id="share_public_private" name="share_public_private" value="public" checked="checked" style="transform:scale(2);" >

app/templates/home.html

@@ -79,7 +79,6 @@ body{
     list-style-type: disc;
     text-align: left;
     list-style-type: none;
-    
 }
 .list_li_height {
     height: nowrap;
@@ -89,8 +88,11 @@ body{
 }
 
 .text_border {
-    border: 4px solid gray;
-    padding: 2px 0px 4px 0px;
+    padding: 1px 0px 1px 0px;
+    font-size: 14px;
+    position:absolute; left:90px; 
+    bottom:-1px;
+    border: 2px solid gray;
 }
 
 </style>
@@ -130,6 +132,7 @@ body{
                       </div>
                         </form>
                     </div>
+                    <!------  Change Username and Password ---------->
                     <form method="POST">
                         <div class="card-body">
                             <hr style="border: 3px solid rgb(177, 176, 176); width:327px; border-radius: 5px;">
@@ -170,18 +173,20 @@ body{
                 </div>
               </div>
             </div>
+            <!------  List of bookmarks you have created ---------->
             <div class="card">
                 <div class="container">
                     <div class="col-md-12">
                         <h2 class="text-center" style="padding-left:75px; padding-right:75px;">List of bookmarks you have created </h2>
                         <hr>
-                        <!------  List of bookmarks you have created ---------->
+                        <!------  Download bookmark button ---------->
                         <form method="POST" target="_blank">
                             <input name="dl_bookml"  value="dl_bookml" style="display:none;"/>
                             <button type="submit" class="btn btn-info">Download Bookmarks for backup</button>
                         </form>
                         <br>
                     </div>
+                    <!------  Bookmark list ---------->
                     <div class="row">
                     {% for bg, bml in bdic.items(): %}
                         <div class="col-md-6">
@@ -190,28 +195,29 @@ body{
                                     <h3 >{{ bg }}</h3>
                                     <hr>
                                     <!-- Code: Each Link in the Box-->
+                                    <!-------- Icon ---------->
                                     {% for bm in bml: %}
                                     <div class="row">
                                         <div class="col.md-4">
                                             <ul class="list">
                                                 <li><img src="static/sitecons/{{bm.icon}}" height=25 width=25> {{ bm.name }}</li>
                                         </div>
-                                        <div class="col.md-4" style="position:absolute; right:17px;">
-                                            <li class="href_link_button">
+                                        <!-------- Link/Delete/Status---------->
+                                        <div class="col.md-4">
+                                            <li class="href_link_button" style="position:absolute; right:125px;">
                                             <a href="{{ bm.link }}" TARGET="_BLANK">
                                             <img src="static/logo/link_logo.png"width="30" height="30">
                                             </a>
-                                            <form method="POST">
-                                                <input name="web_delete" value="{{bm.id}}" style="display:none;"/>
-                                            <button type="submit" class="btn btn-danger" style="padding: 3px; font-size: 6px; border-width: 3px;">Delete</button>
-                                            </form>
-                                            <b class="text_border"><i>{{ bm.status }}</i></b>
+                                                <form method="POST">
+                                                    <input name="web_delete" value="{{bm.id}}" style="display:none;"/>
+                                                <button type="submit" class="btn btn-danger" style="padding: 3px; font-size: 6px; border-width: 3px;position:absolute; left:35px; bottom:0px">Delete</button>
+                                                </form>
+                                            <b class="text_border btn-outline-secondary"><i>{{ bm.status }}</i></b>
                                             </li>
                                             </ul>
                                         </div>
                                     </div>
                                     {% endfor %}
-                                <!-- (End) Code: Each Link in the Box (End)-->
                                 </div>
                             </div>
                             <br>