I've been working on my webpage but somehow bootstrap would not show it properly. Below is my code:

<div class="main-panel">
  <div class="content-wrapper">
    <button type="button" class="btn btn-primary btn-rounded btn-icon" data-toggle="modal" data-target="#newGroupModal">
           <i class="ti-plus"></i>
          </button>
    <div class="row">
      <form method="post">
        <?php
            foreach($data as $row) {
        ?>
          <div class="col-md-4">
            <div class="card-body">
              <div class="card">
                <img class="card-img-top" src="../../template/images/banner.png" alt="Card image cap">
                <div class="card-body">
                  <h5 class="card-title">
                    <?=$row['group_name']?>
                  </h5>
                  <p class="card-text"></p>
                  <a class="btn btn-primary" href="view_group.php?group_id=<?=$row['group_id']?>">View Group</a>
                </div>
              </div>
            </div>
          </div>
      </form>
      <?php } ?>
    </div>
  </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I want it to be 3 column in a row but I ended up like this:

Click here to view the picture

I'm not sure whats wrong with my code, if anybody could help me identify it would be great. Thank you so much

CodePudding user response：

<div class="main-panel">
  <div class="content-wrapper">
    <button type="button" class="btn btn-primary btn-rounded btn-icon" data-toggle="modal" data-target="#newGroupModal">
           <i class="ti-plus"></i>
          </button>
    <div class="row">
      
        <?php
            foreach($data as $row) {
        ?>
          <div class="col-4">
           <form method="post">
              <div class="card"> <div class="card-body">
                <img class="card-img-top" src="../../template/images/banner.png" alt="Card image cap">
                <div class="card-body">
                  <h5 class="card-title">
                    <?=$row['group_name']?>
                  </h5>
                  <p class="card-text"></p>
                  <a class="btn btn-primary" href="view_group.php?group_id=<?=$row['group_id']?>">View Group</a>
                </div>
              </div>
            </div>
            </form>
          </div>
      
      <?php } ?>
    </div>
  </div>
</div>

Explaination:

Change position of: <form> and <form>