Не могу понять, как получить сетку 3х4 с помощью Bootstrap

Question

Я пытаюсь создать простую сетку элементов в квадрате для отображения изображений. У меня есть 12 изображений, которые мне нужно отобразить, поэтому я подумал о 4 рядах и 3 столбцах сетки, но безуспешно. Я пытался искать и смотреть учебники, но у меня ничего не работает. Я никогда не пробовал Bootstrap раньше.

Это то, что я пробовал до сих пор:

      <div class="container">
      <div class="row">
        <div class="col col-md-4"><img src="./Images/food/1.jpg" class="foodImage"></div>
        <div class="col col-md-4"><img src="./Images/food/1.jpg" class="foodImage"></div>
        <div class="col col-md-4"><img src="./Images/food/1.jpg" class="foodImage"></div>

        <div class="w-100"></div>
        <div class="col col-md-4"><img src="./Images/food/1.jpg" class="foodImage"></div>
        <div class="col col-md-4"><img src="./Images/food/1.jpg" class="foodImage"></div>
        <div class="col col-md-4"><img src="./Images/food/1.jpg" class="foodImage"></div>

        <div class="w-100"></div>
        <div class="col col-md-4"><img src="./Images/food/1.jpg" class="foodImage"></div>
        <div class="col col-md-4"><img src="./Images/food/1.jpg" class="foodImage"></div>
        <div class="col col-md-4"><img src="./Images/food/1.jpg" class="foodImage"></div>

        <div class="w-100"></div>
        <div class="col col-md-4"><img src="./Images/food/1.jpg" class="foodImage"></div>
        <div class="col col-md-4"><img src="./Images/food/1.jpg" class="foodImage"></div>
        <div class="col col-md-4"><img src="./Images/food/1.jpg" class="foodImage"></div>

      </div>
    </div>

  </div>

Answer 1

Ваш пример здесь работает нормально:

Codepen - пример

Может быть, вы не добавили в голову загрузочную таблицу стилей?

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">