How to keep cards on the same line

Asked

Viewed 380 times

0

I created a foreach of objects to display the data of these objects in cards, worked the way I wanted, but appears only 1 card per line, how do I generate 2 cards per line ?

HTML

<div id="card-widgets">
              <div class="row">
                 <div class="col s4">
                 <!-- <ul id="task-card" class="collection with-header"> -->
                    <!-- <li class="collection-header light-blue"> -->

                           <!--PHP para buscar os anuncios > -->
                           <?php
                           include("../ibico/php/controller_class.php");
                            $anuncios = controler::getAnuncios();

                           ?>
                         <?php foreach ($anuncios as $anuncio) {?>  
                    <div class="card-content">


                                   <div id="profile-card" class="card">

                                    <!-- IMG> n mexer. waves-effect waves-block waves-light -->
                                    <div class="card-image"><a href="pganuncio.php">
                                        <img class="activator" src="img/hardware.png" alt="user background" width="150" height="200"></a>
                                    </div>

                                        <div align="center">
                                        <span class="card-title activator grey-text text-darken-4"><a href="pganuncio.php"><?php echo print_r($anuncio->nm_titulo); ?></a></span>
                                            <br><h7>Categoria:<h7>
                                            <h7><?php echo print_r($anuncio->nm_categoria); ?></h7></br>
                                            <br><h7>Estado:
                                            <h7><?php echo print_r($anuncio->nm_estado); ?></h7></br>   
                                            <br><h7>Cidade:<h7>
                                            <h7><?php echo print_r($anuncio->nm_cidade); ?></h7></br>
                                            <br><h7>Bairro:<h7>
                                            <h7><?php echo print_r($anuncio->nm_bairro); ?></h7></br>                                                                                                                                                    
                                           <br><h7>Descrição:<h7>
                                           <h7><?php echo print_r($anuncio->ds_anuncio); ?></h7></br>
                                           <br><h7>Data do Anúncio:<h7>
                                           <h7><?php echo print_r($anuncio->dt_criacao); ?></h7></br>



                                        </div>

                                        <div align="center" >


                                        <a href="javascript:void(0)" onclick="Avaliar(1)">
                                        <img src="img/star0.png" id="s1"></a>

                                        <a href="javascript:void(0)" onclick="Avaliar(2)">
                                        <img src="img/star0.png" id="s2"></a>

                                        <a href="javascript:void(0)" onclick="Avaliar(3)">
                                        <img src="img/star0.png" id="s3"></a>

                                        <a href="javascript:void(0)" onclick="Avaliar(4)">
                                        <img src="img/star0.png" id="s4"></a>

                                        <a href="javascript:void(0)" onclick="Avaliar(5)">

                                        <img src="img/star0.png" id="s5"></a>


                                        </div>

                                    </div>


                         </div>
                    <?php  } ?> 
                </div>

               </div>

1 answer

0

With Bootstrap you can do it this way:

Example taken from From here

<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.