Toast

Basic Toast
Show Code
                    
        <button id="basicToast" class="btn btn-primary btn-toast mr-2 mb-2" data-sticky="false" data-content="An unexpected error occured while trying to show you the toast! ..Just kidding, it is just a message, toast is right in front of you." data-heading="Note">Non Sticky Toast</button>
        <button id="basicToast" class="btn btn-primary btn-toast mb-2" data-sticky="true" data-content="An unexpected error occured while trying to show you the toast! ..Just kidding, it is just a message, toast is right in front of you." data-heading="Note">Sticky Toast</button>
                    
                  
HTML Toast
Show Code
                    
        <button id="htmlToast" class="btn btn-primary btn-toast mr-2" data-sticky="false" data-content="This toast have <a class='font-weight-bold' href='#'>HTML</a> tag." data-heading="Note">HTML Toast</button>
                    
                  
Styled Toast
Show Code
                    
        <button class="btn btn-primary btn-toast mr-2 mb-2" data-sticky="false" data-content="The primary color toast." data-heading="Primary" data-bg-color="#1c4aba" data-text-color="#ffffff">Primary Toast</button>
        <button class="btn btn-secondary btn-toast mr-2 mb-2" data-sticky="false" data-content="The secondary color toast." data-heading="Secondary" data-bg-color="#edf2f7" data-text-color="#616f80">Secondary Toast</button>
        <button class="btn btn-success btn-toast mr-2 mb-2" data-sticky="false" data-content="The success color toast." data-heading="Success" data-bg-color="#2db94d" data-text-color="#ffffff">Success Toast</button>
        <button class="btn btn-danger btn-toast mr-2 mb-2" data-sticky="false" data-content="The danger color toast." data-heading="Danger" data-bg-color="#dc3545" data-text-color="#ffffff">Danger Toast</button>
        <button class="btn btn-warning btn-toast mr-2 mb-2" data-sticky="false" data-content="The warning color toast." data-heading="Warning" data-bg-color="#ffc107" data-text-color="#212529">Warning Toast</button>
        <button class="btn btn-info btn-toast mr-2 mb-2" data-sticky="false" data-content="The info color toast." data-heading="Info" data-bg-color="#80bdff" data-text-color="#ffffff">Info Toast</button>
                    
                  
Toast Position
Show Code
                    
        <button class="btn btn-primary btn-toast mr-2 mb-2" data-sticky="false" data-content="The top-right toast." data-heading="Primary" data-position="top-right">Top Right Toast</button>
        <button class="btn btn-primary btn-toast mr-2 mb-2" data-sticky="false" data-content="The top-left toast." data-heading="Primary" data-position="top-left">Top Left Toast</button>
        <button class="btn btn-primary btn-toast mr-2 mb-2" data-sticky="false" data-content="The bottom-right toast." data-heading="Primary" data-position="bottom-right">Bottom Right Toast</button>
        <button class="btn btn-primary btn-toast mr-2 mb-2" data-sticky="false" data-content="The bottom-left toast." data-heading="Primary" data-position="bottom-left">Bottom Left Toast</button>