Publicando 3 <div> com Bootstrap

Frank K Hosaka · Novembro 22, 2022

Ontem eu vi um rapaz no Fórum PHP Imasters tentando publicar 3 <div>, uma do lado da outra, com a ajuda do loop do PHP. Eu achei a ideia muito bacana, mas achei pouco provável conseguir tal proeza, assim eu peguei um exemplo do código CSS do Bootstrap e tentei provar que tal tarefa é impossível. Nessa brincadeira, acabei me convencendo do contrário, o Bootstrap é um código HTML para lá de avançado, e que eu só sei mexer na base da tentativa e erro, e aqui está o código onde consegui alinhar três <div> lado a lado:

<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://getbootstrap.com/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">

<div class="container py-3">
<div class='row row-cols-1 row-cols-md-3 mb-3 text-center'>

  <?php $mysqli=new mysqli("localhost","root","","astudy");
    $query=$mysqli->query("select * from imoveis");
    for($icontador=1;$icontador<=3;$icontador++){
    $row=$query->fetch_assoc(); ?>

<div class="col">
<div class="card mb-4 rounded-3 shadow-sm">
<div class="card-header py-3">
    <h4 class="my-0 fw-normal"><img src=<?=$row['imagem']?> width=250 height=200></h4>
</div>
<div class="card-body">
    <h1 class="card-title pricing-card-title"><?=$row['preço']?></h1>
    <ul class="list-unstyled mt-3 mb-4">
        <li><?=$row['quartos']?> quartos</li> 
        <li><?=$row['banheiros']?> banheiros</li>
        <li><?=$row['vagas']?> vagas</li>
        <li>Bairro <?=$row['bairro']?></li>
    </ul>
    <button type="button" class="w-100 btn btn-lg btn-outline-primary">Cidade <?=$row['cidade']?></button>
</div>
</div>
</div>

<?php } ?>

A estrutura do MySQL ficou assim:

CREATE TABLE `imoveis` (
  `idimovel` int NOT NULL AUTO_INCREMENT,
  `ref` varchar(45) COLLATE utf8_swedish_ci DEFAULT NULL,
  `bairro` varchar(45) COLLATE utf8_swedish_ci DEFAULT NULL,
  `cidade` varchar(45) COLLATE utf8_swedish_ci DEFAULT NULL,
  `quartos` int DEFAULT NULL,
  `suites` int DEFAULT NULL,
  `banheiros` int DEFAULT NULL,
  `vagas` int DEFAULT NULL,
  `condomínios` int DEFAULT NULL,
  `preço` varchar(45) COLLATE utf8_swedish_ci DEFAULT NULL,
  `imagem` varchar(100) COLLATE utf8_swedish_ci DEFAULT NULL,
  PRIMARY KEY (`idimovel`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8mb3 COLLATE=utf8_swedish_ci

Entrar

Publicando 3 <div> com Bootstrap

Pergunta

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades