Bootstrap grid does not show properly

November 11, 2021

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>

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

>Solution :

<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>