My echo is destroying my div container / row

Question

So I want to show my posts with a variable and echo the html form out. The problem is, that I need

        <div class='container'>
        <div class='row'>

cause I want it to be displayed in a row. But cause every post got that div classes, it doesnt work and displays the posts completely wrong...

Moreover it shows my buttons "Loeschen" and "Bearbeiten" on top but it should be right below the text field.

How it should look:

How it actually looks now:

<?php   
        $ort = 'Beitr&auml;ge';
        include ("head.php");
        include("database.php");
        include("navigation.php");

?>
<!--Beitrage auflisten-->
<?php 

    $sql = "SELECT * FROM beitrag ORDER BY beitrag_id DESC";

    $res = mysqli_query($db, $sql) or die(mysqli_error());

    $beitrag = "";

    if(mysqli_num_rows($res) > 0) {
        while($row = mysqli_fetch_assoc($res)) { 
            $beitrag_id = $row['beitrag_id'];
            $titel = $row['titel'];
            $leistung = $row['leistung'];
            $bezugsort = $row['bezugsort'];
            $kosten = $row['kosten'];
            $p_text = $row['p_text'];



        $beitrag .= "  

        <div class='album py-5 bg-light'>
        <div class='container'>
        <div class='row'>
        <div class='col-md-4'>
          <div class='card mb-4 box-shadow'>
             <div class='card-header'>
                <a href='siehe_beitrag.php?pid=$beitrag_id'><h4 class='my-0 font-weight-normal'>$titel</h4></a
                <h4 class='my-0 font-weight-normal'>$kosten&euro;</h4 >
                </div>
                <div class='card-body'>
                    <p class='card-text'>$p_text</p>
                    <div class='d-flex justify-content-between align-items-center'>
              </div>
            </div>
          </div>
        </div>"; 


    if (isset($_SESSION["login"])){ 
                if($_SESSION["login"] == 1){
                    echo "  
                    <div class='btn-group' >
                            <a href='loeschen_beitrag.php?pid=$beitrag_id'>
                                <button type='button' class='btn btn-sm btn-outline-secondary'>Loeschen</button>
                            <a href='bearbeiten_beitrag.php?pid=$beitrag_id'>
                                <button type='button' class='btn btn-sm btn-outline-secondary'>Bearbeiten</button>
                            </div>";
                    }else{
                    echo "";
                }
            }





        }
        echo $beitrag;
    } else {
        echo "Keine Beiträge vorhanden ";
    }

    ?>  

    <a href='neuer_beitrag.php' target='_blank'>Neuer Beitrag</a>

The final version: Thanks to aynber and the others, now it works like I imagined it <3

Answer 1

You have two issues: 1) You aren't closing all of the div tags, and 2) you're creating a new container with a width of 4 columns for each row. You'll want to create a new container outside of the loop, and only close/reopen if there are more than 3 results:

if(mysqli_num_rows($res) > 0) {
    $i = 0; // Create a counter to see when to start a new row
    $beitrag .= "

            <div class='album py-5 bg-light'>
            <div class='container'>
            <div class='row'>";
    while($row = mysqli_fetch_assoc($res)) {
        $beitrag_id = $row['beitrag_id'];
        $titel = $row['titel'];
        $leistung = $row['leistung'];
        $bezugsort = $row['bezugsort'];
        $kosten = $row['kosten'];
        $p_text = $row['p_text'];


        $beitrag .= "

            <div class='col-md-4'>
                <div class='card mb-4 box-shadow'>
                    <div class='card-header'>
                        <a href='siehe_beitrag.php?pid=$beitrag_id'><h4 class='my-0 font-weight-normal'>$titel</h4></a
                        <h4 class='my-0 font-weight-normal'>$kosten&euro;</h4 >
                    </div>
                    <div class='card-body'>
                        <p class='card-text'>$p_text</p>
                        <div class='d-flex justify-content-between align-items-center'>
                        </div>
                    </div>";

        if(isset($_SESSION["login"]) && $_SESSION["login"] == 1) {
                $beitrag .= "
                        <div class='btn-group' >
                                <a href='loeschen_beitrag.php?pid=$beitrag_id'>
                                    <button type='button' class='btn btn-sm btn-outline-secondary'>Loeschen</button>
                                <a href='bearbeiten_beitrag.php?pid=$beitrag_id'>
                                    <button type='button' class='btn btn-sm btn-outline-secondary'>Bearbeiten</button>
                                </div>";

        }

        $beitrag .= "    </div>
            </div>";

        $i++;

        if($i % 3 == 0) { // 3 results in the div, start a new one
            $beitrag .= "
                </div>
              </div>
            </div>";
            $beitrag .= "

            <div class='album py-5 bg-light'>
            <div class='container'>
            <div class='row'>";
        }


    }

    if(($i - 1) % 3 != 0) { // It would have been closed on the last loop
        $beitrag .= "
                </div>
              </div>
            </div>";
    }

    echo $beitrag;
}