title: Fitting an image inside a bootstrap column using flexbox
body: <p>I am currently making a grid system, 4 columns wide. I want to have a unique picture inside every column, but I have a issue that it doesnt fit, and when i try max-width: 100% the picture shrinks and gets really small. </p>
  
  <p>Here is my html code:</p>
  
  <pre><code> &lt;div class="row"&gt;
      &lt;div class="col-sm-3"&gt;
          &lt;img src="Bilder/test.jpg" class="img-responsive"&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-3"&gt;&lt;/div&gt;
      &lt;div class="col-sm-3"&gt;&lt;/div&gt;
      &lt;div class="col-sm-3"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS code:</p>
  
  <pre><code> /* parent */ .row { 
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      padding-left: 15%;
      padding-right: 15%; }
  
  /* child */ 
  
  .col-sm-3 {  
      width: 300px;
      height: 300px;
      padding: 7em;
      margin: 1%; /* important, margin between columns */ 
  
  
      color: #FFF;
      background-color: hsla(195, 60%, 50%, 1); }
  
  @media screen and (min-width: 500px) {
      .row {
          display: flex;
          flex-direction: row;
          padding-left: 15%;
          padding-right: 15%;  }
  </code></pre>
  
  <p>Example of how the column look after i added bootstrap class "img-responsive":</p>
  
  <p><a href="https://imgur.com/a/0WNiv" rel="nofollow noreferrer">https://imgur.com/a/0WNiv</a></p>