Home About
Toasts example docs/by Michał Duszak
  • Preview size
    Default Moto G4 Galaxy S5 Pixel 2 Pixel 2 XL iPhone 5/SE iPhone 6/7/8 iPhone 6/7/8 Plus iPhone X iPad iPad Pro Surface Duo Galaxy Fold
  • Settings
  • Change view
    standard view icon Standard view side view icon Side view project view icon Side-tab view Full screen view icon Full screen
  • HTML
  • CSS
  • JS
xxxxxxxxxx
 
1
<div
2
  class="toast fade mx-auto"
3
  id="basic-info-example"
4
  role="alert"
5
  aria-live="assertive"
6
  aria-atomic="true"
7
  data-mdb-autohide="true"
8
  data-mdb-delay="2000"
9
  data-mdb-position="top-right"
10
  data-mdb-append-to-body="true"
11
  data-mdb-stacking="true"
12
  data-mdb-width="350px"
13
  data-mdb-color="info"
14
>
15
  <div class="toast-header text-white">
16
    <strong class="me-auto">MDBootstrap</strong>
17
    <small>11 mins ago</small>
18
    <button type="button" class="btn-close btn-close-white" data-mdb-dismiss="toast" aria-label="Close"></button>
19
  </div>
20
  <div class="toast-body text-white">Info Basic Example</div>
21
</div>
22
​
23
​
1
 
1
​
xxxxxxxxxx
 
1
mdb.Toast.getInstance(document.getElementById('basic-info-example')).show();
Console errors: 0
Support
We use cookies to enhance your browsing experience, analyze traffic, serve ads, and personalize content in accordance with our Privacy Policy. Click 'Accept' to consent to our use of cookies.