Как верстать вот такую Bootstrap галлерею?

Question

[Demigodd]

Первой картинке задал 6 колонок, остальных по 3 колонки. Но они не идет в право.
В чем может быть проблема ?

Тык и да будет код.

Answer 1

[Павел Антонов]

а у тебя бутстрап не подключен в песочнице)) и для картинок еще нужно написать max-width: 100% иначе они накладываются друг на друга
исправил

Comments

[Demigodd]

Как вы их подключили ?)

[Павел Антонов]

в настройках песочницы в разделе CSS выбрал бутстрап

[Demigodd]

Павел Антонов, Странно...
Не знаю почему но ваш код не работает.
Можете проверить почему ? Вроде все написано как в CodePen, может там какая то своя особенная система ?
https://dropmefiles.com/WgMkh

Answer 2

[Dmitry Bay]

По-моему, вам структура в данном случае нужна такая , зачем внутри ставить дополнительные дивы?

если вам изначально неизвестные размеры и соотношение картинок, используйте параметр background-image

<div class="container py-4">
  <div class="row">
    <div class="col-md-6">
      <img  class="img-fluid"  src="" alt=""> 
    </div>
    <div class="col-md-3">
       <img class="img-fluid" src="https://www.w3schools.com/w3images/fjords.jpg" alt=""> 
      
      <img  class="img-fluid" src="https://www.w3schools.com/w3images/fjords.jpg" alt="">
    </div>
    
    <div class="col-md-3">
       <img class="img-fluid" src="https://www.w3schools.com/w3images/fjords.jpg" alt=""> 
      
      <img  class="img-fluid" src="https://www.w3schools.com/w3images/fjords.jpg" alt="">
    </div>
    
    
  </div>
</div>