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 (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.

Code html
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!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-->
 
 
 
 
 
<!DOCTYPE html>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
 
    <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
        <a class="navbar-brand" href="accueil">Accueil</a>
        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
 
            <li class="nav-item">
                <a class="nav-link" href="panier">Panier</a>
            </li>
 
 
                <li class="nav-item">
                    <a class="nav-link" href="vers-inscription">Inscription</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="vers-connexion">Connexion</a>
                </li>
 
 
 
        </ul>
    </div>
</nav>
<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 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 class="row">
 
</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 mt-4 ml-5 md-6  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: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"> Passer Commande </button> </center>
                </div>
            </div>
        </div>
        <div class="col-lg mt-4 ml-5 md-6 sm-5">
            <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">  Passer Commande </button> </center>
                </div>
            </div>
        </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>


Partie CSS
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
::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;
    }
}