Partage

Aligner des cards Boostrap Horizontalement

Problème d'alignement des card horizontalement - PHP

23 décembre 2018 à 15:37:08

Bonjour,

J'ai fais un système sur mon site où quand l'admin créer un "avion", une nouvelle "card" se créer mais malheureusement elles ne s'alignent horizontalement. J'aimerai qu'elles s'alignent par rang de 3 horizontalement.

Voila les codes :

<?php
include 'config/mysql_connect.php';

$req = $pdo->prepare("SELECT * FROM plane ORDER by id DESC");
$req->execute();



?>
<!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>Aéroclub du Bassin d'Arcachon</title>
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <!-- Bootstrap core CSS -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <!-- Material Design Bootstrap -->
  <link href="css/mdb.min.css" rel="stylesheet">
  <!-- Your custom styles (optional) -->
  <link href="css/style.min.css" rel="stylesheet">
  <style type="text/css">
    @media (min-width: 800px) and (max-width: 850px) {
            .navbar:not(.top-nav-collapse) {
                background: #1C2331!important;
            }
        }
  </style>
</head>

<body>

  <!-- Navbar -->
  <nav class="navbar fixed-top navbar-expand-lg navbar-dark scrolling-navbar">
    <div class="container">

      <!-- TitreNavBar -->
      <a class="navbar-brand" href="index.php">
	  <img src="image/logo.png" width="30" height="30" class="d-inline-block align-top" alt="">
        <strong>Aéroclub du Bassin d'Arcachon</strong>
      </a>

      <!-- DIV -->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
        aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <!-- Liens -->
      <div class="collapse navbar-collapse" id="navbarSupportedContent">

        <!-- GaucheNavBar -->
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" href="index.php">Acceuil
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="aeroclub.php">L'Aéroclub</a>
          </li>
          <li class="nav-item">
            <a class="nav-link active" href="flotte.php">Flotte</a>
            <span class="sr-only"></span>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="perso.php">Personnels</a>
          </li>
		  <li class="nav-item">
            <a class="nav-link" href="formations.php">Formations</a>
          </li>
		  <li class="nav-item">
		  <div class="dropdown">
			<button class="btn btn-dark dropdown-toggle btn-sm" type="button" id="dropdownMenu6" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
				Pilote
			</button>
			<div class="dropdown-menu dropdown-dark">
			  <a class="dropdown-item" href="http://www.aerogest-reservation.com/ac/arcachon.htm"><img src="image/logoa.png" width="40"> Réservation</a>
			  <a class="dropdown-item" href="docuavion.php">Document Avion</a>
			  <a class="dropdown-item" href="prepavol.php">Préparation Vol</a>
			  <a class="dropdown-item" href="ato.php">A.T.O.</a>
			</div>
		</div>
		</li>
        </ul>

        <!-- DroiteNavBar -->
        <ul class="navbar-nav nav-flex-icons">
          <li class="nav-item">
            <a href="https://firstflight.aerogest.fr/Structure/Display/2E8635D37A" class="nav-link border border-light rounded"
              target="_blank">
              <i class="fa fa-plane mr-2"></i>Réserver un Vol Découverte
            </a>
          </li>
        </ul>

      </div>

    </div>
  </nav>
  <!-- NavBarEnd -->

  <!-- Image Fond Haut -->
  <div class="view" style="background-image: url('https://image.noelshack.com/fichiers/2018/29/3/1531898408-fondaero.jpg'); background-repeat: no-repeat; background-size: cover;">

    <!-- Mask & flexbox options-->
    <div class="mask rgba-black-light d-flex justify-content-center align-items-center">

      <!-- Content -->
      <div class="text-center white-text mx-5 wow fadeIn">
        <h1 class="mb-4">
          <strong>Flotte de l'aéroclub</strong>
        </h1>

        <p>
          <strong>Voici toute la flotte composant l'aéroclub</strong>
        </p>

        <p class="mb-4 d-none d-md-block">
          <strong></strong>
        </p>

        <a href="#debut" class="btn btn-outline-white btn-lg"><i class="fa fa-arrow-down ml-2"></i></a>
      </div>
      <!-- Content -->

    </div>
    <!-- Mask & flexbox options-->

  </div>
  <!-- Full Page Intro -->

  <!--Main layout-->
  <main>
    <div class="container">
		<center><p><h2><b><strong><i class="fa fa-file-text fa-1x" aria-hidden="true"></i>&nbsp;Flotte : </strong></b></h2></p></center>
		<br>
		<div class="row">
		<div class="col-md-5">
    		<?php while($res= $req->fetch(PDO::FETCH_OBJ)): ?>
        	<br>
    <!--Section description-->
			<div class="card">
			    <!--Card image-->
			<div class="view overlay">
			<!--Carousel Wrapper-->
			<div id="carousel-example-1z" class="carousel slide carousel-fade" data-ride="carousel">
			    <!--Indicators-->
			  <ol class="carousel-indicators">
			        <li data-target="#carousel-example-1z" data-slide-to="0" class="active"></li>
			        <li data-target="#carousel-example-1z" data-slide-to="1"></li>
			        <li data-target="#carousel-example-1z" data-slide-to="2"></li>
			    </ol>
			    <!--/.Indicators-->
			    <!--Slides-->
			    <div class="carousel-inner" role="listbox">
			        <!--First slide-->
			        <div class="carousel-item active">
			      <a href="<?= $res->plane_image; ?>" target="_blank">
			        <img class="d-block w-100" src="<?= $res->plane_image; ?>" alt="">
			      </a>
			        </div>
			        <!--/First slide-->
			        <!--Second slide-->
			        <div class="carousel-item">
			      <a href="<?= $res->plane_image2; ?>" target="_blank">
			        <img class="d-block w-100" src="<?= $res->plane_image2; ?>" alt="">
			      </a>
			        </div>
			        <!--/Second slide-->
			        <!--Third slide-->
			        <div class="carousel-item">
			      <a href="<?= $res->plane_image3; ?>" target="_blank">
			        <img class="d-block w-100" src="<?= $res->plane_image3; ?>" alt="">
			      </a>
			        </div>
			        <!--/Third slide-->
			    </div>
			  <div class="mask rgba-white-slight"></div>
			  <!--Controls-->
			    <a class="carousel-control-prev" href="#carousel-example-1z" role="button" data-slide="prev">
			        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
			        <span class="sr-only"></span>
			    </a>
			    <a class="carousel-control-next" href="#carousel-example-1z" role="button" data-slide="next">
			        <span class="carousel-control-next-icon" aria-hidden="true"></span>
			        <span class="sr-only"></span>
			    </a>
			    <!--/.Controls-->
			</div>
			</div>
			<!--/.Carousel Wrapper-->
			    <!--Card content-->
			    <div class="card-body">

			      <!--Title-->
			      <center><h4 class="card-title"><?= $res->plane_title ?></h4><button type="text" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#centralModalSm">Descriptif</button></center>
			    <!-- Central Modal Small -->
			    <div class="modal fade" id="centralModalSm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

			      <!-- Change class .modal-sm to change the size of the modal -->
			      <div class="modal-dialog modal-fluid" role="document">


			        <div class="modal-content">
			        <div class="modal-header">
			          <h4 class="modal-title w-100" id="myModalLabel"><?= $res->plane_title ?> - <i class="fa fa-plane" aria-hidden="true"></i></h4>
			          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
			          <span aria-hidden="true">&times;</span>
			          </button>
			        </div>
			        <div class="modal-body">
			        <div class="row">
			          <!-- Grid column -->
			          <div class="col-lg-5">

			            <!--Carousel Wrapper-->
			            <div id="carousel-example-2z" class="carousel slide carousel-fade" data-ride="carousel">
			              <!--Indicators-->
			              <ol class="carousel-indicators">
			                <li data-target="#carousel-example-2z" data-slide-to="0" class="active"></li>
			                <li data-target="#carousel-example-2z" data-slide-to="1"></li>
			                <li data-target="#carousel-example-2z" data-slide-to="2"></li>
			              </ol>
			              <!--/.Indicators-->
			              <!--Slides-->
			              <div class="carousel-inner" role="listbox">
			                <!--First slide-->
			                <div class="carousel-item active">
			                  <a href="<?= $res->plane_image; ?>" target="_blank">
			                    <img class="d-block w-100" src="<?= $res->plane_image; ?>" alt="">
			                  </a>
			                </div>
			                <!--/First slide-->
			                <!--Second slide-->
			                <div class="carousel-item">
			                  <a href="<?= $res->plane_image2; ?>" target="_blank">
			                    <img class="d-block w-100" src="<?= $res->plane_image2; ?>" alt="">
			                  </a>
			                </div>
			                <!--/Second slide-->
			                <!--Third slide-->
			                <div class="carousel-item">
			                  <a href="<?= $res->plane_image3; ?>" target="_blank">
			                    <img class="d-block w-100" src="<?= $res->plane_image3; ?>" alt="">
			                  </a>
			                </div>
			                <!--/Third slide-->
			              </div>
			              <div class="mask rgba-white-slight"></div>
			              <!--Controls-->
			              <a class="carousel-control-prev" href="#carousel-example-2z" role="button" data-slide="prev">
			                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
			                <span class="sr-only"></span>
			              </a>
			              <a class="carousel-control-next" href="#carousel-example-2z" role="button" data-slide="next">
			                <span class="carousel-control-next-icon" aria-hidden="true"></span>
			                <span class="sr-only"></span>
			              </a>
			              <!--/.Controls-->
			            </div>
			            </div>
			            <!--/.Carousel Wrapper-->
			          <!-- Grid column -->

			          <!-- Grid column -->
			          <div class="col-lg-7">

			            <!-- Category -->
			            <!-- Post title -->
			            <h3 class="font-weight-bold mb-3"><strong><? $res->plane_title; ?></strong></h3>
			            <!-- Excerpt -->
			            <p><?= $res->plane_desc; ?></p>
			            <!-- Post data -->
			            <!-- Read more button -->
			            <a href="https://firstflight.aerogest.fr/Structure/Display/2E8635D37A" class="btn btn-primary btn-md"><i class="fa fa-plane" aria-hidden="true"></i>    Réserver un Vol Découverte Maintenant</a>

			          </div>
			          <!-- Grid column -->
			        </div>
			        </div>
			        <div class="modal-footer">
			          <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Fermer</button>
			        </div>
			        </div>
			      </div>
			      </div>
			  <!-- Central Modal Small -->
			      <!--Text-->
			    <hr>
			      <center><p class="card-text"><?= $res->plane_title; ?></p></center>
			    <hr>
			      <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
			    <center><p class="card-text"><?= $res->plane_cara; ?></p></center>
			    <hr>
			    <center><p class="card-text"><?= $res->plane_cost; ?></p></center>
			    <hr>
			    <center><div class="alert alert-danger" role="alert">
			  En maintenance
			</div></center>
			<?php if(isset($_SESSION['admin']) AND !empty($_SESSION['admin'])): ?>
             <div class="text-right"><a href="editplane.php?id=<?= $res->id; ?>" class="btn btn-sm btn-deep-orange"><i class="fa fa-edit" aria-hidden="true"></i></a><a href="deleteplane.php?id=<?= $res->id; ?>" class="btn btn-sm btn-danger"><i class="fa fa-times" aria-hidden="true"></i>
