css Question posted in
Some basic documentation can be found here.

Css – How can I set the width of a Bootstrap 4 toast?

I have a page with a Bootstrap 4 toast where I set the toast’s postion as postion: fixed. The whole toast part looks like this:

<div class="container mt-5">
  <button type="button" class="btn btn-primary" id="liveToastBtn">Toast it</button>
  <div id="toastContainer" style="position: fixed; top: 1.5vw; right: 1vw; bottom: 4.5vw; z-index: 9;">
    <div class="toast show" 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>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>
</div>

The full working code you find in this JSFiddle.

The works works great as is, but now I want to set the width of the toast to something around 50% of the view port. In the <div id="toastContainer"...> line I tried setting the width property:

  <div id="toastContainer" style="position: fixed; top: 1.5vw; width: 50%; right: 1vw; bottom: 4.5vw; z-index: 9;">

and alternatively I tried setting left:

  <div id="toastContainer" style="position: fixed; top: 1.5vw; left: 50%; right: 1vw; bottom: 4.5vw; z-index: 9;">

but in both cases the width of the appearing toast does not change (only its horizontal position).

How can I set the width of this Bootstrap 4 toast?

Tags:

2

Answers


  1. 0

    I found a way.

    I dont know if you are familiar with bootstrap but there is this things that makes you be able to "control" the length of things by putting a thing with class="col-x" (x is between 1-12) inside a div with class="row".

    <div class="row">
   <button type="button" class="btn btn-primary col-8" id="liveToastBtn">Toast it</button>
</div>

    As you can see thats what i did, just add the col-8 inside the class of the button, you can change it, but i found that 6 didnt look like 50% 8 is closer.

    Then you will need a bit of css to center the button :

    .row {
   display: flex;
   justify-content: center;
}
    Login or Signup to reply.
  2. 0

    The problem comes from the max-width applied to the .toast, you can unset it.

    Then you can set your width: 50vw; to the #toastContainer (or .toast).

    const toastEl = document.querySelector('.toast');
let toast = new bootstrap.Toast(toastEl, {
  autohide: false
})
const toastButton = document.getElementById("liveToastBtn")
toastButton.addEventListener("click", function() {
  console.log("Button was clicked!");
  toast.show()
});
    #toastContainer {
  width: 50vw;
}

#toastContainer .toast {
  max-width: unset;
}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<div class="container mt-5">
  <button type="button" class="btn btn-primary" id="liveToastBtn">Toast it</button>
  <div id="toastContainer" style="position: fixed; top: 1.5vw; right: 1vw; bottom: 4.5vw; z-index: 9;">
    <div class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
      <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>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search