displaying fash message at the bottom

front/app/src/app/app.component.html

@@ -4,11 +4,11 @@
   <div class="container-fluid">
     <div class="row flex-nowrap">
       <div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0 bg-dark">
-        <sidenav></sidenav>
+        <sidenav class="sticky-top"></sidenav>
       </div>
       <div class="col py-3">
-        <flashmessages></flashmessages>
         <router-outlet></router-outlet>
+        <flashmessages></flashmessages>
       </div>
     </div>
   </div>

front/app/src/app/layout/flashmessages/flashmessages.component.html

@@ -1,3 +1,4 @@
+<div class="toast-container position-fixed bottom-0 end-0 p-3">
     <ngb-toast
       *ngFor="let flashmessage of flashmessagesService.toasts"
       [header]="flashmessage.type" [autohide]="true" [delay]="flashmessage.delay || 1500"
@@ -15,4 +16,4 @@
             </div>
         </ng-container>
     </ngb-toast>
-
+</div>