<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <!-- fontawesome --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> <!-- Google fonts --> <link href="https://fonts.googleapis.com/css?family=Quicksand:700" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Francois+One" rel="stylesheet"> <!-- You must include these tags in your head tag --> <div class="container"> <div class="row"> <div class="col-md-6 offset-3"> <h2 class="Mybanner"><em>Nos Offres et Tarifs</em></h2> </div> </div> <div class="row"> <div class="col-sm"> <div class="Mytable"> <div class="head_table"> <h3>Gratuit</h3> </div> <div class="content_table"> <div class="price">0.00 $</div> <ul class="list-group list-group-flush"> <li class="list-group-item"><i class="fas fa-check ok"></i> Cras justo odio</li> <li class="list-group-item"><i class="fas fa-check ok"></i>Dapibus ac facilisis in</li> <li class="list-group-item"><i class="fas fa-times No"></i><span class="remove">Morbi leo risus</span></li> <li class="list-group-item"><i class="fas fa-times No"></i><span class="remove">Porta ac consectetur ac</span></li> <li class="list-group-item"><i class="fas fa-times No"></i><span class="remove">Vestibulum at eros</span></li> </ul> <button type="button" class="btn btn-outline-success btn-lg Mybutton">Essayer</button> </div> </div> </div> <div class="col-sm"> <div class="Mytable"> <div class="head_table"> <h3>De Base</h3> </div> <div class="content_table"> <div class="price">49.95 $</div> <ul class="list-group list-group-flush"> <li class="list-group-item"><i class="fas fa-check ok"></i> Cras justo odio</li> <li class="list-group-item"><i class="fas fa-check ok"></i>Dapibus ac facilisis in</li> <li class="list-group-item"><i class="fas fa-check ok"></i>Morbi leo risus</li> <li class="list-group-item"><i class="fas fa-check ok"></i>Porta ac consectetur ac</li> <li class="list-group-item"><i class="fas fa-check ok"></i>Vestibulum at eros</li> </ul> <button type="button" class="btn btn-outline-success btn-lg Mybutton">Obtenir</button> </div> </div> </div> <div class="col-sm"> <div class="Mytable"> <div class="head_table"> <h3>Illimite</h3> </div> <div class="content_table"> <div class="price">149.95 $</div> <ul class="list-group list-group-flush"> <li class="list-group-item"><i class="fas fa-check ok"></i> Cras justo odio</li> <li class="list-group-item"><i class="fas fa-check ok"></i>Dapibus ac facilisis in</li> <li class="list-group-item"><i class="fas fa-check ok"></i>Morbi leo risus</li> <li class="list-group-item"><i class="fas fa-check ok"></i>Porta ac consectetur ac</li> <li class="list-group-item"><i class="fas fa-check ok"></i>Vestibulum at eros</li> </ul> <button type="button" class="btn btn-outline-success btn-lg Mybutton">Obtenir</button> </div> </div> </div> </div> </div>

.Mybanner{ text-align: center; margin: 20px; font-family: 'Francois One', sans-serif; font-size: 35px; } .head_table{ background-color: #27ae60; text-align: center; height: 60px; width: 100%; color: white; } .head_table h3{ font-family: 'Francois One', sans-serif; padding-top: 5px; font-weight: 500; font-size: 40px; } .price{ font-size: 200%; padding-top: 10px; padding-bottom: 30px; text-align: center; } .ok{ color: green; margin-right: 10px; font-size: 150%; } .No{ color: red; margin-right: 10px; font-size: 150%; } .Mybutton{ width: 80%; margin:10%; font-family: 'Quicksand', sans-serif; } .remove:hover{ text-decoration: line-through; } .Mytable{ border: 2px solid #27ae60; border-radius: 5px; margin: 15px; }