</a></div>
<?php endif; ?>
			    </div>
			  </div>
			<?php endwhile; ?>
</div>
</div> 
  </div>
</main>

  <!--Footer-->
  <footer class="page-footer text-center font-small mt-4 wow fadeIn">

    <!--Contact-->
    <div class="pt-4">
      <a class="btn btn-outline-white" href="contact.php" role="button">Nous Contactez
        <i class="fa fa-envelope ml-2"></i>
      </a>
      <a class="btn btn-outline-white" href="#" role="button">Revenir en Haut
        <i class="fa fa-arrow-up ml-2"></i>
      </a>
      <a class="btn btn-outline-white" href="admin/index.php" role="button">Admin
      <i class="fa fa-user-circle-o" aria-hidden="true"></i>
      </a>
    </div>
    <!--END-->

    <hr class="my-4">


    <!--Copyright-->
    <div class="footer-copyright py-3">
      © 2018 Copyright :
      <a href="" target="_blank"> Baptiste Sutter </a>
    </div>
    <!--/.Copyright-->

  </footer>
  <!--/.Footer-->

  <!-- SCRIPTS -->
  <!-- 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>
  <!-- Initializations -->
  <script type="text/javascript">
    // Animations initialization
    new WOW().init();
  </script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
  <script>
$('a[href^="#"]').click(function(){
var the_id = $(this).attr("href");$('html, body').animate({scrollTop:$(the_id).offset().top}, 'slow');return false;
});
</script>
<script>
$('a[href^="#debut"]').click(function(){
var the_id = $(this).attr("href");$('html, body').animate({scrollTop:$(the_id).offset().top}, 'slow');return false;
});
</script>
</body>

