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,8 +1,9 @@
-<ngb-toast
+<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"
       (hiddden)="flashmessagesService.remove(flashmessage)"
->
+    >
         <ng-container [ngSwitch]="flashmessage.type">
             <div *ngSwitchCase="'Success'" class="alert alert-success" role="alert">
                 {{flashmessage.body}}
@@ -14,5 +15,5 @@
                 {{flashmessage.body}}
             </div>
         </ng-container>
-</ngb-toast>
-
+    </ngb-toast>
+</div>