<p dir="auto">Toastr is a simple but powerfull javascript library for displaying "Toast" message</p>
<p dir="auto">See here: <a href="http://codeseven.github.com/toastr/">http://codeseven.github.com/toastr/</a></p>
<p dir="auto">I'm not related in any way with toastr development, but actually it's not simple to use it while using bootstrap :(</p>
<p dir="auto">I know this is in the roadmap so just wanted to share some working code here even though it's not really in a point where I could commit a pull request as we are actively developing this functionality:</p>
<p dir="auto">bootstrap.growl.js</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="!function( $ ) {
  $.fn.growl = function ( flash, params ) {
    var growl   = this 
      , params  = params || {}
      , type    = params.text ? 'text' : 'html'
      , text    = growl.children('p').find('.text')
      , label   = growl.children('p').find('.label')
      , timeout = params.timeout || 5000
      ;

    function set_msg(severity,css,msg){
      label[type](severity);
      label.removeClass('important notice warning new');
      label.addClass(css);
      text[type](msg);
    }

    if(flash.error || flash.notice || flash.warning) {
       if (flash.error)        { set_msg('Error', 'important', flash.error);   }
       else if (flash.warning) { set_msg('Warning', 'warning', flash.warning); }
       else if (flash.info)    { set_msg('Info', 'notice', flash.notice);      }
       else if (flash.ok)      { set_msg('Ok', 'new', flash.ok);               }
       growl.show('fast');
       setTimeout(function() {
         growl.hide('slow');
       }, timeout);
    }
  };
}( window.jQuery || window.ender );"><pre class="notranslate"><span class="pl-c1">!</span><span class="pl-k">function</span><span class="pl-kos">(</span> <span class="pl-s1">$</span> <span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-s1">$</span><span class="pl-kos">.</span><span class="pl-c1">fn</span><span class="pl-kos">.</span><span class="pl-en">growl</span> <span class="pl-c1">=</span> <span class="pl-k">function</span> <span class="pl-kos">(</span> <span class="pl-s1">flash</span><span class="pl-kos">,</span> <span class="pl-s1">params</span> <span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">var</span> <span class="pl-s1">growl</span>   <span class="pl-c1">=</span> <span class="pl-smi">this</span> 
      <span class="pl-kos">,</span> <span class="pl-s1">params</span>  <span class="pl-c1">=</span> <span class="pl-s1">params</span> <span class="pl-c1">||</span> <span class="pl-kos">{</span><span class="pl-kos">}</span>
      <span class="pl-kos">,</span> <span class="pl-s1">type</span>    <span class="pl-c1">=</span> <span class="pl-s1">params</span><span class="pl-kos">.</span><span class="pl-c1">text</span> ? <span class="pl-s">'text'</span> : <span class="pl-s">'html'</span>
      <span class="pl-kos">,</span> <span class="pl-s1">text</span>    <span class="pl-c1">=</span> <span class="pl-s1">growl</span><span class="pl-kos">.</span><span class="pl-en">children</span><span class="pl-kos">(</span><span class="pl-s">'p'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">find</span><span class="pl-kos">(</span><span class="pl-s">'.text'</span><span class="pl-kos">)</span>
      <span class="pl-kos">,</span> <span class="pl-s1">label</span>   <span class="pl-c1">=</span> <span class="pl-s1">growl</span><span class="pl-kos">.</span><span class="pl-en">children</span><span class="pl-kos">(</span><span class="pl-s">'p'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">find</span><span class="pl-kos">(</span><span class="pl-s">'.label'</span><span class="pl-kos">)</span>
      <span class="pl-kos">,</span> <span class="pl-s1">timeout</span> <span class="pl-c1">=</span> <span class="pl-s1">params</span><span class="pl-kos">.</span><span class="pl-c1">timeout</span> <span class="pl-c1">||</span> <span class="pl-c1">5000</span>
      <span class="pl-kos">;</span>

    <span class="pl-k">function</span> <span class="pl-en">set_msg</span><span class="pl-kos">(</span><span class="pl-s1">severity</span><span class="pl-kos">,</span><span class="pl-s1">css</span><span class="pl-kos">,</span><span class="pl-s1">msg</span><span class="pl-kos">)</span><span class="pl-kos">{</span>
      <span class="pl-s1">label</span><span class="pl-kos">[</span><span class="pl-s1">type</span><span class="pl-kos">]</span><span class="pl-kos">(</span><span class="pl-s1">severity</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
      <span class="pl-s1">label</span><span class="pl-kos">.</span><span class="pl-en">removeClass</span><span class="pl-kos">(</span><span class="pl-s">'important notice warning new'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
      <span class="pl-s1">label</span><span class="pl-kos">.</span><span class="pl-en">addClass</span><span class="pl-kos">(</span><span class="pl-s1">css</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
      <span class="pl-s1">text</span><span class="pl-kos">[</span><span class="pl-s1">type</span><span class="pl-kos">]</span><span class="pl-kos">(</span><span class="pl-s1">msg</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>

    <span class="pl-k">if</span><span class="pl-kos">(</span><span class="pl-s1">flash</span><span class="pl-kos">.</span><span class="pl-c1">error</span> <span class="pl-c1">||</span> <span class="pl-s1">flash</span><span class="pl-kos">.</span><span class="pl-c1">notice</span> <span class="pl-c1">||</span> <span class="pl-s1">flash</span><span class="pl-kos">.</span><span class="pl-c1">warning</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
       <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">flash</span><span class="pl-kos">.</span><span class="pl-c1">error</span><span class="pl-kos">)</span>        <span class="pl-kos">{</span> <span class="pl-en">set_msg</span><span class="pl-kos">(</span><span class="pl-s">'Error'</span><span class="pl-kos">,</span> <span class="pl-s">'important'</span><span class="pl-kos">,</span> <span class="pl-s1">flash</span><span class="pl-kos">.</span><span class="pl-c1">error</span><span class="pl-kos">)</span><span class="pl-kos">;</span>   <span class="pl-kos">}</span>
       <span class="pl-k">else</span> <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">flash</span><span class="pl-kos">.</span><span class="pl-c1">warning</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-en">set_msg</span><span class="pl-kos">(</span><span class="pl-s">'Warning'</span><span class="pl-kos">,</span> <span class="pl-s">'warning'</span><span class="pl-kos">,</span> <span class="pl-s1">flash</span><span class="pl-kos">.</span><span class="pl-c1">warning</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span>
       <span class="pl-k">else</span> <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">flash</span><span class="pl-kos">.</span><span class="pl-c1">info</span><span class="pl-kos">)</span>    <span class="pl-kos">{</span> <span class="pl-en">set_msg</span><span class="pl-kos">(</span><span class="pl-s">'Info'</span><span class="pl-kos">,</span> <span class="pl-s">'notice'</span><span class="pl-kos">,</span> <span class="pl-s1">flash</span><span class="pl-kos">.</span><span class="pl-c1">notice</span><span class="pl-kos">)</span><span class="pl-kos">;</span>      <span class="pl-kos">}</span>
       <span class="pl-k">else</span> <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">flash</span><span class="pl-kos">.</span><span class="pl-c1">ok</span><span class="pl-kos">)</span>      <span class="pl-kos">{</span> <span class="pl-en">set_msg</span><span class="pl-kos">(</span><span class="pl-s">'Ok'</span><span class="pl-kos">,</span> <span class="pl-s">'new'</span><span class="pl-kos">,</span> <span class="pl-s1">flash</span><span class="pl-kos">.</span><span class="pl-c1">ok</span><span class="pl-kos">)</span><span class="pl-kos">;</span>               <span class="pl-kos">}</span>
       <span class="pl-s1">growl</span><span class="pl-kos">.</span><span class="pl-en">show</span><span class="pl-kos">(</span><span class="pl-s">'fast'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
       <span class="pl-en">setTimeout</span><span class="pl-kos">(</span><span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
         <span class="pl-s1">growl</span><span class="pl-kos">.</span><span class="pl-en">hide</span><span class="pl-kos">(</span><span class="pl-s">'slow'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
       <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-s1">timeout</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">(</span> <span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">jQuery</span> <span class="pl-c1">||</span> <span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">ender</span> <span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">Sample CSS</p>
<div class="highlight highlight-source-css notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=".growl     { padding: 10px; position: fixed; top: 5px; left: 50%;
             margin-left: -70px; background-color: rgba(0,0,0,0.5); z-index: 10; }
.growl p   { color: #fff; margin: 0px;}"><pre class="notranslate">.<span class="pl-c1">growl</span>     { <span class="pl-c1">padding</span><span class="pl-kos">:</span> <span class="pl-c1">10<span class="pl-smi">px</span></span>; <span class="pl-c1">position</span><span class="pl-kos">:</span> fixed; <span class="pl-c1">top</span><span class="pl-kos">:</span> <span class="pl-c1">5<span class="pl-smi">px</span></span>; <span class="pl-c1">left</span><span class="pl-kos">:</span> <span class="pl-c1">50<span class="pl-smi">%</span></span>;
             <span class="pl-c1">margin-left</span><span class="pl-kos">:</span> <span class="pl-c1">-70<span class="pl-smi">px</span></span>; <span class="pl-c1">background-color</span><span class="pl-kos">:</span> <span class="pl-en">rgba</span>(<span class="pl-c1">0</span><span class="pl-kos">,</span><span class="pl-c1">0</span><span class="pl-kos">,</span><span class="pl-c1">0</span><span class="pl-kos">,</span><span class="pl-c1">0.5</span>); <span class="pl-c1">z-index</span><span class="pl-kos">:</span> <span class="pl-c1">10</span>; }
.<span class="pl-c1">growl</span> <span class="pl-ent">p</span>   { <span class="pl-c1">color</span><span class="pl-kos">:</span> <span class="pl-pds"><span class="pl-kos">#</span>fff</span>; <span class="pl-c1">margin</span><span class="pl-kos">:</span> <span class="pl-c1">0<span class="pl-smi">px</span></span>;}</pre></div>
<p dir="auto">Sample HTML</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div id=&quot;growl&quot; class=&quot;growl round hero-shadow hide&quot;&gt;
  &lt;p&gt;
    &lt;span class=&quot;label important&quot;&gt;Error&lt;/span&gt;
    &lt;span class=&quot;text&quot;&gt;hey&lt;/span&gt;
  &lt;/p&gt;
&lt;/div&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">id</span>="<span class="pl-s">growl</span>" <span class="pl-c1">class</span>="<span class="pl-s">growl round hero-shadow hide</span>"<span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">p</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">span</span> <span class="pl-c1">class</span>="<span class="pl-s">label important</span>"<span class="pl-kos">&gt;</span>Error<span class="pl-kos">&lt;/</span><span class="pl-ent">span</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">span</span> <span class="pl-c1">class</span>="<span class="pl-s">text</span>"<span class="pl-kos">&gt;</span>hey<span class="pl-kos">&lt;/</span><span class="pl-ent">span</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;/</span><span class="pl-ent">p</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">Sample Invocation:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="$('#growl').growl({error: 'hey'}, {})"><pre class="notranslate"><span class="pl-en">$</span><span class="pl-kos">(</span><span class="pl-s">'#growl'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">growl</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-c1">error</span>: <span class="pl-s">'hey'</span><span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">Code and stuff is super lame but as said before we are trying to ship product and can't really focus on this right now. But still one could adapt this easily and make it into bootstrap with a decent quality.</p>