CODEWITHSUNDEEP
htmlcssbootstrap-4
cikatomo
cikatomo

Reputation: 1632

Boostrap doesn't want to apply justify-content-between in card

With Bootstrap 4, I am making a horizontal card for classified ad and want in the header to title of the ad to be on the left and price on the right. Using django template:

<section class="card">
        <div class="row no-gutters">
            <div class="col-sm-4">
                <img src="{{ad.thumbnail.url}}" alt="" class="img fluid card-img ad-image-list">
            </div>
            <div class="col-sm-8">
                <div class="card-body">
                    <header class="d-flex justify-content-between">
                        <h6>{{ad.title}}</h6>
                        <h6> {{ad.price}}$ </h6>
                        <hr>
                    </header>
                    <p class="card-text">{{ad.description}}</p>
                </div>
            </div>
        </div>
    </section>

I get this: enter image description here

Why doesnt wanna apply <header class"d-flex justify-content-between"> ?

Upvotes: 0

Views: 51

Answers (1)

doğukan
doğukan

Reputation: 27421

Because you're using <hr> in flex container and <hr> going to right. Just remove the hr inside header.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<section class="card">
  <div class="row no-gutters">
    <div class="col-sm-4">
      <img src="https://picsum.photos/id/536/354" alt="" class="img fluid card-img ad-image-list">
    </div>
    <div class="col-sm-8">
      <div class="card-body">
        <header class="d-flex justify-content-between">
          <h6>Title</h6>
          <h6>Price</h6>
        </header>
        <hr>
        <p class="card-text">{{ad.description}}</p>
      </div>
    </div>
  </div>
</section>

Upvotes: 3

Related Questions