rebuild the grid system

app/templates/home.html

@@ -7,6 +7,7 @@ body{
     text-align: left;
     background-color: #e2e8f0; 
     padding-top: 100px; 
+    font-size: 14px;
 
 }
 .main-body {
@@ -57,9 +58,13 @@ body{
     width: 80px;
     color:transparent;
 }
-ul {
-  list-style-type: none;
-  float: left;
+
+.bookmark_box_background_color {
+    background-color: #fff;
+    border-style: inset;
+    border-radius: .5rem;
+    background-image: url("static/logo/home_bookmark_logo.jpg");
+    background-repeat: repeat
 }
 
 .href_link_button
@@ -72,23 +77,28 @@ ul {
     vertical-align: middle;
     list-style-position: outside;
     list-style-type: disc;
-    margin-right: 1em;
     text-align: left;
-    white-space: nowrap;
     list-style-type: none;
 }
+.list_li_height {
+    height: nowrap;
+}
 .bull {
     display:list-item
 }
+
+.text_border {
+    border: 3px solid gray;
+}
+
 </style>
 
 <div class="mx-auto text-center">
 <!------  Profile Information ---------->
 <div class="container">
     <div class="main-body">
-        <p>Profile</p>
-          <div class="row gutters-sm">
-            <div class="col-md-4 mb-3">
+          <div class="row">
+            <div class="col-md-4">
               <div class="card">
                 <div class="card-body">
                   <div class="d-flex flex-column align-items-center text-center">
@@ -115,101 +125,96 @@ ul {
                             value="Upload"
                             src="http://example.com/path/to/image.png"
                         >
-                      </div> 
-                      <p>**Accept Only <b>PNG's</b>, <b>JPEG's</b>**</p>
-                    </form>
+                        <p>**Accept Only <b>PNG's</b>, <b>JPEG's</b>**</p>
+                      </div>
+                        </form>
                     </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-md-8">
-              <div class="card mb-3">
-                <form method="POST">
-                    <div class="card-body">
-                        <p><b>Change Username or Password</b></p><br>
-                        <div class="row">
-                            <div class="col-sm-3">
-                            <h6 class="mb-0"><label for="username">Username</label></h6><br>
-                            </div>
-                            <div class="col-sm-9 text-secondary">
-                                <input type="text" id="username" name="username"><br>
-                            </div>
-                        </div>
-                    <hr style="border: 1px solid rgb(177, 176, 176);"/>
-                        <div class="row">
-                            <div class="col-sm-3">
-                            <h6 class="mb-0"><label for="password">Password</label></h6><br>
-                            </div>
-                            <div class="col-sm-9 text-secondary">
-                                <input type="text" id="password" name="password"><br>
+                    <form method="POST">
+                        <div class="card-body">
+                            <hr style="border: 1px solid rgb(177, 176, 176);"/>
+                            <p><b>Change Username or Password</b></p><br>
+                            <div class="row">
+                                <div class="col-sm-3">
+                                <h6 class="mb-0"><label for="username">Username</label></h6><br>
+                                </div>
+                                <div class="col-sm-9 text-secondary">
+                                    <input type="text" id="username" name="username"><br>
+                                </div>
                             </div>
-                        </div>
-                    <hr>
-                        <div class="row">
-                            <div class="col-sm-3">
-                            <h6 class="mb-0"><label for="password_confirm">Password(Confirm)</label></h6><br>
+                        <hr style="border: 1px solid rgb(177, 176, 176);"/>
+                            <div class="row">
+                                <div class="col-sm-3">
+                                <h6 class="mb-0"><label for="password">Password</label></h6><br>
+                                </div>
+                                <div class="col-sm-9 text-secondary">
+                                    <input type="text" id="password" name="password"><br>
+                                </div>
                             </div>
-                            <div class="col-sm-9 text-secondary">
-                                <input type="text" id="password_confirm" name="password_confirm">
+                        <hr>
+                            <div class="row">
+                                <div class="col-sm-3">
+                                <h6 class="mb-0"><label for="password_confirm">Password<br>(Confirm)</label></h6><br>
+                                </div>
+                                <div class="col-sm-9 text-secondary">
+                                    <input type="text" id="password_confirm" name="password_confirm">
+                                </div>
                             </div>
-                        </div>
-                    <hr>
-                        <div class="row">
-                            <div class="col-sm-12">
-                                <input type="submit" value="Submit" class="btn btn-info"></a>
+                        <hr>
+                            <div class="row">
+                                <div class="col-sm-12">
+                                    <input type="submit" value="Submit" class="btn btn-info"></a>
+                                </div>
                             </div>
                         </div>
-                    </div>
-                </form>
+                    </form>
+                  </div>
+                </div>
               </div>
             </div>
-          </div>
-    </div>
-</div>
+                <div class="card col-xl-8">
+                    <div class="section-title">
+                        <h3 class="heading bold">List of bookmarks you have created</h3>
+                        <hr>
+                        <!------  List of bookmarks you have created ---------->
+                        <form method="POST">
+                            <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>
+                    <div class="row ">
+                        <!-- Code: Each Group of Box-->
+                        {% for bg, bml in bdic.items(): %}
+                <div class="col-md-5 bookmark_box_background_color list_li_height" style="left:59.5px">
 
-<!------  List of bookmarks you have created ---------->
-<form method="POST">
-    <input name="dl_bookml"  value="dl_bookml" style="display:none;"/>
-    <button type="submit" class="btn btn-info">Download Bookmarks</button>
-</form>
-<!------  The edit button of the page is edit_bookmark.html ---------->
-<div class="container">
-    <div class="row">
-        <div class="col-md-12 col-sm-12">
-            <div class="section-title">
-                <h1 class="heading bold">List of bookmarks you have created</h1>
-                <hr>
-            </div>
-        </div>
-        <!-- Code: Each Group of Box-->
-        {% for bg, bml in bdic.items(): %}
-        <div class="col-lg-4 col-md-4 col-sm-4">
-            <div class="inner_box">
-                <h3>{{ bg }}</h3>
-                <hr>
-                <!-- Code: Each Link in the Box-->
-                {% for bm in bml: %}
-                <ul class="list">
-                    <li><span class="bull">ICON {{ bm.name }} {{ bm.status }}</span></li>
-                    <li class="href_link_button">
-                        <a href="{{ bm.link }}">
-                            <img src="static/logo/link_logo.png"width="25" height="25">
-                        </a>
-                        <button type="submit">Edit</button>
-                    </li>
-                </ul>
+                    <div class="inner_box" >
+                        <h3>{{ bg }}</h3>
+                        <hr>
+                        <!-- Code: Each Link in the Box-->
+                        {% for bm in bml: %}
+                        <ul class="list">
+                            <li><span class="bull">(ICON)  {{ bm.name }} <b class="text_border"><i>{{ bm.status }}</i></b></span></li>
+                            <li class="href_link_button">
+                                <a href="{{ bm.link }}">
+                                    <img src="static/logo/link_logo.png"width="25" height="25">
+                                </a>
+                                <button type="submit">Edit</button>
+                            </li>
+                        </ul>
+                        {% endfor %}
+                        <!-- (End) Code: Each Link in the Box (End)-->
+                        <br>
+                    </div>
+
+                </div>
+                <!--(End) Code: Each Group of Box (End)-->
                 {% endfor %}
-                <!-- (End) Code: Each Link in the Box (End)-->
-                <br>
+                <div class="clearfix"></div>
             </div>
+            <div class="clearfix"></div>
+        </div>
         </div>
-        <!--(End) Code: Each Group of Box (End)-->
-        {% endfor %}
-        <div class="clearfix"></div>
     </div>
-    <div class="clearfix"></div>
-</div>
-<div class="clearfix"></div>
 </div>
+
 {% endblock %}