adding bootstrap flex classes

Author: subhangi2731

src/mote/static/css3/fragment.css

@@ -190,7 +190,4 @@ hr {
     text-transform: none;
 
   }
-  
-  .form-check-input {
-    margin-left: 780px;
-  }
+  

src/mote/templates/mainpage.html

@@ -58,7 +58,7 @@
                             </a>
                         </li>
                         <li class="nav-item">
-                            <a class="nav-link" type="button" href="#">
+                            <a class="nav-link" type="button" href="/teams">
                                 Meetings by Group
                             </a>
                         </li>

src/mote/templates/teams.html

@@ -64,7 +64,7 @@
                         </a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link" type="button" href="#">
+                        <a class="nav-link" type="button" href="">
                             Meetings by Group
                         </a>
                     </li>
@@ -94,17 +94,17 @@
                 <div class="mt-4">
                     <br><br>
                     <div class="checkbox">
-                        <div class="d-flex">
-                            <div class="p-2 flex-fill "> <i class="fa fa-users" aria-hidden="true"></i> Meetings by Group</div>
-                            <div class="p-2 flex-fill"> <input class="form-check-input" type="checkbox"> Hide inactive</div>
+                        <div class="d-flex justify-content-between">
+                        <div><i class="fa fa-users" aria-hidden="true"></i> Meetings by Group</div>
+                        <div><input class="form-check-input" type="checkbox"> Hide inactive</div>
                         </div>
                     </div>
                 </div>
             </div>
                     <br><br>
                     <div class="card">
                         <div class="card-header">
-                            23 Groups
+                            {{ teamdata|length }} Groups
                         </div>
                         <table class="table">
                             <tbody>
@@ -117,8 +117,8 @@
                                         </item>
                                         <div class="btn-group" role="group"
                                             aria-label="Basic checkbox toggle button group">
-                                            <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
-                                            <label class="btn btn-outline-primary" for="btncheck1"><i
+                                            <input type="checkbox" class="btn-check" autocomplete="off">
+                                            <label class="btn btn-outline-primary" ><i
                                                     class="far fa-calendar-alt"></i> 15 Nov 2021</label>
                                         </div>
                                     </td>