Create adjacent cards by card-group class

Bootstrap 4 Demo

Bootstrap 4 Code		Output
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"> </head> <body> <div class="container"> <h3>A demo of Bootstrap Card</h3> <div class="card-group"> <div class="card text-dark bg-light"> <img class="card-img-top" src="images/products/p4.png" alt="image alt text here"> <div class="card-body "> <h5 class="card-title">Product Name 1</h5> <p class="card-text text-left">Place some text for the Product 1 here. Place some text for the Product 1 here. Place some text for the Product 1 here.</p> </div> <div class="card-footer bg-success text-right text-danger"> <a href="#" class="btn btn-outline-light btn-sm">Buy Now</a> <a href="#" class="btn btn-outline-light btn-sm">More info</a> </div> </div> <div class="card text-dark bg-light"> <img class="card-img-top" src="images/products/p3.png" alt="image alt text here"> <div class="card-body "> <h5 class="card-title">Product Name 2</h5> <p class="card-text text-left">Place some text for the Product 1 here. Place some text for the Product 1 here. Place some text for the Product 1 here. Place some text for the Product 1 here.</p> </div> <div class="card-footer bg-danger text-right text-danger"> <a href="#" class="btn btn-outline-light btn-sm">Buy Now</a> <a href="#" class="btn btn-outline-light btn-sm">More info</a> </div> </div> <div class="card text-dark bg-light"> <img class="card-img-top" src="images/products/p2.png" alt="image alt text here"> <div class="card-body "> <h5 class="card-title">Product Name 3</h5> <p class="card-text text-left">Place some text for the Product 1 here. Place some text for the Product 1 here. Place some text for the Product 1 here. Place some text for the Product 1 here. Place some text for the Product 1 here.</p> </div> <div class="card-footer bg-success text-right text-danger"> <a href="#" class="btn btn-outline-light btn-sm">Buy Now</a> <a href="#" class="btn btn-outline-light btn-sm">More info</a> </div> </div> </div> </div> </div> </body> </html>		A demo of Bootstrap Card Product Name 1 Place some text for the Product 1 here. Place some text for the Product 1 here. Place some text for the Product 1 here. Buy Now More info Product Name 2 Place some text for the Product 1 here. Place some text for the Product 1 here. Place some text for the Product 1 here. Place some text for the Product 1 here. Buy Now More info Product Name 3 Place some text for the Product 1 here. Place some text for the Product 1 here. Place some text for the Product 1 here. Place some text for the Product 1 here. Place some text for the Product 1 here. Buy Now More info