Wie Text neben die Bilder (Bootstrap)

[SkyDefend]

Guten Abend,

ich versuche nun schon seit etlichen Stunden direkt neben die Bilder soetwas wie bei diesem Link einzubauen, jedoch schaffe ich es einfach nicht: https://www.elancer-team.de/team/

Kann mir da vielleicht jemand weiterhelfen?

<div class="row">
            <div class="col-lg-5 mb-5"><img src="../images/pic2/test.jpg" class="rounded-circle" alt="" width="200" height="200"></div>
            <div class="col-lg-2 mb-2"></div>
            <div class="col-lg-5 mb-5"><img src="../images/pic2/test.jpg" class="rounded-circle" alt="" width="200" height="200"></div>
            <div class="col-lg-5 mb-5"><img src="../images/pic2/test.jpg" class="rounded-circle" alt="" width="200" height="200"></div>
            <div class="col-lg-2 mb-2"></div>
            <div class="col-lg-5 mb-5"><img src="../images/pic2/test.jpg" class="rounded-circle" alt="" width="200" height="200"></div>
            <div class="col-lg-5 mb-5"><img src="../images/pic2/test.jpg" class="rounded-circle" alt="" width="200" height="200"></div>
        </div>

 

[Aaron3219]

Deine div-containern in deinem .row Container werden auch zu Flexboxen (also "row").

 

[Tronjer]

Eine row hat 12 column, keine 29.

 

[SkyDefend]

<!-- Seiteninhalt -->
    <div class="container">
    <br>
    <center><img class="img-fluid rounded mb-4" src="../images/komprimiert/startseite_new_transparent.png"></center>
    <br>
        <div class="row">
            <div class="col-lg-6 mb-6"><img src="../images/pic2/test.jpg" class="rounded-circle" alt="" width="200" height="200"></div>
            <div class="col-lg-6 mb-6"><img src="../images/pic2/test.jpg" class="rounded-circle" alt="" width="200" height="200"></div>
        </div><br>
        <div class="row">
            <div class="col-lg-6 mb-6"><img src="../images/pic2/test.jpg" class="rounded-circle" alt="" width="200" height="200"></div>
            <div class="col-lg-6 mb-6"><img src="../images/pic2/test.jpg" class="rounded-circle" alt="" width="200" height="200"></div>
        </div><br>
        <div class="row">
            <div class="col-lg-6 mb-6"><img src="../images/pic2/test.jpg" class="rounded-circle" alt="" width="200" height="200"></div>
            <div class="col-lg-6 mb-6"><img src="../images/pic2/test.jpg" class="rounded-circle" alt="" width="200" height="200"></div>
        </div><br><br><br><br><br>
        </div>
    
    <!-- Seitenende -->

Ich habe das mit der row jetzt korrigiert, habe ich total übersehen, jedoch verstehe ich nicht ganz was mit den Flexboxen gemeint ist, bzw.. wie ich es dann hinbekomme, dass der Text rechts neben dem Bild steht, ich kriege es nur drüber oder drunter :/

 

[Aaron3219]

"The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning."
https://www.w3schools.com/css/css3_flexbox.asp

Was die Klasse "row" macht ist, dass sie den Container zu einer Flexbox macht.
Was die Flexboxen alles können, kannst du dir grob im obigen Link anschauen, es gibt aber auch ausführliche Tutorials dafür.

Des Weiteren hast du anscheinend nicht ganz verstanden.
Was ich meinte war, dass die Wrapper für die Bilder, also:

<div class="col-lg-5 mb-5"><img src="../images/pic2/test.jpg" class="rounded-circle" alt="" width="200" height="200"></div>

Diese Div-container müssen die Klasse "row" bekommen. Warum, sollte dir klar werden, wenn du die Grundlagen von CSS und HTML kennst und dir Flexboxen angeschaut hast.

Noch ein paar Anmerkungen:
Du brauchst keine <br>-Tags.
Div-Container sind von sich aus untereinander ausgerichtet, sofern du keine Technik verwendest, um sie in einer Reihe darzustellen (Bsp.: Float und Flexbox).

Der <center>-Tag ist veraltet. Das wird mittlerweile mit CSS (z.B. Flexboxen) gemacht.

<br><br><br><br><br>

Das hier sieht mir stark danach aus, als wenn du hier auf CSS verzichten willst. Es ist aber definitiv empfehlenswert hier ein margin oder padding zu setzen, je nachdem was du brauchst.

Wie du siehst, kannst du mit Flexboxen fast deine komplette Seite layouten. Schau sie dir also genau an. Und bitte nicht nur Bootstrap lernen, sondern auch das, was dahinter steckt, nämlich CSS.