There is the following block: enter image description here

And everything would seem fine, but by enclosing a block with images of goods in the <div> we get the following:

enter image description here

What is the reason and how can this be corrected?

Markup:

  <div> <div class="col-lg-4"> <img src="img/production/napoleon.png" alt=""> <p>НАПОЛЕОН</p> </div> <div class="col-lg-4"> <img src="img/production/choco.png" alt=""> <p>ШОКОЛАДНЫЙ</p> </div> <div class="col-lg-4"> <img src="img/production/medovik.png" alt=""> <p>МЕДОВИК</p> </div> </div>
  • one
    because the wrapper in this case requires the class row - humster_spb
  • Horror, and why in the 3rd bootstrap this was not? - user287060
  • well, there strictly speaking, row was required too, just the 3rd bootstrap on floats — there the wrapper is not so critical, and the 4th on flexes — here without a wrapper anywhere — humster_spb

1 answer 1

Add a div two classes row and d-flex , or use the code that is written below:

 .wrapp { display: flex; } .img { width: 300px; height: 300px; background: #000; } .col-lg-4 { width: 25%; } 
 <div class="wrapp"> <div class="col-lg-4"> <div class="img"></div> <p>НАПОЛЕОН</p> </div> <div class="col-lg-4"> <div class="img"></div> <p>ШОКОЛАДНЫЙ</p> </div> <div class="col-lg-4"> <div class="img"></div> <p>МЕДОВИК</p> </div> </div>