Bootstrap Grid

Dafür braucht es wohl JavaScript. Bei einem Klick auf ein kleines Bild wird der Inhalt des src Attributs (ggf. erweitert) auf das src Attribut des Hautpbildes übertragen. Ich selbst arbeite selten mit Bootstrap - gibt es dafür vielleicht ein Thumbnail-Plugin?

Man kann so eine einfache Funktionalität aber auch selbst coden. Wie sieht denn das HTML aus und kommt irgendein JavaScript-Framework wie jquery zum Einsatz?

Für ein Grid braucht man heutzutage kein Bootstrap mehr, die aktuellen Browser unterstützen alle das CSS-Grid. Eine schöne Übersicht findet sich auf dieser Seite:

https://css-tricks.com/snippets/css/complete-guide-grid/

Im Abschnitt grid-template-areas ist erklärt, wie man verschiedene Bereiche definieren kann. Falls es sich bei dir immer um genau acht Bilder handelt, wäre dies vielleicht eine Option. Die Frage hierbei ist noch, wie soll das ganze auf kleineren Bildschirmbreiten ausschauen? die einzelnen grid-areas könntest du bei schmaleren Viewports und entsprechenden Media Queries einfach anders anordnen.

Alternativ kannst du das ganze aber auch mit ineinander verschachtelten Flexboxen umsetzen.

Vielleicht findest du auch noch ein Webseite mit so einem Aufbau, so dass man sich die ungefähre Umsetzung von dort abschauen kann.

Sobald das Layout stimmt, kann in einem zweiten Schritt die Funktionalität mit JavaScript hinzugefügt werden.

Also so wie hier:

https://jsfiddle.net/SxcqH/52/

d.h. bei schmaleren Bildschirmbreiten soll das große Bild oberhalb der Vorschaubilder angezeigt werden? ist so eine Anordnung auf kleineren Bildschirmen überhaupt sinnvoll, wenn sich z.B. das große Bild schon (teilweise) außerhalb des Viewports befindet?