title: bootstrap responsive image inside div
body: <p>basically what i need is:
  3 columns (for an example col-ms-4)
  inside each of the columns i need a div
  inside the div:
  the top half of the div an responsive image and the bottom <h2></h2> and <p>
  i cant manage to make the image half of the div and responsive</p>
  
  <pre><code> &lt;div class="col-sm-4"&gt;
                  &lt;div class="service-box"&gt;
                      &lt;img class="service-box-img img-responsive" src="something"&gt;
                      &lt;h2&gt;Header&lt;/h2&gt;
                      sdfsdfdfdsfsdfdsfdf
                  &lt;/div&gt;
               &lt;/div&gt;
  
  css:
  
   .col-sm-4{
              padding-left:100px;
                  padding-right:100px;
              height:300px;
  
          }
          .service-box{
              background-color:white;
              padding:30px;
              padding-left:100px;
          }
          .service-box-img{
  
              height:150px;
          }
  </code></pre>