title: How to make divs have the same height using flexbox properties?
body: <p>how to align the height of each column to make them all equal ? I followed the rules from the page: <a href="https://www.w3schools.com/howto/howto_css_equal_height.asp" rel="nofollow noreferrer">https://www.w3schools.com/howto/howto_css_equal_height.asp</a>, using the properties <code>display:flex</code> and <code>flex: 1</code>, but unfortunately this does not work in my case. Is it affected by the fact that each of these columns is additionally wrapped in bootstrap classes <code>col-12 col-lg-3</code> ?</p>
  <p>HTML code:</p>
  <pre><code>&lt;section class=&quot;bg-bright container-fluid text-center px-4 py-5&quot;&gt;
    &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-12 col-lg-3&quot;&gt;
        &lt;div class=&quot;cards&quot;&gt;
          &lt;div class=&quot;cards__body&quot;&gt;
            &lt;img src=&quot;&lt;?php echo get_theme_file_uri( 'assets/img/dzieło.png' ); ?&gt;&quot; class=&quot;cards__img img-fluid&quot; alt=&quot;...&quot;&gt;
            &lt;p class=&quot;cards__text&quot;&gt;Kompleksowa obsługa klienta&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-12 col-lg-3&quot;&gt;
        &lt;div class=&quot;cards&quot;&gt;
          &lt;div class=&quot;cards__body&quot;&gt;
            &lt;img src=&quot;&lt;?php echo get_theme_file_uri( 'assets/img/dzieło.png' ); ?&gt;&quot; class=&quot;cards__img img-fluid&quot; alt=&quot;...&quot;&gt;
            &lt;p class=&quot;cards__text&quot;&gt;Dbałość o najmniejsze detale&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-12 col-lg-3&quot;&gt;
        &lt;div class=&quot;cards&quot;&gt;
          &lt;div class=&quot;cards__body&quot;&gt;
            &lt;img src=&quot;&lt;?php echo get_theme_file_uri( 'assets/img/dzieło.png' ); ?&gt;&quot; class=&quot;cards__img img-fluid&quot; alt=&quot;...&quot;&gt;
            &lt;p class=&quot;cards__text&quot;&gt;Komfort obsługi urządzeń&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-12 col-lg-3&quot;&gt;
        &lt;div class=&quot;cards&quot;&gt;
          &lt;div class=&quot;cards__body&quot;&gt;
            &lt;img src=&quot;&lt;?php echo get_theme_file_uri( 'assets/img/dzieło.png' ); ?&gt;&quot; class=&quot;cards__img img-fluid&quot; alt=&quot;...&quot;&gt;
            &lt;p class=&quot;cards__text&quot;&gt;Funkcjonalność&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  <p>CSS code:</p>
  <pre><code>.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--bs-gutter-y) * -1);
    margin-right: calc(var(--bs-gutter-x)/ -2);
    margin-left: calc(var(--bs-gutter-x)/ -2);
  }
  
  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  
  .cards {
    display: flex;
    width: 100%;
    align-items: stretch;
  }
  
  .cards__body {
    background-color: red;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 8px 20px 0px;
    flex: 1;
  }
  
  .cards__text {
    color: #333;
    font-size: 17px;
    font-weight: 700;
    padding: 1rem;
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/nwwN0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nwwN0.png" alt="enter image description here" /></a></p>