title: applying css ribbon on bootstrap 3 Jumbotron
body: <p>I have a bootstrap 3 Jumbotron where I am trying to apply a ribbon on the corner. Now grant it there are tons of samples of how to apply a css ribbon online, but not on a bootstrap 3 Jumbotron. I believe the classes are conflicting with the ribbon classes and I can not figure out why It just won't sit on the Jumbotron. see below</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.ribbon-wrapper-green {
  width: 180px;
  height: 172px;
  overflow: hidden;
  position: absolute;
  top: -4px;
  right: -4px;
  }
  
  .ribbon-green {
    font: bold 12px Sans-Serif;
    color: #333;
    text-align: center;
    text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
    -webkit-transform: rotate(45deg);
    -moz-transform:    rotate(45deg);
    -ms-transform:     rotate(45deg);
    -o-transform:      rotate(45deg);
    position: relative;
    padding: 7px 0;
    left: -5px;
    top: 45px;
    width: 235px;
    background-color: #BFDC7A;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); 
    background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45); 
    background-image:    -moz-linear-gradient(top, #BFDC7A, #8EBF45); 
    background-image:     -ms-linear-gradient(top, #BFDC7A, #8EBF45); 
    background-image:      -o-linear-gradient(top, #BFDC7A, #8EBF45); 
    color: #6a6340;
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
    -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
    box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
      white-space: nowrap;
  }
  
  .ribbon-green:before, .ribbon-green:after {
    content: "";
    border-top:   3px solid #6e8900;   
    border-left:  3px solid transparent;
    border-right: 3px solid transparent;
    position:absolute;
    bottom: -3px;
  }
  
  .ribbon-green:before {
    left: 0;
  }
  .ribbon-green:after {
    right: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;title&gt;Bootstrap Example&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="container"&gt;
    &lt;div class="ribbon-wrapper-green"&gt;&lt;div class="ribbon-green"&gt;The Flagship Programme of&lt;br /&gt;Aaaaa Aaaaaa Aaaaaaaaa&lt;/div&gt;&lt;/div&gt;
    &lt;div class="jumbotron"&gt;
    
      &lt;h1&gt;Bootstrap Tutorial&lt;/h1&gt;      
      &lt;p&gt;Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.&lt;/p&gt;
    &lt;/div&gt;
    &lt;p&gt;This is some text.&lt;/p&gt;      
    &lt;p&gt;This is another text.&lt;/p&gt;      
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>