CODEWITHSUNDEEP
cssbootstrap-4
Mayank
Mayank

Reputation: 45

How to place two bootstrap cards next to each other

I want to place the two cards next to each other (horizontally) but currently they are vertically aligned. That is I want to place the Heading 1 card next to Heading 2 card even though I used some margin it shift only in the same place horizontally not vertically.

<div class="card" style="width: 20rem;">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
            <h5 class="card-title">Heading 1</h5>
            <p class="card-text">some text</p>
            <a href="#" class="btn btn-primary">a button</a>
    </div>
</div>

<div class="card" style="width: 20rem;">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
            <h5 class="card-title">Heading 2</h5>
            <p class="card-text">some text</p>
            <a href="#" class="btn btn-primary">a button</a>
    </div>
</div>

Upvotes: 0

Views: 8539

Answers (1)

Sai Manoj
Sai Manoj

Reputation: 3849

You can use Bootstrap’s grid to achieve this:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 d-flex justify-content-center">
      <div class="card" style="width: 20rem;>
        <img class="card-img-top" src="..." alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Heading 1</h5>
          <p class="card-text">some text</p>
          <a href="#" class="btn btn-primary">a button</a>
        </div>
      </div>
    </div>
    <div class="col-sm-6 d-flex justify-content-center">
      <div class="card" style="width: 20rem;>
        <img class="card-img-top" src="..." alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Heading 2</h5>
          <p class="card-text">some text</p>
          <a href="#" class="btn btn-primary">a button</a>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 4

Related Questions