title: Offsetting columns in Bootstrap
body: <p>I am making a webpage using Bootstrap and I have seven logos I need to display in two rows. The top row with three logos and the bottom row with four logos. To look something like this: <img src="https://i.stack.imgur.com/S4REp.png" alt="enter image description here"></p>
  
  <p>I kind of have it like that now but it only stays like that when the screen in full width. It doesn't stack properly like how Bootstrap normally does when you begin to resize it. Here is the HTML I have:</p>
  
  <pre><code>    &lt;div class="row partners"&gt;
        &lt;!--Title--&gt;
        &lt;div class="col-md-12"&gt;
          &lt;h5 id="vp"&gt;
        VALUED PARTNERS
      &lt;/h5&gt;
      &lt;div class="underline"&gt;&lt;/div&gt;
    &lt;/div&gt;  
    &lt;div class="col-md-3 col-md-offset-1 "&gt;
      &lt;img class="img-responsive " alt="CEN logo" src="img/CEN_logo.png"&gt;
    &lt;/div&gt;
   &lt;div class="col-md-3 col-md-offset-1"&gt;
      &lt;img class="img-responsive" alt="Kinber logo" src="img/Kinber_logo.png"&gt;
    &lt;/div&gt;
     &lt;div class="col-md-3 col-md-offset-1 "&gt;
      &lt;img class="img-responsive" alt="NYSERNET logo" src="img/NYS_logo.png"&gt;
    &lt;/div&gt;
  
  
      &lt;div class="col-md-3 littlebit"&gt;
          &lt;img class="img-responsive" src="img/WISNET_logo.png" alt="WISCNET logo"&gt;      
      &lt;/div&gt;
      &lt;div class="col-md-3 littlebit"&gt;
          &lt;img class="img-responsive" src="img/NJEdge_logo.png" alt="NJedge logo"&gt;      
      &lt;/div&gt;
       &lt;div class="col-md-3 littlebit"&gt;
          &lt;img class="img-responsive" src="img/MCNC_logo.png" alt="MCNC logo"&gt;      
      &lt;/div&gt;
       &lt;div class="col-md-3 littlebitless"&gt;
          &lt;img class="img-responsive" src="img/GPN_logo.png" alt="Great Plains Network logo"&gt;      
      &lt;/div&gt;
  
    &lt;/div&gt; &lt;!--Partners--&gt;
  </code></pre>
  
  <p>And here is the CSS I have to go with it:</p>
  
  <pre><code>.littlebit{
      padding-right: 2%; 
      padding-left: 4%; 
      padding-bottom: 2%; 
      padding-top: 2%; 
  }
  .littlebitless{ 
      padding-left: 5%; 
      padding-bottom: 2%; 
      padding-top: 2%; 
  }
  .partners{
      margin-top: 3%;  
      border-style: solid; 
      border-width: 3px; 
      border-color: #7C7C7C; 
      padding-bottom: 7px; 
      padding-top: 5px; 
  }
  </code></pre>
  
  <p>The images should be centered on the page. My problem is getting the second row to be aligned to the first like the image shows. Thanks!</p>