I created a bootstrap card with an image on the right side, but it doesn't fill the entire space. Below is the image of my bootstrap card:
https://i.sstatic.net/k7xuT.png
This is the code for my card:
{% for book in thesis_details %}
<div class="card m-3" style="border: 1px solid blue;">
<div class="row g-0">
<div class="col-md-4">
<div class="card-image">
{% if book.image_banner %}
<img src="{{book.image_banner.url}}" class="img-fluid rounded-start" alt="...">
{% else %}
<img src="{% static 'images/placeholder.png' %}" class="img-fluid rounded-start" alt="...">
{% endif %}
</div>
</div>
<div class="col-md-8">
<div class="card-body">
<h2 class="card-title">{{book.title}}</h2>
<h6 class="card-subtitle">Published by: {{book.author}}</h6>
<h6 class="card-subtitle pt-1">Course: {{book.course}}</h6>
<p class="card-text">{{book.abstract|safe|slice:":310"}}...</p>
<a href="/view_studthesis/{{book.thesis_id}}"><button class="btn btn-outline-danger float-bottom" style="">View more</button></a>
</div>
</div>
</div>
</div>
{% endfor %}Here is the CSS for my card:
/* for cards */
.card{
border: 1px solid blue;
font-family: 'Outfit', sans-serif;
}
.card-image{
width: 100%;
height: 250px;
display: flex;
justify-content: center;
overflow: hidden;
}
.card-image img{
object-fit: 100%;
min-width: 100%;
min-height: auto;
}