How to place cards side-by-side using Bootstrap?

Question

I want these 3 cards to be displayed side-by-side, but it always comes out as 3 cards stacked on top of each other. Is there anything I have to add within the code?

<div class="col-md-4">
  <div class="card rounded-lg" style="width: 17.5rem;">
    <img class="card-img-top" src="#" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Text1</h5>
      <p class="card-text">A quick example text to build on the card title and make up the bulk of the card's content.
      </p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>
</div>
<div class="col-md-4">
  <div class="card rounded-lg" style="width: 17.5rem;">
    <img class="card-img-top" src="#" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Text2</h5>
      <p class="card-text">Some more text</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>
</div>
<div class="col-md-4">
  <div class="card rounded-lg" style="width: 17.5rem;">
    <img class="card-img-top" src="#" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Text3</h5>
      <p class="card-text">Some other text.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>
</div>

Here's the code on codepen - https://codepen.io/icyriptide/pen/VwLrGex.

Remove the `style="width: 17.5rem;"`. – CherryDT Mar 08 '20 at 02:16 — CherryDT, Mar 08 '20 at 02:16

score 1 · Answer 1 · answered Mar 08 '20 at 02:53

Here is the code for you. You just need a div with class="row" and put all the cards inside the div. And that's done. tada Remember that class="row" can be used in any place in the html to add something in the row.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
    <title>Admin Panel</title>
</head>
<body>
<div class="row">
  <div class="col-md-4">
    <div class="card rounded-lg" style="width: 17.5rem;">
      <img class="card-img-top" src="#" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">Text1</h5>
        <p class="card-text">A quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card rounded-lg" style="width: 17.5rem;">
      <img class="card-img-top" src="#" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">Text2</h5>
        <p class="card-text">Some more text</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card rounded-lg" style="width: 17.5rem;">
      <img class="card-img-top" src="#" alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">Text3</h5>
        <p class="card-text">Some other text.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  </div>
</body>

j3ff · Answer 2 · 2020-03-08T03:03:34.523

In order to have the col classes to work they have to be inside an element with row class.

You can refer to the Grid System documentation: https://getbootstrap.com/docs/4.0/layout/grid/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-md-4">
    <div class="card rounded-lg" style="width: 17.5rem;">
      <img class="card-img-top" src="https://s3.amazonaws.com/pix.iemoji.com/images/emoji/apple/ios-12/256/cat-face.png"
        alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">Text1</h5>
        <p class="card-text">A quick example text to build on the card title and make up the bulk of the card's content.
        </p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card rounded-lg" style="width: 17.5rem;">
      <img class="card-img-top" src="https://s3.amazonaws.com/pix.iemoji.com/images/emoji/apple/ios-12/256/cat-face.png"
        alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">Text2</h5>
        <p class="card-text">Some more text</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card rounded-lg h-100" style="width: 17.5rem;">
      <img class="card-img-top" src="https://s3.amazonaws.com/pix.iemoji.com/images/emoji/apple/ios-12/256/cat-face.png"
        alt="Card image cap">
      <div class="card-body">
        <h5 class="card-title">Text3</h5>
        <p class="card-text">Some other text.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

How to place cards side-by-side using Bootstrap?

2 Answers2