AnswerBun.com

Bootstrap Toast at bottom right of page

Stack Overflow Asked by Sean Thorburn on December 22, 2020

I am looking for the most efficient way to display stacking Bootstrap 4 toasts at the bottom right of the page.

I haven’t been able to find any decent examples of how to do this online.

Currently I have them stacking from the top right.

<div aria-live="polite" aria-atomic="true" style={{ position: "relative" }}>
        <div style={{ position: "absolute", top: 0, right: 0, zIndex: 9999, float: "right" }}>
            {errors.map(function (error, index) {
                return (
                    <Toast key={index}>
                        <ToastHeader fade="true" icon="danger" aria-live="assertive" aria-atomic="true">
                            Error
                    </ToastHeader>
                        <ToastBody>{error}</ToastBody>
                    </Toast>
                );
            })
        }
        </div>
</div>

Any help will be appreciated.

One Answer

Remove relative from the parent div, and set bottom: 0...

   <div aria-live="polite" aria-atomic="true">
        <div style={{ position: "absolute", bottom: 0, right: 0, zIndex: 9999, float: "right" }}>
            {errors.map(function (error, index) {
                return (
                    <Toast key={index}>
                        <ToastHeader fade="true" icon="danger" aria-live="assertive" aria-atomic="true">
                            Error
                        </ToastHeader>
                        <ToastBody>{error}</ToastBody>
                    </Toast>
                )
            })
        }
        </div>
   </div>

https://codeply.com/p/PRg42pwASa

Correct answer by Zim on December 22, 2020

Add your own answers!

Related Questions

Choice on a list affects the following duplicated list

0  Asked on December 11, 2021 by mrtsm

     

How can I change server in spring boot application?

4  Asked on December 11, 2021 by vikram-shekhawat

       

How to modify ggplot2 legend keys?

3  Asked on December 11, 2021 by philippe-massicotte

     

Split JSON to multiple Objects

2  Asked on December 11, 2021 by marcio-lino

   

Angular/Typescript Text with routerLink

2  Asked on December 11, 2021 by dotnet

         

How to use multiple factors in na.aggregate() from zoo package

1  Asked on December 11, 2021 by shadrack-kibet

     

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP