Photoshop Question posted in
The official user guide can be found here.

Bootstrap toast moves all elements – Photoshop

I am developing a website and would like a bootstrap toast to appear in the top right corner which already happens however I would the toast to appear above the carousel but the toast instead moves all the elements and leaves a big gray area as show in the picture.

Screen Shot

I would like it to hover over the content as like the example in the placement section of https://getbootstrap.com/docs/4.3/components/toasts/

Here is the code for my toast:

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <div class="toast" style="position: absolute; top: 0; right: 0;" data-autohide="false">
    <div class="toast-header">
      <strong class="mr-auto">Bootstrap</strong>
      <small>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>
</div>

I hope someone can help:)

Edit:

To clarfiy this is what I would like to happen (photoshopped):

enter image description here

And this is what is happening:

enter image description here

Full code is below:

<html lang="en">

<head>
  <meta charset="utf-8">

  <title>Handmade Studios</title>
  <meta name="description" content="Handmade Studios is an independent game, logo, web, video and sound design corporation.">
  <meta name="author" content="Alexander Hawking">

  <link rel="stylesheet" href="styles.css">


  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

  <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

  <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">

</head>

<body style="background-color: #2D2D2D; font-family: 'Roboto', sans-serif;">
  <nav class="navbar navbar-expand-lg sticky-top navbar-dark" style="background-color: #212121;">
    <a class="navbar-brand" href="index.html" style="text-shadow: 0.2px 0 0 currentColor;">Handmade Studios</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#cards">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#projects">Projects</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#dave">Dave</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="contact.html">Contact</a>
        </li>
      </ul>
    </div>
  </nav>

  <div style="position: relative;">
    <div class="toast" data-autohide="false" style="position: absolute; top: 0; right: 0;">
      <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>

    <div class="bd-example" style="padding-bottom: 2vw">

      <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
          <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
          <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
          <li data-target="#carouselExampleCaptions" data-slide-to="3"></li>
          <li data-target="#carouselExampleCaptions" data-slide-to="4"></li>
          <li data-target="#carouselExampleCaptions" data-slide-to="5"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="logoslide.png" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
              <h1 style="text-shadow: 1px 0 0 currentColor;">Logo Design</h1>
              <p>Enquire below</p>
            </div>
          </div>
          <div class="carousel-item">
            <img src="videoslide.png" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
              <h1 style="text-shadow: 1px 0 0 currentColor;">Video Effects and Editing</h1>
              <p>Enquire below</p>
            </div>
          </div>
          <div class="carousel-item">
            <img src="musicslide.png" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
              <h1 style="text-shadow: 1px 0 0 currentColor;">Music Production</h1>
              <p>Check out my soundcloud</p>
            </div>
          </div>
          <div class="carousel-item">
            <img src="gameslide.png" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
              <h1 style="text-shadow: 1px 0 0 currentColor;">Game Design</h1>
              <p>Check out my itch</p>
            </div>
          </div>
          <div class="carousel-item">
            <img src="codeslide.png" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
              <h1 style="text-shadow: 1px 0 0 currentColor;">Web Design</h1>
              <p>Enquire below</p>
            </div>
          </div>
          <div class="carousel-item">
            <img src="photoslide.png" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
              <h1 style="text-shadow: 1px 0 0 currentColor;">Photo Editing</h1>
              <p>Enquire below</p>
            </div>
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>

  </div>

  <div class="container-fluid" id="cards">

    <div class="card-columns">
      <div class="card text-white" style="background-color: #702632">
        <blockquote class="blockquote card-body">
          <p>sheen estevez</p>
          <footer class="blockquote-footer">
            <small class="text-muted">
                            Me, <cite title="Source Title">the creator</cite>
                        </small>
          </footer>
        </blockquote>
      </div>

      <div class="card text-white " style="background-color: #40434E;">
        <img src="music.png" class="card-img-top" alt="music img">
        <div class="card-body">
          <h5 class="card-title">Music</h5>
          <p class="card-text">
            I am fairly new to music production but have put out a couple of tracks. I make mostly lofi so if you're into that go give them a listen and maybe even a like.
          </p>
          <a href="https://soundcloud.com/user-434058324" class="btn btn-dark">My Soundcloud</a>
        </div>
      </div>

      <div class="card text-white" style="background-color: #702632">
        <blockquote class="blockquote card-body">
          <p>The history of innovation is the story of ideas that seemed dumb at the time.</p>
          <footer class="blockquote-footer">
            <small class="text-muted">
                                <cite title="Source Title">Andy Dunn</cite>
                            </small>
          </footer>
        </blockquote>
      </div>

      <div class="card text-white " style="background-color: #40434E;">
        <img src="code.png" class="card-img-top " alt="code img">
        <div class="card-body">
          <h5 class="card-title">Web Design</h5>
          <p class="card-text">
            I can code you a website, a chrome extension or anything you might need. I use javascript, jQuery, python 2 and 3, html, CSS, SCSS and SASS. If you would like a website or anything programmable contact me.
          </p>
          <a href="contact.html" class="btn btn-dark">Enquire about a website</a>
        </div>
      </div>

      <div class="card" style="background-color: #702632">
        <blockquote class="blockquote card-body text-white">
          <p>The more you know, the less you don't know.</p>
          <footer class="blockquote-footer">
            <small class="text-muted">
                        An inspirational human from <cite title="Source Title">terra australis</cite>
                        </small>
          </footer>
        </blockquote>
      </div>

      <div class="card text-white " style="background-color: #40434E;">
        <img src="video.png" class="card-img-top" alt="video img">
        <div class="card-body">
          <h5 class="card-title">Video</h5>
          <p class="card-text">
            I have been editing videos for a number of years and can do everything from stop-motion to vfx and can do some basic 3D models. I use mainly after effects, premeire pro, stopmotion and various modelling programs. If you would like to me to help with your
            video project contact me.
          </p>
          <a href="contact.html" class="btn btn-dark">Enquire about a video</a>
        </div>
      </div>

      <div class="card text-white" style="background-color: #702632">
        <blockquote class="blockquote card-body">
          <p>I like smart jokes, I like dumb jokes, and I like dumb jokes done smartly.</p>
          <footer class="blockquote-footer">
            <small class="text-muted">
                                <cite title="Source Title">Mike Myers</cite>
                            </small>
          </footer>
        </blockquote>
      </div>


      <div class="card text-white " style="background-color: #40434E;">
        <img src="logo.png" class="card-img-top" alt="logo img">
        <div class="card-body">
          <h5 class="card-title">Logos</h5>
          <p class="card-text">
            I can design a beautiful logo for your business. I use adobe illustrator and photoshop and can also edit any photos. If you're interested in a logo contact me.
          </p>
          <a href="contact.html" class="btn btn-dark">Enquire about a logo</a>
        </div>
      </div>

      <div class="card text-white" style="background-color: #702632">
        <blockquote class="blockquote card-body">
          <p>Grass grows, birds fly, sun shines, and brother, I hurt people.</p>
          <footer class="blockquote-footer">
            <small class="text-muted">
                            Scout, <cite title="Source Title">TF2</cite>
                        </small>
          </footer>
        </blockquote>
      </div>

      <div class="card text-white" style="background-color: #40434E;">
        <img src="itch.png" class="card-img-top" alt="itch img">
        <div class="card-body">
          <h5 class="card-title">Games</h5>
          <p class="card-text">
            I have developed a number of games which are all available for download on itch.io. I have been developing games for about three years and have received over 1'200 downloads. All my games are available for free on itch but I won't complain if you want
            to donate.
          </p>
          <a href="https://alexanderhawking.itch.io/" class="btn btn-dark">My itch.io</a>
        </div>
      </div>

      <div class="card" style="background-color: #702632">
        <blockquote class="blockquote card-body text-white">
          <p>Here come the oct-train!</p>
          <footer class="blockquote-footer">
            <small class="text-muted">
                            Octane <cite title="Source Title">apex legends</cite>
                        </small>
          </footer>
        </blockquote>
      </div>


      <div class="card text-white" style="background-color: #40434E;">
        <img src="photo.png" class="card-img-top" alt="itch img">
        <div class="card-body">
          <h5 class="card-title">Photos</h5>
          <p class="card-text">
            I can edit your photos. Whether you just want a meme or a photo enhanced or edited I can help. If you want a photo edited contact me/
          </p>
          <a href="contact.html" class="btn btn-dark">Enquire about a photo</a>
        </div>
      </div>

    </div>

  </div>

  <div class="jumbotron" style="color: #EBEBEB; background-color: #232325;" id="projects">
    <h1 class="display-4">Current Projects <span class="badge badge-pill" style="background-color: #702632;">New</span></h1>
    <p class="lead">Here are some of the current things that I am workng on</p>
    <hr class="my-4">
    <div class="card-deck">

      <div class="card border-1" style="background-color:#212121; ">
        <img src="abl.png" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Learning Ableton Live 10</h5>
          <p class="card-text">Ableton Live 10 is a hard to use but powerful DAW. I have been using it for around a month and have made a couple of tracks which are on my soundcloud. Feel free to check them out and give me some feedback.</p>
          <a href="https://soundcloud.com/user-434058324" class="btn btn-dark">My Soundcloud</a>
        </div>
      </div>

      <div class="card border-1" style="background-color:#212121; ">
        <img src="website.png" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">This Website</h5>
          <p class="card-text">This website is still currently a work in progress and is built with bootstrap, html, css and a little bit of jQuery. If you have any recommendations contact me.</p>
          <a href="contact.html" class="btn btn-dark">Contact</a>
        </div>
      </div>
    </div>

  </div>

  <div class="jumbotron" style="color: #EBEBEB; background-color: #232325;" id="dave">
    <h1 class="display-4">Dave</h1>
    <p class="lead" style="font-style: italic;">The incredible assistant</p>
    <hr class="my-4">
    <div class="card-deck">

      <div class="card border-1" style="background-color:#212121; ">
        <img src="dave.png" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-text">Dave is a text-based personal assistant for your terminal built entirely in python 3 with a little bit off apple script. Dave was built to serve and can currently search Wikipedia, get the weather, solve maths equations and tell jokes. Further
            updates will include more capabilities. There is currently no way to download Dave but if you would like him installed on your computer contact me. <br><br>If you interested in anything coding related I have a stack overflow where you can
            aks questions, see the ones I've asked and the ones I've answered</h5>
          <a style="margin-top: 1vw;" href="https://stackoverflow.com/users/9868018/alex-hawking" class="btn btn-dark">My Stack Overflow</a>
        </div>
      </div>
    </div>

  </div>


  <div class="container-fluid" style="background-color: #373639; padding-top: 1.5vw; padding-bottom: 1.5vw; color: #74767E">
    <h6 class="text-center" style="font-style: italic;">Designed by Alex Hawking in Australia : Handmade Studios
    </h6>
  </div>


  <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>
  <script>
    $('.toast').toast('show');
  </script>
</body>

</html>

The above is the most recent snippet

Tags:

2

Answers


  1. 0

    You need to set style position: absolute; top: 0; right: 0; on outer element. And container of it should be position: relative.

    Snippet:

    $('#btn').click(function() {
  $('.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 style="background-color:red; position: relative; width: 500px; height: 300px;">
  <button id="btn">Open</button>


  <div class="toast" data-autohide="false" style="position: absolute; top: 0; right: 0;">
    <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>

</div>

    Update

    Make position of carousel element relative

    <div class="bd-example" style="padding-bottom: 2vw; position: relative;">

    And add toast to it.

    Snippet:

    <html lang="en">

<head>
    <meta charset="utf-8">

    <title>Handmade Studios</title>
    <meta name="description"
        content="Handmade Studios is an independent game, logo, web, video and sound design corporation.">
    <meta name="author" content="Alexander Hawking">

    <link rel="stylesheet" href="styles.css">


    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

    <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">

</head>

<body style="background-color: #2D2D2D; font-family: 'Roboto', sans-serif;">
    <nav class="navbar navbar-expand-lg sticky-top navbar-dark" style="background-color: #212121;">
        <a class="navbar-brand" href="index.html" style="text-shadow: 0.2px 0 0 currentColor;">Handmade Studios</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#cards">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#projects">Projects</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#dave">Dave</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="contact.html">Contact</a>
                </li>
            </ul>
        </div>
    </nav>

    <div style="position: relative;">
        <div class="toast" data-autohide="false" style="position: absolute; top: 0; right: 0;">
            <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>

        <div class="bd-example" style="padding-bottom: 2vw">

            <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
                    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
                    <li data-target="#carouselExampleCaptions" data-slide-to="3"></li>
                    <li data-target="#carouselExampleCaptions" data-slide-to="4"></li>
                    <li data-target="#carouselExampleCaptions" data-slide-to="5"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="logoslide.png" class="d-block w-100" alt="...">
                        <div class="carousel-caption d-none d-md-block">
                            <h1 style="text-shadow: 1px 0 0 currentColor;">Logo Design</h1>
                            <p>Enquire below</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="videoslide.png" class="d-block w-100" alt="...">
                        <div class="carousel-caption d-none d-md-block">
                            <h1 style="text-shadow: 1px 0 0 currentColor;">Video Effects and Editing</h1>
                            <p>Enquire below</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="musicslide.png" class="d-block w-100" alt="...">
                        <div class="carousel-caption d-none d-md-block">
                            <h1 style="text-shadow: 1px 0 0 currentColor;">Music Production</h1>
                            <p>Check out my soundcloud</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="gameslide.png" class="d-block w-100" alt="...">
                        <div class="carousel-caption d-none d-md-block">
                            <h1 style="text-shadow: 1px 0 0 currentColor;">Game Design</h1>
                            <p>Check out my itch</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="codeslide.png" class="d-block w-100" alt="...">
                        <div class="carousel-caption d-none d-md-block">
                            <h1 style="text-shadow: 1px 0 0 currentColor;">Web Design</h1>
                            <p>Enquire below</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="photoslide.png" class="d-block w-100" alt="...">
                        <div class="carousel-caption d-none d-md-block">
                            <h1 style="text-shadow: 1px 0 0 currentColor;">Photo Editing</h1>
                            <p>Enquire below</p>
                        </div>
                    </div>
                </div>
                <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>

    </div>

    <div class="jumbotron" style="color: #EBEBEB; background-color: #232325;" id="projects">
        <h1 class="display-4">Current Projects <span class="badge badge-pill"
                style="background-color: #702632;">New</span></h1>
        <p class="lead">Here are some of the current things that I am workng on</p>
        <hr class="my-4">
        <div class="card-deck">

            <div class="card border-1" style="background-color:#212121; ">
                <img src="abl.png" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Learning Ableton Live 10</h5>
                    <p class="card-text">Ableton Live 10 is a hard to use but powerful DAW. I have been using it for
                        around a month and have made a couple of tracks which are on my soundcloud. Feel free to check
                        them out and give me some feedback.</p>
                    <a href="https://soundcloud.com/user-434058324" class="btn btn-dark">My Soundcloud</a>
                </div>
            </div>

            <div class="card border-1" style="background-color:#212121; ">
                <img src="website.png" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">This Website</h5>
                    <p class="card-text">This website is still currently a work in progress and is built with bootstrap,
                        html, css and a little bit of jQuery. If you have any recommendations contact me.</p>
                    <a href="contact.html" class="btn btn-dark">Contact</a>
                </div>
            </div>
        </div>

    </div>

    <div class="jumbotron" style="color: #EBEBEB; background-color: #232325;" id="dave">
        <h1 class="display-4">Dave</h1>
        <p class="lead">The incredible assistant</p>
        <hr class="my-4">
        <div class="card-deck">

            <div class="card border-1" style="background-color:#212121; ">
                <img src="dave.png" class="card-img-top" alt="...">
                <div class="card-body">
                    <p class="card-text">Dave is a text-based personal assistan for your terminal built entirely in
                        python 3 with a little bit off apple script. Dave was built to serve and can currently search
                        wikipedia, get the weather, solve maths equations and tell jokes. Further
                        updates will include more capabilities. There is currently no way to download Dave but if you
                        would like him installed on your computer contact me. <br><br>If you interested in anything
                        coding related I have a stack overflow where you can
                        aks questions, see the ones I've asked and the ones I've answered</p>
                    <a href="https://stackoverflow.com/users/9868018/alex-hawking" class="btn btn-dark">My Stack
                        Overflow</a>
                </div>
            </div>
        </div>

    </div>


    <div class="container-fluid"
        style="background-color: #373639; padding-top: 1.5vw; padding-bottom: 1.5vw; color: #74767E">
        <h6 class="text-center" style="font-style: italic;">Designed by Alex Hawking in Australia : Handmade Studios
        </h6>
    </div>


    <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>
    <script>
        $('.toast').toast('show');
    </script>
</body>

</html>
    Login or Signup to reply.
  2. 0

    I was following the approach mentioned by @zmag and found my Toast was displaying behind another element.

    Here is an image of the issue I had
    Toast displaying behind element

    I found that by setting the z-index css property on the inner container element fixed this issue

    <div class="toast" data-autohide="false" style="position: absolute;top: 0; right: 0; z-index:1;">

    Z-index property

    The z-index property specifies the stack order of an element.

    An element with greater stack order is always in front of an element with a lower stack order.
    https://www.w3schools.com/cssref/pr_pos_z-index.asp

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search