CODEWITHSUNDEEP
twitter-bootstrap
ШайтанЯкубович
ШайтанЯкубович

Reputation: 91

How to make a card in Bootstrap 5?

I am a back-end developer and now I need to work a little with the front). You need to make a card so that it looks like this enter image description here

But I get something like this enter image description here

I can't align the text to the center of the block, because the picture interferes. My code looks like this:

<div class="row ms-1 me-1 card rounded-3 mt-3" >
      <div class="d-flex align-items-center col-12">
            <div class="float-start ">
                <img class="rounded-3" src="{{$link->photo}}" style="width:50px;">
            </div>
            <div class="text-center">
                <h4 class="mt-1">{{$link->title}}</h4>
            </div>
      </div>                        
</div>

Upvotes: 0

Views: 106

Answers (1)

Mihai
Mihai

Reputation: 26784

Add a h-100 class

<div class="row ms-1 me-1 card rounded-3 mt-3" >
      <div class="d-flex  h-100 align-items-center col-12">
            <div class="float-start ">
                <img class="rounded-3" src="{{$link->photo}}" style="width:50px;">
            </div>
            <div class="text-center">
                <h4 class="mt-1">{{$link->title}}</h4>
            </div>
      </div>                        
</div>

Upvotes: 1

Related Questions