How to create card with bootstrap 4?

I have a psd like this

But I see this demo.

I want to create a user image in image card..

html

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="card">
                <img src="image/shopping.png" class="card-img-top position-relative">
                <div class="card-body">
                    <i class="fas fa-eye"></i>
                    <span>124</span>
                    <img src="image/one.png" class="w-25 m-auto rounded-circle position-absolute user">
                    <i class="fas fa-comment"></i>
                    <span>2</span>
                    <h5 class="card-title text-center mt-5">فروشگاه ساز چیست؟ دو نوع مختلف فروشگاه سازها را بشناسید.</h5>
                    <p class="card-text text-center">زمانی که شما قصد ساختن یک فروشگاه آنلاین را دارید، به سیستمی نیاز خواهید داشت که این فروشگاه را برای شما مدیریت کند.</p>
                    <a href="#" class="btn btn-primary btn-block">بیشتر بخوانید</a>
                </div>
            </div>
        </div>
    </div>
</div>

css

.user {
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
}

How to create this card grid inside container(Bootstrap 4)? I don't understand how i can put text in container if text in div(card).

hjortur17

5 years ago

Level 14

Just start simple, follow Bootstrap4 documentation on how to make cards, and then add one thing at a time.

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some 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>

This is a simple card.

Here is a link to there documentation on cards: https://getbootstrap.com/docs/4.5/components/card/

Please or to participate in this conversation.