Bootstrap Divs unterschiedlich breit

Was meinst du genau mit

Zitat von Simuletsplay

[...] Alle Bilder müssen gleich groß ausgegeben werden.

?

Das ist ein wenig vage.

Meinst du in der Breite oder in der Höhe oder beides?
Soll dann das ganze Bild zu sehen sein, oder nur ein Ausschnitt?

• Wenn nur ein Ausschnitt zu sehen sein soll, welcher Ausschnitt soll es sein?
• Wenn das ganze Bild zu sehen sein soll, was soll an den Stellen zu sehen sein, an denen das Bild kleiner als der Rahmen ist?

Sollen auch alle Container gleich breit oder/und hoch sein?

Übrigens:
Schau mal in die Konsole. Ich bin schon bei 186437 Fehlern. Uncaught TypeError: Cannot set property 'textContent' of null at index3.php:425

Zitat von Simuletsplay

Also in der Datei gibt es gar keine 425 Zeilen...

Es geht um diese Zeile

document.addEventListener("DOMContentLoaded", () => {
  function counter(id, start, end, duration) {
    let obj = document.getElementById(id),
      current = start,
      range = end - start,
      increment = end > start ? 1 : -1,
      step = Math.abs(Math.floor(duration / range)),
      timer = setInterval(() => {
        current += increment;
        obj.textContent = current; // <- HIER ist obj null !
        if (current == end) {
          clearInterval(timer);
        }
      }, step);
  }

  // Wenn ich das richtig sehe, gibt es in deinem Script keine Element
  // mit den ids count1, count2 oder count3.
  counter("count1", 0, 5, 1500);
  counter("count2", 0, 15, 1500);
  counter("count3", 0, 283, 1500);
});

Zu deinem Problem:
Wenn ich das richtig verstehe, möchtest du, dass alle Bilder die gleiche Höhe haben, ausgehend von dem höchsten Bild.

Da sich die Höhe der Bilder an denen der Boxen orientiert, müssen dann auch alle Boxen gleich hoch sein.

Die Höhe einer Box orientiert sich an dem Textinhalt.

Du müsstest also

1. den Kompletten Textinhalt rendern.
2. Die höchste Box herausfiltern.
3. Diese Höhe auf alle anderen Boxen anwenden.

Dadurch sollten alle Bilder die gleiche höhe haben.

Bei sehr großen Boxen, kann es nur sein, dass man nicht mehr viel von den Bildern sieht, da der Ausschnitt zu eng ist.

Diese Idee höre ich das erste Mal und ich denke nicht, dass man das mit Bootstrap hinbekommt.

Ohne custom JavaScript, kommst du da wahrscheinlich nicht weit.

Nachtrag:
Ich habe gerade experimentiert, und herausgefunden, dass du das auch mit CSS Grid machen kannst:
(Also, dass jede Box die gleiche Höhe hat)
https://codepen.io/Mr_Beer/pen/JjRwjxX?editors=1100

Mit Bootsrap 4 geht das aber wohl nicht, grid ist erst ab Bootstrap 5 eingebaut.

Ich sehe da ein generelles Problem: Du hast die Breite des Textcontainers auf 66.66% eingestellt und die des Bildes auf 33.33%. Wenn man das Bild jetzt so einrichtet, dass es im Container bleibt und sich nicht nach rechts ausdehnt, wird es relativ klein und der Textcontainer ist viel höher. Ich habe das mal im HTML-Inspektor demonstriert:

html-seminar.de/woltlab/attachment/2806/

Macht man das Bild größer, z. B. 50% 50% für die beiden Container, wird es nicht besser, denn dann haben die Texte weniger Platz und nehmen noch mehr Höhe in Anspruch - die Katze beißt sich in den Schwanz. Auch wenn man die Abstände, die Du mit <br> eingestellt hast, verkleinern würde, würde es nicht viel besser.