8722 sujets

Développement web côté serveur, CMS

Bootstrap Erreur : Zoom et Alignement des cartes et des badges

Bonjour, je viens de débuter sur Bootstrap et je rencontre un problème sur mon navigateur, en effet je souhaiterai lorsque qu'on effectue un zoom avant, que le badge "panier" se situe en bas de la 1ère carte de la page à gauche ( sauf que dans mon cas, le badge apparaît en dessous du badge produit). Aussi je voudrais, que la 2ème carte soit aligné côte à côte (avec une certain espace) avec la 3ème carte. Comment dois-je procéder ? Merci d'avance.

Lien de ma maquette (
https://cdn.discordapp.com/attachments/778294988538380339/801395511085105152/2021-01-20_11h19_22.png
)





HTML (dossier jsp)
[code=html] 

<!DOCTYPE html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="css/style4.css" rel="stylesheet" type="text/css"/>
    <title> Page Panier </title>
</head>
<!---Navigation-->
<c:import url="WEB-INF/menu/menu-main.jsp" />
<div id ="container-fluid">
    <div class="row">
        <div class="col"> <h2 class="text-center"> <span class ="badge badge-light header border border-dark entete "> Page Commande</span> </h2> </div> 
    </div>
    <div class="row">
        <div class="col-lg ml-5"> <h2> <span class ="badge badge-light header border border-dark produit">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Produit&nbsp;&nbsp;&nbsp;&nbsp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span> </h2>
          </div>
        <div class="col-lg xl-6 md-5 offset-md-4"> <h2> <span class ="badge badge-light header border border-dark panier "> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;Panier&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span>  </h2>
        </div>
        </div>
   
</div>
    <div class="row">
        <div class="col-lg mt-4 ml-5 md-3 sm-5">
            <div class="card" style="width: 18rem">
                <h5 class="card-title" align="center">Iphone 8</h5>
                <img class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoB4fqc3ww1_YdEyiLyFnyUTy8lpJjhp48JeG6pZr3WI4TaF9Gj0Npttz_Jmhie7lBs7jkruaW&usqp=CAc" class="card-img-top" alt="Iphone 8" alt="Card image cap">
                <div class="card-body">
                    <p class="card-text" align="center"> Couleur:</p>
                    <p class="card-text" align="center"> Espace de stockage:</p>
                    <p class="card-text" align="center"> Taille de l'écran:</p>
                    <center> <button type="button" class="btn btn-success text-dark btn-lg b1" type="submit"> Ajouter au panier </button> </center>
                </div>
            </div>
        </div>
   
        <div class="col-lg-4 mt-4 ml-5 md-2 sm-6">
            <div class="card" style="width: 18rem">
                <h5 class="card-title" align="center">Iphone 8</h5>
                <img class="card-img-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRvOYMW07wpx1mRqo1sWZmvl79PdUqcuuOTUr2InVCCwWOZjM_ljo5wedQVvdabGZpT-_DgX0k&usqp=CAc" class="card-img-top" class="card-img-top" alt="Iphone 8" alt="Card image cap">
                <div class="card-body">
                    <p class="card-text" align="center"> Couleur:</p>
                    <p class="card-text" align="center"> Espace de stockage:</p>
                    <p class="card-text" align="center"> Taille de l'écran:</p>
                    <center> <button type="button" class="btn btn-danger text-dark btn-lg b1" type="submit">  Valider </button> </center>
                </div>
            </div>
            <br>
            <div class="card" style="width: 18rem">
                <h5 class="card-title" align="center">Iphone 8</h5>
                <img class="card-img-top" src="https://www.carrefour.fr/media/1500x1500/Photosite/EPCS/RADIOTELEPHONIE/0194252121993_PHOTOSITE_20201119_124715_0.jpg?placeholder=1" class="card-img-top" alt="Image">
                <div class="card-body">
                    <p class="card-text" align="center"> Couleur:</p>
                    <p class="card-text" align="center"> Espace de stockage:</p>
                    <p class="card-text" align="center"> Taille de l'écran:</p>
                    <center> <button type="button" class="btn btn-danger text-dark btn-lg b1" type="submit">  Retiter </button> </center>
                </div>




    </div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>


CSS
[code=css]


::before,
::after {
  box-sizing: border-box; // 1
}
body, #articles{
background-color:#08A326;
 overflow-x:hidden;
 margin: 0 auto;
}

h5 {
font-weight:bold;

}
.card-text {
font-size:24px;
}
.container-fluid {
    /* On ajoute une marge sur les cotés de l'écran */
    padding-right: 15px;
    padding-left: 15px;

    /* Et on centre */
    margin-right: auto;
    margin-left: auto;
}

/* Sur les grands écrans, on limite la largeur du contenu */
@media (min-width: 1200px){
    .container {
        width: 1170px;
    }
}

Modifié par TheHawks (24 Feb 2021 - 12:16)
Sujet clos
Aller à