How to use d-flex justify-content-between in bootstrap 4?

Viewed 193

I have a psd like this and I want to design like this.

psd

But I see this demo

demo

<div class="card rounded">
    <div class="card-body">
        <div class="float-right">
            <h5>مشاوره خرید چرا مطلاعه</h5>
        </div>
        <div class="float-left">
            <a href="#" class="btn btn-outline-success">خرید</a>
            <a href="#" class="btn btn-outline-warning">در حال انجام</a>
            <span>5 ساعت پیش</span>
        </div>
        <hr>
        <div class="float-right">
            <img src="https://i.pinimg.com/564x/51/f6/fb/51f6fb256629fc755b8870c801092942.jpg" class="mr-1 rounded-circle w-25 h-25">
            <span>2 نفر به درخواست شما پاسخ داده اند</span>
        </div>
        <div class="float-left">
            <a href="#" class="btn btn-outline-success">حدف</a>
            <a href="#" class="btn btn-outline-warning">جزییات شما</a>
        </div>
    </div>
</div>

Whatever I thought, How this is done, I don't know.

I am creating a simple Express web server that serves a landing page made with bootstrap, but I can't get any Flexbox examples to work.

1 Answers

can use default bootstrap classes,

<div class="col-sm-6 text-left">left content</div>
<div class="col-sm-6 text-right">right content</div>

for v-align, use class "align-self-center"

Related