</html>

Je vous ai mis toute la page PHP ou les card s'affichent !

Dites moi si vous avez besoin de plus d'info

Cordialement

Baptiste Sutter

kamoba

26 décembre 2018 à 17:28:09

Salut,

Pour aligner div avec Bootstrap je fais en général quelque chose comme ça:

<div class="row">              
  <div class="col-md-4">col</div>   
  <div class="col-md-4">col</div> 
  <div class="col-md-4">col</div>   
</div>

-
Edité par kamoba 26 décembre 2018 à 17:29:52

BaptisteSutter

28 décembre 2018 à 10:31:03

kamoba a écrit:

Salut,

Pour aligner div avec Bootstrap je fais en général quelque chose comme ça:
<div class="row">              
  <div class="col-md-4">col</div>   
  <div class="col-md-4">col</div> 
  <div class="col-md-4">col</div>   
</div>
-
Edité par kamoba 26 décembre 2018 à 17:29:52

Merci de ta réponse mais le problème c'est que j'ai qu'une card de faite qui est le modèle pour le PHP, les autres se créer sur le même modèle. Je ne peut mettre qu'un seul div col md 4 et même en le mettant au début malheureusement, cela ne fonctionne pas...

kamoba

29 décembre 2018 à 1:21:19

tu pourrais balancer le nombre de card à créer en php et créer les card en js par exemple avec quelque chose du genre:

