Why does a Bootstrap col take the full width despite it saying col-md-4?-CodePudding

I tried to place contents of row impact-section in 3 columns with bootstrap. I see that the parent <div class="col-md-12"> is preventing columns from being created. How can I ensure contents of row impact-section are in 3 columns. Below is the entire section.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1 K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2 l" crossorigin="anonymous">

<div class="col-md-12">
  <div class="product-view product-page-area ">
    <div class="row impact-section">
      <div id="shopify-section-impact" class="shopify-section">
        <h2>Our Gifts Create an Impact</h2>
        <div class="col-md-4">
          <div><img src=""></div>
          <div>160,000</div>
          <div>Lives impacted last year across 28 states and 35 countries</div>
        </div>
        <div class="col-md-4">
          <div><img src=""></div>
          <div>30%</div>
          <div>Ratio of PwP's purveyor businesses that are female- and diverse-owned</div>
        </div>
        <div class="col-md-4">
          <div><img src=""></div>
          <div>50,000 </div>
          <div>Hours of training provided for youth and adults with employment barriers</div>
        </div>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

You were suppose to close the div here ,before starting the columns for each

    <div id="shopify-section-impact" class="shopify-section">
        <h2>Our Gifts Create an Impact</h2>
    </div>

Look at the code below,

    <div class="col-md-12">
        <div class="product-view product-page-area ">
            <div class="row impact-section">
                <div id="shopify-section-impact" class="shopify-section">
                    <h2>Our Gifts Create an Impact</h2>
                </div>
                <div class="col-md-4">
                    <div><img src=""></div>
                    <div>160,000</div>
                    <div>Lives impacted last year across 28 states and 35 countries</div>
                </div>
                <div class="col-md-4">
                    <div><img src=""></div>
                    <div>30%</div>
                    <div>Ratio of PwP's purveyor businesses that are female- and diverse-owned</div>
                </div>
                <div class="col-md-4">
                    <div><img src=""></div>
                    <div>50,000 </div>
                    <div>Hours of training provided for youth and adults with employment barriers</div>
                </div>
            </div>
        </div>
    </div>