Bootstrap 5_img-thumbnail Positionierung

[sabrinkel]

Ihr Lieben,

ich stehe auf dem Schlauch:

Ich würde gerne zwei Reihen mit je 3 Thumbnail-Bildern kreieren (alle haben als Ausgangslage die selbe Größe), welche von links nach rechts laufen.
Die erste Reihe funktioniert wunderbar.
Die zweite Reihe bricht nach unten hin in eine Spalte weg und jedes Bild wird dabei kleiner.
Dabei ist der Code genau der Gleiche......seht ihr was, was ich nicht sehe?

LG S

Ausschnitt Code (hängt aber auch noch als Anhang vollständig bei)

<main class="thumbnail-position">
<div class="container">
<h1 class="text-center text-dark">Die fünf Weltreligionen und mehr...</h1>

<!--Erste Reihe-->
<div class="row">
<div class="col-lg-4 mt-5">
<a href="#">
<img src="img/Bild_1.jpg" class="img-thumbnail" alt="#"/>
</a>

</div>
<div class="col-lg-4 mt-5">
<a href="#">
<img src="img/Bild_2.jpg" class="img-thumbnail" alt="#"/>
</a>

</div>
<div class="col-lg-4 mt-5">
<a href="#">
<img src="img/Bild_3.jpg" class="img-thumbnail" alt="#"/>
</a>

</div>
</div>

<!--Zweite Reihe-->
<div class="row">
<div class="col-lg-4">
<a href="#">
<img src="img/Bild_4.jpg" class="img-thumbnail" alt="#"/>
</a>

<div class="col-lg-4">
<a href="#">
<img src="img/Bild 5.jpg" class="img-thumbnail" alt="#"/>
</a>

<div class="col-lg-4">
<a href="#">
<img src="img/Bild_5.jpg" class="img-thumbnail" alt="#"/>
</a>

</div>
</div>
</main>

 

[Sempervivum]

Mein Editor bringt es sofort an den Tag: Da fehlen mehrere schließende </div> bei der zweiten Reihe. So wäre es richtig:

            <!--Zweite Reihe-->
            <div class="row">
                <div class="col-lg-4">
                    <a href="#">
                        <img src="../images/dia0.jpg" class="img-thumbnail" alt="#" />
                    </a>
                    <div class="caption">Untertitel 4</div>
                </div>
                <div class="col-lg-4">
                    <a href="#">
                        <img src="../images/dia0.jpg" class="img-thumbnail" alt="#" />
                    </a>
                    <div class="caption">Untertitel 5</div>
                </div>

                <div class="col-lg-4">
                    <a href="#">
                        <img src="../images/dia0.jpg" class="img-thumbnail" alt="#" />
                    </a>
                    <div class="caption">Untertitel 6</div>
                </div>
            </div>

 

[sabrinkel]

ok...ich male mir gerade eine Loch in den Boden und verschwinde ganz schnell.
Peeeeeiiiiinlich!
Danke!

Darf ich fragen mit welchem Editor du arbeitest?
Vielleicht sollte ich wechseln.
LG S

 

[Sempervivum]

Ich benutze Visual Studio Code, der zeigt jeden Fehler an, mit Erklärung beim Hover. Sehr zu empfehlen!