// Jquery
function addCard(){
 $('.row').each(function(){
 let col1 = $(this).children()[0];
 let col1 = $(this).children()[1];
 let col1 = $(this).children()[2];

 if( $(col1).html() == "" ){           // col 1 les col vides au départ
     //ajouter un card 
 }
 else if($(col2).html() == "" ){       // col 2
     //ajouter un card
 }
 else if($(col1).html() == "" ){       // col 3
     //ajouter un card
 }
 else {                  // row full

   //créer un nouveuau row
   return "nouvelle row crée";
 }
});
}

tu lances addRow() tant que ça retourne "nouvelle row crée"

Juste pour donner une idée...

-
Edité par kamoba 29 décembre 2018 à 1:22:37

BaptisteSutter

2 janvier 2019 à 11:30:49

Merci de ta reponse mais je comprend tres mal le JS pourrait tu detailler le code avec ce que je dois mettre et ou stp si cela ne te derange pas bien sur !

Merci encore

CDT

TheGmader

rga

2 janvier 2019 à 12:31:38

salut,

sauf erreur tu peux le faire via php.

<?php
 $iRow = 0;
 foreach($aAvion as $oCard) {
  if(($iRow%3)===0) {
   ?><div class="col-md-4"><?php
  }
  // tes infos complètes ici
  $iRow++;
  if(($iRow%3)===0) {
   ?></div><?php
  }
 }
?>

Bonne année

Winter Is Coming - Explorez le forum : votre problème a déjà dû être traité ailleurs

BaptisteSutter

2 janvier 2019 à 17:52:49

rga a écrit:

salut,

sauf erreur tu peux le faire via php.

<?php
 $iRow = 0;
 foreach($aAvion as $oCard) {
  if(($iRow%3)===0) {
   ?><div class="col-md-4"><?php
  }
  // tes infos complètes ici
  $iRow++;
  if(($iRow%3)===0) {
   ?></div><?php
  }
 }
?>

Bonne année

Le problème est que quand je met ton code a l'endroit ou je dois mettre mon code pour ma card et vu qu'il y a du php a l'intérieur le code se referme avec une balise qui n'est pas la bonne

CDT

Bonne année

-
Edité par BaptisteSutter 2 janvier 2019 à 17:55:39

BaptisteSutter

9 janvier 2019 à 13:15:54

UP ?

kamoba

10 janvier 2019 à 1:34:29

Salut, vu que PHP te conviens mieux, peux-tu montrer ta portion de code où y a le bazar avec le code de @rga?

BaptisteSutter

14 janvier 2019 à 16:55:23

