title: Bootstrap Align One Large Image with Four Smaller Ones
body: <p>I am trying to make a webpage with Bootstrap. This is what I want it to look like:
  <img src="https://i.stack.imgur.com/sMfYi.png" alt="enter image description here"></p>
  
  <p>However I am having trouble getting the pictures to align. This is what I have so far:
  <img src="https://i.stack.imgur.com/AADxN.png" alt="enter image description here"></p>
  
  <p>I tried adding no padding and no margin to my columns but that didn't seem to do the trick. Here's the HTML I have so far: </p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-lg-8"&gt;&lt;img src="img/logo.png" class="img-responsive"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div style="margin-top:30px"&gt;&lt;/div&gt;
  
    &lt;div class="row"&gt;
    &lt;div class="col-lg-3 nopadding"&gt; &lt;img class="img-responsive" src="img/tagline.png"&gt;&lt;/div&gt;
    &lt;div class="col-lg-3 nopadding"&gt; &lt;img class="img-responsive" src="img/karen_big.png"&gt;&lt;/div&gt;
    &lt;div class="col-lg-6 nopadding"&gt;&lt;img class="img-responsive"src="img/don_big.png"&gt;&lt;/div&gt;
    &lt;div class="col-lg-3 nopadding"&gt;&lt;img class="img-responsive" src="img/elwood_big.png" style=""&gt;&lt;/div&gt;
    &lt;div class="col-lg-3 nopadding"&gt;&lt;img class="img-responsive" src="img/michigan.png"&gt;&lt;/div&gt;
    &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And here's the CSS I added for no padding and no margins:</p>
  
  <pre><code>.nopadding {
     padding: 0 !important;
     margin: 0 !important;
  }
  </code></pre>
  
  <p>Thanks in advance!</p>