Good evening I have a question about PHP with connection with MYSQL ,
I'm trying that when I call the database MYSQL , I get the data that I have registered but the structure of the frontend is displayed 3x2 and that's why I made this part of the code;
<?php foreach($resultado as $dato):?>
<div class="row">
<div class="col-sm-4">
<div class="card text-center mb-3" style="width: 18rem;">
<div class="card-body">
<?php echo $dato['Descripcion'] ?>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card text-center mb-3" style="width: 18rem;">
<div class="card-body">
<?php echo $dato['Descripcion'] ?>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card text-center mb-3" style="width: 18rem;">
<div class="card-body">
<?php echo $dato['Descripcion'] ?>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
<?php endforeach ?>
and here I show you the complete code of which I did if there is an error in my code
<?php
include_once 'conexion.php';
//Llamar a todos los datos
$sql='SELECT * FROM ubicacion_habitacion';
$sentencia = $pdo->prepare($sql);
$sentencia->execute();
$resultado = $sentencia->fetchAll();
// var_dump ($resultado);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<link href="css/simple-sidebar.css" rel="stylesheet">
</head>
<body>
<!-- As a link -->
<nav class="navbar verde ">
<a href="#menu-toggle" data-activates="wrapper" class="btn verde p-3 button-collapse fixed-top" id="menu-toggle"><i class="fa fa-bars"></i>
<a class="navbar-brand text-white" href="#">
<img src="img/favicon_sanna.png" height="30" class="d-inline-block align-top"> SANNA\ Clinica el Golf
</a>
</nav>
<div id="wrapper">
<!-- /#page-content-wrapper -->
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
<img src="img/logo-SANNA.png" height="50" class="rounded mx-auto d-block my-3">
</a>
</li>
<li>
<a href="Sidenav.php">Solicitud de Habitación</a>
<a href="Habitaciones.php">Gestión de Habitaciones</a>
</li>
</ul>
</div>
<!-- Page Content -->
<div id="page-content-wrapper " class="fondo view">
<div class="container my-5">
<?php foreach($resultado as $dato):?>
<div class="row">
<div class="col-sm-4">
<div class="card text-center mb-3" style="width: 18rem;">
<div class="card-body">
<?php echo $dato['Descripcion'] ?>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card text-center mb-3" style="width: 18rem;">
<div class="card-body">
<?php echo $dato['Descripcion'] ?>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card text-center mb-3" style="width: 18rem;">
<div class="card-body">
<?php echo $dato['Descripcion'] ?>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
<?php endforeach ?>
<hr class="container">
<nav class="col-sm-12" aria-label="Page navigation example">
<ul class="pagination pg-blue justify-content-center texto">
<li class="page-item disabled">
<a class="page-link text-success" tabindex="-1">Previous</a>
</li>
<li class="page-item"><a class="page-link text-success">1</a></li>
<li class="page-item"><a class="page-link text-success">2</a></li>
<li class="page-item"><a class="page-link text-success">3</a></li>
<li class="page-item">
<a class="page-link text-success">Next</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
<!-- /#sidebar-wrapper -->
</div>
<!-- /#wrapper -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
<script>
// Basic example
$(document).ready(function() {
$('#dtBasicExample').DataTable({
"paging": true // false to disable pagination (or any other option)
});
$('.dataTables_length').addClass('bs-select');
});
</script>
</body>
</html>