Allign bootstrap rows horizontally

|▌冷眼眸甩不掉的悲伤 提交于 2020-04-30 06:35:06

问题


I have created the following(in the image below) card layout using bootstrap the .card-columns class is adding my cards vertically so that i am loosing some part of the card. i want my cards alligned horizontally and exactly 3 cards per row without chaning the size of the card.

here is my code.

<body>
  <div class="card-columns">
  <?php
      $conn=new mysqli("localhost","root","","dbname");
          if(!$conn)
          {
            echo "connection_failed";
          }
          else{

          }
          $query= "select title,description,id from problems where difficulty='hard'";
          $result=mysqli_query($conn,$query);
          $num=mysqli_num_rows($result);
          if(mysqli_query($conn,$query)){

          }
          else{
        echo "Error: " . $query . "<br>" . mysqli_error($conn);
      }
        ?>

<?php 
  while ($row=mysqli_fetch_array($result)) { 
    $title=$row[0];
    $description=$row[1];
    $index=$row[2];
    ?>
    <div class="card-group">
  <div class="card bg-info">
    <div class="card-body">
      <h5 class="card-title" style="color:white;">Card title</h5>
      <p class="card-text" style="color: white;">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>
</body>
<?php }?>

来源:https://stackoverflow.com/questions/61480979/allign-bootstrap-rows-horizontally

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!