<main>
    <div class="container">
    	<?php foreach ($req as $res): ?>
		<center><p><h2><b><strong><i class="fa fa-file-text fa-1x" aria-hidden="true"></i>&nbsp;Flotte : </strong></b></h2></p></center>
		<br>
		<?php while($res= $req->fetch(PDO::FETCH_OBJ)): ?>
			<br>
	<div class="row">
		<div class="col-12 col-md-6 col-lg-4 mb-3 mb-md-0">
    <!--Section description-->
			<div class="card">
			    <!--Card image-->
			<div class="view overlay">
			<!--Carousel Wrapper-->
			<div id="carousel-example-1z" class="carousel slide carousel-fade" data-ride="carousel">
			    <!--Indicators-->
			  <ol class="carousel-indicators">
			        <li data-target="#carousel-example-1z" data-slide-to="0" class="active"></li>
			        <li data-target="#carousel-example-1z" data-slide-to="1"></li>
			        <li data-target="#carousel-example-1z" data-slide-to="2"></li>
			    </ol>
			    <!--/.Indicators-->
			    <!--Slides-->
			    <div class="carousel-inner" role="listbox">
			        <!--First slide-->
			        <div class="carousel-item active">
			      <a href="<?= $res->plane_image; ?>" target="_blank">
			        <img class="d-block w-100" src="<?= $res->plane_image; ?>" alt="">
			      </a>
			        </div>
			        <!--/First slide-->
			        <!--Second slide-->
			        <div class="carousel-item">
			      <a href="<?= $res->plane_image2; ?>" target="_blank">
			        <img class="d-block w-100" src="<?= $res->plane_image2; ?>" alt="">
			      </a>
			        </div>
			        <!--/Second slide-->
			        <!--Third slide-->
			        <div class="carousel-item">
			      <a href="<?= $res->plane_image3; ?>" target="_blank">
			        <img class="d-block w-100" src="<?= $res->plane_image3; ?>" alt="">
			      </a>
			        </div>
			        <!--/Third slide-->
			    </div>
			  <div class="mask rgba-white-slight"></div>
			  <!--Controls-->
			    <a class="carousel-control-prev" href="#carousel-example-1z" role="button" data-slide="prev">
			        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
			        <span class="sr-only"></span>
			    </a>
			    <a class="carousel-control-next" href="#carousel-example-1z" role="button" data-slide="next">
			        <span class="carousel-control-next-icon" aria-hidden="true"></span>
			        <span class="sr-only"></span>
			    </a>
			    <!--/.Controls-->
			</div>
			</div>
			<!--/.Carousel Wrapper-->
			    <!--Card content-->
			    <div class="card-body">

			      <!--Title-->
			      <center><h4 class="card-title"><?= $res->plane_title ?></h4><button type="text" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#centralModalSm">Descriptif</button></center>
			    <!-- Central Modal Small -->
			    <div class="modal fade" id="centralModalSm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

			      <!-- Change class .modal-sm to change the size of the modal -->
			      <div class="modal-dialog modal-fluid" role="document">


			        <div class="modal-content">
			        <div class="modal-header">
			          <h4 class="modal-title w-100" id="myModalLabel"><?= $res->plane_title ?> - <i class="fa fa-plane" aria-hidden="true"></i></h4>
			          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
			          <span aria-hidden="true">&times;</span>
			          </button>
			        </div>
			        <div class="modal-body">
			        <div class="row">
			          <!-- Grid column -->
			          <div class="col-lg-5">

			            <!--Carousel Wrapper-->
			            <div id="carousel-example-2z" class="carousel slide carousel-fade" data-ride="carousel">
			              <!--Indicators-->
			              <ol class="carousel-indicators">
			                <li data-target="#carousel-example-2z" data-slide-to="0" class="active"></li>
			                <li data-target="#carousel-example-2z" data-slide-to="1"></li>
			                <li data-target="#carousel-example-2z" data-slide-to="2"></li>
			              </ol>
			              <!--/.Indicators-->
			              <!--Slides-->
			              <div class="carousel-inner" role="listbox">
			                <!--First slide-->
			                <div class="carousel-item active">
			                  <a href="<?= $res->plane_image; ?>" target="_blank">
			                    <img class="d-block w-100" src="<?= $res->plane_image; ?>" alt="">
			                  </a>
			                </div>
			                <!--/First slide-->
			                <!--Second slide-->
			                <div class="carousel-item">
			                  <a href="<?= $res->plane_image2; ?>" target="_blank">
			                    <img class="d-block w-100" src="<?= $res->plane_image2; ?>" alt="">
			                  </a>
			                </div>
			                <!--/Second slide-->
			                <!--Third slide-->
			                <div class="carousel-item">
			                  <a href="<?= $res->plane_image3; ?>" target="_blank">
			                    <img class="d-block w-100" src="<?= $res->plane_image3; ?>" alt="">
			                  </a>
			                </div>
			                <!--/Third slide-->
			              </div>
			              <div class="mask rgba-white-slight"></div>
			              <!--Controls-->
			              <a class="carousel-control-prev" href="#carousel-example-2z" role="button" data-slide="prev">
			                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
			                <span class="sr-only"></span>
			              </a>
			              <a class="carousel-control-next" href="#carousel-example-2z" role="button" data-slide="next">
			                <span class="carousel-control-next-icon" aria-hidden="true"></span>
			                <span class="sr-only"></span>
			              </a>
			              <!--/.Controls-->
			            </div>
			            </div>
			            <!--/.Carousel Wrapper-->
			          <!-- Grid column -->

			          <!-- Grid column -->
			          <div class="col-lg-7">

			            <!-- Category -->
			            <!-- Post title -->
			            <h3 class="font-weight-bold mb-3"><strong><? $res->plane_title; ?></strong></h3>
			            <!-- Excerpt -->
			            <p><?= $res->plane_desc; ?></p>
			            <!-- Post data -->
			            <!-- Read more button -->
			            <a href="https://firstflight.aerogest.fr/Structure/Display/2E8635D37A" class="btn btn-primary btn-md"><i class="fa fa-plane" aria-hidden="true"></i>    Réserver un Vol Découverte Maintenant</a>

			          </div>
			          <!-- Grid column -->
			        </div>
			        </div>
			        <div class="modal-footer">
			          <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Fermer</button>
			        </div>
			        </div>
			      </div>
			      </div>
			  <!-- Central Modal Small -->
			      <!--Text-->
			    <hr>
			      <center><p class="card-text"><?= $res->plane_title; ?></p></center>
			    <hr>
			      <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
			    <center><p class="card-text"><?= $res->plane_cara; ?></p></center>
			    <hr>
			    <center><p class="card-text"><?= $res->plane_cost; ?></p></center>
			    <hr>
			    <?php
			    if(isset($_POST['etat']) && in_array('service', $_POST['etat'])) {
			    	echo '<center><div class="alert alert-success" role="alert"> En Service </div></center>';
			    } 
			    elseif(isset($_POST['etat']) && in_array('maintenace', $_POST['etat'])) {
			    	echo '<center><div class="alert alert-danger" role="alert">En maintenace</div></center>';
			    }
			   ?>
			<?php if(isset($_SESSION['admin']) AND !empty($_SESSION['admin'])): ?>
             <div class="text-right"><a href="editplane.php?id=<?= $res->id; ?>" class="btn btn-sm btn-deep-orange"><i class="fa fa-edit" aria-hidden="true"></i></a><a href="deleteplane.php?id=<?= $res->id; ?>" class="btn btn-sm btn-danger"><i class="fa fa-times" aria-hidden="true"></i>
</a></div>
<?php endif; ?>
	    </div>
	  </div>
	</div>
</div>
	<?php endwhile; ?>
		<?php endforeach; ?>
</main>

Le code doit englober toute la partie a partir de <div class="card> jusqu'a la fin du div card donc quasi la fin (mais je ne sais pas si d'ailleurs y devrait pas englober le row et le col md ??!!!!)

Merci

BaptisteSutter

20 janvier 2019 à 10:21:23

UP ?

rga

22 janvier 2019 à 17:46:55

re,

alors pour éviter tout souci, duplique la page qui "marche" sans mon code, sauve-la en "test_code.php" et ouvre ce nouveau fichier. où essayes-tu d'insérer mon code exactement ? parce que nous mettre tout le "main" ce n'est pas ce qu'il y a de plus précis .

et je viens de voir, tu utilises la syntaxe alternative. donc forcément, on ne peut pas avoir les deux syntaxes en même temps. je t'invite à lire ce pavé à ce sujet.

Winter Is Coming - Explorez le forum : votre problème a déjà dû être traité ailleurs