Dmitry Bay

col-8 col-sm-6 col-md-8 col-lg-8 col-lx-10

наоборот классы сделайте.

https://gist.github.com/edwinwebb/4af6edeb743156e1...

Используйте json с RAL цветами. Реализация дальше зависит только от вашей фантазии.

Вам уже два ответа пришло, поэтому оформлю я в виде отдельного:

1) Если учитесь, то лучше 4.X. Во всяком случае в SO или здесь всегда вам ответят.
2) 3 версию уже многие не используют много лет. Даже начинать на ней учиться - плохо. В B4 много переосмысления было интересного и красивого.
3) в 5ой версии отвязались от Jquery. Я считаю это хорошо. И даст полноценный буст для работы с JS фреймворками.

Я если бы сейчас начинал писать - то писал бы на 5ой версии. Вопрос нескольких месяцев, когда мы получим релиз.

Если вы только изучаете bootstrap, попробуйте ознакомиться с практиками sass.
И внутри кода есть scss файлы, в scss/_variables.scss:137 строке как раз описываются отступы.

Это самый удобный способ работать с Bootstrap.

Выставляйте разные ID в двух табах.

id по правилам html должен быть уникален на странице.

col-md-3 не распространяет ширину тэгов ниже.
Смотрите правила наследования в вашем коде. Обычная же ссылка без классов будет тем размером, которым должна.

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

если вам изначально неизвестные размеры и соотношение картинок, используйте параметр 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>