title: Icon with text in a well Bootstrap 3
body: <p>I'm new to using bootstrap and I'm trying to customize a well with an icon on the left and some text on the right. In doing so, I want the div with the icon to have a green background like this:</p>
  
  <p><a href="https://i.stack.imgur.com/dYvSV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dYvSV.png" alt="The Icon on the left with green background and text on right"></a></p>
  
  <p>I've been able to get this but the green background on the icon div is not covering the whole area, possibly due to some padding issues. Can someone demonstrate this with an example?
  I've got this so far:  </p>
  
  <p><a href="https://i.stack.imgur.com/22XcJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/22XcJ.png" alt="progress"></a></p>
  
  <p>Here's the html:</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>.well {
    border-radius: 5px;
    border: 1.5px solid #D3D9E3;
    box-shadow: inset 0 0 10px 0 rgba(185, 194, 208, 0.41);
    margin: 30px 0;
    padding: 20px 15px;
    .well-text {
      overflow-wrap: break-word;
      word-wrap: break-word;
    }
    background-color: white;
    .well-icon {
      margin-right: 20px;
      //background-color: #98DDA6;
      img {
        width: 100px;
      }
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/&gt;
  
  &lt;div class="row"&gt;
    &lt;div class="col-sm-10 col-sm-offset-1"&gt;
      &lt;div class="well well-graphic"&gt;
        &lt;div class="well-icon hide-xs col-sm-2"&gt;
          &lt;svg class="icon icon-magnifying-glass-search"&gt;
                   &lt;use xlink:href="../assets/img/icons/symbol-defs.svg#icon-magnifying-glass-search"&gt;&lt;/use&gt;
                      &lt;/svg&gt;
        &lt;/div&gt;
        &lt;div class="col-sm-10"&gt;
          &lt;div class="well-text well-color"&gt;
            &lt;p&gt;The .well-graphic class is used for Callout Boxes w/ icon.
            &lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks in advance.</p>