Aligner 3 cards sur une ligne [HELP]

  • Initiateur de la discussion
TheGmader

TheGmader

Geek suprême
Messages
440
Score réaction
62
Points
150
Salut !
Je fais un site pour un aéroclub mais j'ai un pbs ! Je voudrais aligner 3 cards sur la même ligne (boostrap) vous pouvez trouver les deux card a aligner ici http://acbabaptiste.mtxserv.fr/flotte_true.php. C'est un systeme php en gros l'admin peut créer des avions qui se créent sous forme de cards mais je voudrais qu'il y en ai max 3 par ligne svp
php:
<div class="row">
<div class="col-lg-4 col-md-12 mb-4">
<div class="card mb-4"> <!--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> </div> </div>
</div>
<?php endwhile; ?>
</div>
Aidez moi
Cordilament
Baptiste Sutter
 
Dernière édition:
Discord d'entraide
Rejoignz-nous sur Discord