What is the method for adjusting the width of a Bootstrap 4 toast message?

I have a webpage featuring a Bootstrap 4 toast with the position set as position: fixed. The entire code snippet for the toast section is shown below:

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

To view the complete functioning code, refer to this JSFiddle link.

While the toast works perfectly as is, I now wish to adjust the width of the toast to approximately 50% of the viewport. I attempted setting the width property within the 

<div id="toastContainer"...
line:

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

Alternatively, I also tested setting left:

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

However, in both scenarios, only the horizontal position of the displayed toast changes, not its width.

What steps can be taken to adjust the width of this Bootstrap 4 toast accordingly?

csstwitter-bootstrapbootstrap-4css-positionwidth

Answer №1

The issue arises from the use of max-width on the .toast element, you should consider removing it by using unset.

After that, you can assign a 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="34565b5b40474046554474001a021a06">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7913080c1c0b00394a574e5748">[email protected]</a>/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b0d2dfdfc4c3c4c2d1c0f0849e869e82">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

Answer №2

I figured out a solution.

Are you familiar with bootstrap? There's a cool trick that allows you to adjust the length of elements by using a class called col-x (where x is between 1-12) within a div with the class row.

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

That's exactly what I did - simply added col-8 inside the button class. You can modify the number, but I found that 8 looked closer to 50% width than 6.

Additionally, you'll need a bit of CSS to center the button:

.row {
   display: flex;
   justify-content: center;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Obtaining two divisions that simultaneously display partials in a parallel manner

It's proving difficult to align two divs containing rendered partials side by side within a form. Strangely enough, when I replace the divs with plain text, they respond perfectly to my style changes. However, as soon as I include the render code, the ...

htmlcssruby-on-rails

Tips for managing content size in the Bootstrap column system

I am facing an issue with my bootstrap grid setup. I have a card with an image inside a column, but the card does not occupy the full width of the column. How can I fix this? View current state of my column I've experimented with adjusting the width ...

htmlcssbootstrap-5

Issue with jQuery's .height() method not updating

Here is the code I am working with: $(function() { $('#team-ch').click(function() { $('#team-camb-hert').height('auto'); }); }); I am trying to change the height of a div when a link is clicked. After adding an alert ...

javascriptjqueryhtmlcss

The Bootstrap Navbar dropdown list appears cluttered on desktops but remains tidy on mobile devices

I am encountering an issue because I haven't studied much about the design aspect. I am currently using a template from w3layouts.com under the Education section, specifically the Tutoring Template. This template is based on Bootstrap. The demo page ...

jqueryhtmlcsstwitter-bootstrap

What is the best way to have react-bootstrap's Dropdown automatically open when hovering your mouse over it?

Looking for a simple solution. I want the dropdown to open when hovering over it, rather than clicking on it. Here is my current code: <Nav> <NavDropdown onMouseEnter = {()=> isOpen=true} open={isOpen} noCare ...

javascriptcsstwitter-bootstrapreactjsweb

create a division in the organization of the identification numbers

Is there a way to always change pages when the id changes in a foreach loop to separate the printed pages? Take a look at this code snippet: var data = [ {Id: "552", valor: "50.00", Descricao: "Fraldas", }, {Id: "552", valor: "35.00", Descrica ...

javascripthtmlcss

Tips for adjusting the thickness of the next/prev icons in the Bootstrap carousel

Exploring the world of HTML/CSS and Bootstrap. There's a carousel with these previous/next buttons : <button class="carousel-control-prev" type="button" data-bs-target="#testimonials-carousel" data-bs-slide="prev ...

htmlcssbootstrap-5

Is Flash consistently positioned above the other elements? Can it be corrected using CSS

Hey there, I just uploaded a video from YouTube onto my website and noticed that the footer, which is fixed, is being overlapped by the video. Is there any way to resolve this issue? Perhaps some CSS tricks or hacks? Any assistance would be highly appreci ...

htmlcssflash

Tips for showcasing additional choices within a SELECT element while incorporating floating labels and adjusting the size

I'm struggling to make a floating label work smoothly with an HTML select that has a size="5" attribute using Bootstrap 5.3.x. It seems like it's not possible without some hacks or missing information from the Bootstrap documentation. According ...

htmlcssbootstrap-5

Do not engage with the website while animations are running

I'm working on a JavaScript project where I want to create textareas that grow and center in the window when clicked, and shrink back down when not focused. However, I ran into some issues with the .animate() function that are causing bugs. During QA ...

javascriptjquerycss

Customize the bootstrap carousel to show multiple slides at the same time

I am looking to customize the bootstrap 3 carousel in order to show multiple slides at once. I understand that I could place several thumbnails in a single slide (div .item), but the issue is that the carousel will progress through them all at once, moving ...

jquerycsstwitter-bootstraptwitter-bootstrap-3carousel

What is the best way to design distinct buttons for various devices?

For my current responsive web design project, I have utilized Bootstrap extensively. Recently, I encountered a new issue that I'm uncertain of how to tackle. The problem arises with the following HTML code snippet: <!-- button color depending on d ...

jquerycsstwitter-bootstrapresponsive-design

Error: The OOP class value for translateX in the Web Animation API is returning as undefined

I'm currently working on a basic animation project using JavaScript. I have utilized the Animation class from the Web Animation API. My goal is to create multiple instances of this class in order to animate different elements with varying values and r ...

javascriptcsscss-animationstypescriptweb-animations-api

JavaScript allows you to create matrices from squares

Hey everyone, I'm facing an issue with creating matrices in HTML. I need to display a 5x5 matrix where each index is represented by a square. I tried using a span template for the box and then wrote a script to populate the matrices, but it's no ...

javascripthtmlcssmatrix

Tips for shifting an image upwards and extending it beyond one section while keeping the other section unaffected

Struggling all day while designing a CSS site, trying to hide one part of an image when it overflows and keep another part visible, in addition to moving the image up and down. Here's the HTML code snippet: <section class="next-gen"&g ...

htmlcssbootstrap-5

Looking for a Search Field that clears default text when focused - Compatible with Firefox 3.6?

I have attempted various jQuery and JavaScript solutions found on this page: How to clear text field on focus of text field Surprisingly, all of the solutions work except for FF 3.6. So, I am wondering, What alternative can I use to make this feature com ...

javascriptjquerycssfirefox3.6

What could be causing the modal not to close in Laravel Livewire?

I am currently using Laravel Livewire to handle record deletions in two database tables. However, I have encountered an issue with the modal not closing properly after deletion is successful. Interestingly, when I comment out a line of code that deletes d ...

laravelbootstrap-4eloquentbootstrap-modallaravel-livewire

Customize the font size in Bootstrap 5 using REM units

When it comes to setting font sizes for easier calculations in REM values, I currently use this approach: html { font-size: 62.5%; } body { font-size: 1.6rem; } /* 16px */ However, Bootstrap 5 uses the root value (which is typically set at 62.5%) to calc ...

csssassbootstrap-5

Place the second division beneath the first within a single navigation bar that adjusts accordingly to all screen sizes

I am experiencing an issue with the layout of my page that has 2 divs within one nav element. When the screen width is greater than 1024px, everything looks fine. However, when I reduce the width to less than 768px, the two divs merge into one line instead ...

javascripthtmlcss

The font background color appears to be malfunctioning

body { margin: 0; background-color: white; background: linear-gradient(to right, #000000, #ffffff, #ffffff, #000000); line-height:25px; } h2{ color: black; text-align: center; display: block; font-family: 'Montserrat', san ...

htmlcssbackground-color