CODEWITHSUNDEEP
javascriptjqueryhtmlcssbootstrap-4
Alex Hawking
Alex Hawking

Reputation: 1245

Bootstrap toast does not show up

I am developing a website in HTML using bootstrap and javascript. I am trying to add a toast using the following code from the bootstrap website:

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

But the toast does not show up as shown in the image. It just leaves a gap between the nav and the carousel.toast img.

I have imported all of these scripts from the bootstrap website:

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

And have put the following into my javascript document:

$('.toast').toast(option)

But still, nothing happens. I hope someone can help me out :)

Upvotes: 19

Views: 71040

Answers (5)

Oscar Stausholm
Oscar Stausholm

Reputation: 13

Might wanna consider using this library, it simplifies the use of toasts with bootstrap alot:

https://github.com/zhiftyDK/bootstrap-toast

Import:

<script src="https://zhiftydk.github.io/bootstrap-toast/bootstrap-toast.js"></script>

Create a new toast:

Toast class takes 3 arguments, title, body and color.

const toast = new Toast("Title", "Body", "blue");

Show toast:

Autohide (boolean), if true (default) the toast will hide automatically and if false the toast will stay on screen until manually hidden.

toast.show(autohide=true);

The toast can be hidden manually like this.

toast.hide();

Upvotes: 0

Paul Hermans
Paul Hermans

Reputation: 65

I tried this solution, but I get a JS error that "Uncaught ReferenceError: bootstrap is not defined" which appears to prevent the toaster from being shown.

The only difference I see is that I am am using bootstrap5 and it appears that the JQuery is no longer needed by bootstrap so it is not included in the base template.

What I do see in the base template after rendering is:

<head>
...
<link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" rel="stylesheet">
...
</head>

<body>
...
<toaster html goes here>
....
<script crossorigin="anonymous" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body

I don't know why bootstrap is undefined as the JS is clearly linked but then I am new to bootstrap so may have done something else wrong. I am using the django-bootstrap5 app and everything else seems to work fine.

Upvotes: 0

DanielAfriheart
DanielAfriheart

Reputation: 41

Firstly, you need to make the toast fixed to top or bottom, depending on where you want it.

<div role="alert" aria-live="assertive" aria-atomic="true" class="toast fixed-bottom m-5 ms-auto"
    data-bs-autohide="false">
    <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
        Hello, world! This is a toast message.
    </div>
</div>
<script>
    window.onload = (event) => {
        let myAlert = document.querySelector('.toast');
        let bsAlert = new bootstrap.Toast(myAlert);
        
        setTimeout(function () {
            bsAlert.show();
        }, 5000);
    };
</script>

Upvotes: 4

Obaidul Haque
Obaidul Haque

Reputation: 960

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<div class="toast" data-autohide="false">
    <div class="toast-header">
        <svg class=" rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
        <rect fill="#007aff" width="100%" height="100%" /></svg>
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">11 mins ago</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="toast-body">
    Hello, world! This is a toast message.
    </div>
</div>

You need to start " $(".toast").toast('show'); " when document is ready.

<script>
    $(document).ready(function() {
        $(".toast").toast('show');
    });
</script>

Upvotes: 5

random
random

Reputation: 7899

You need to put the valid option. i:e show, hide or a callback function. See - https://getbootstrap.com/docs/4.2/components/toasts/.

$('.toast').toast('show');
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img height="200px" width="200px" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

If you do not want to close the toast automatically, add data-autohide="false".

$('.toast').toast('show')
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="toast" data-autohide="false">
  <div class="toast-header">
    <svg class=" rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
                    <rect fill="#007aff" width="100%" height="100%" /></svg>
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Upvotes: 28

Related Questions