title: Informing div to look like boxes without distrubing Grids
body: <p>Greetings i am kinda new to boostrap, Anyhow, I am trying to Create is, Boxes to look like this (right side): </p>
  
  <p><img src="https://i.stack.imgur.com/mMQJ9.png" alt="Here"></p>
  
  <p>And so far i got nothing. i used padding but it mess up my grid system, what i did was give a <code>col-sm-8</code> for picture side and a <code>col-sm-4</code> for boxes however it is where it gets tricky it always mess my grid system. this is my html. could you help me out a little bit?</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-sm-8"&gt;
              &lt;img src="xxxx" /&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-4"&gt;
              &lt;div class="col-sm-6"&gt;
                  &lt;div style="background-color: grey; padding: 25px; text-align: center; vertical-align: middle"&gt;
                      Oven
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-6"&gt;
                  &lt;div style="background-color: grey; padding: 25px; text-align: center; vertical-align: middle"&gt;
                      Cookers
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-6"&gt;
                  &lt;div style="background-color: grey; padding: 25px; text-align: center; vertical-align: middle"&gt;
                      Microwave Ovens
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-6"&gt;
                  &lt;div style="background-color: grey; padding: 25px; text-align: center; vertical-align: middle"&gt;
                      Steamers
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-6"&gt;
                  &lt;div style="background-color: grey; padding: 25px; text-align: center; vertical-align: middle"&gt;
                      Cooker hoods
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-6"&gt;
                  &lt;div style="background-color: grey; padding: 25px; text-align: center; vertical-align: middle"&gt;
                      Hobs
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>