How do I add an image in a bootstrap card? - html

Question

I am trying to attach an image in a specific area in a card, but I don't know how to. I am sorry if it's a very silly question, I am a total beginner in terms of html. So can anyone please show me how to do it? It would have been really useful.
I am using Django. For example, If I want to add an image in that specific blue outlined area, what should I do?
My code
{% for fixture in fixtures %}
<div class="card bg-light">
<div class="card-header" style="color:red;" >
Featured
</div>
<div class="card-body">
<h5 class="card-title" style="color:black;">{{ fixture.home_team }} vs {{ fixture.away_team }}</h5>
<p class="card-text" style="color:black;">{{ fixture.description }}</p>
<form style="color:black;">
<h5><label for="watching">Watching?</label>
<input type="checkbox" id="watching" name="watching" value="watching">
</h5>
</form>
</div>
</div>
{% endfor %}

Answer 1

Give this a try
<div class="card bg-light">
<div class="card-header" style="color:red;" >
Featured
</div>
<div class="card-body">
<div class="row">
<div class="col col-md-6">
<h5 class="card-title" style="color:black;">{{ fixture.home_team }} vs {{ fixture.away_team }}</h5>
<p class="card-text" style="color:black;">{{ fixture.description }}</p>
<form style="color:black;">
<h5><label for="watching">Watching?</label>
<input type="checkbox" id="watching" name="watching" value="watching">
</h5>
</form>
</div>
<div class="col col-md-6">
<img src="https://lab.oliveiraweb.com.br/images-for-samples/owl.jpg" class="img-fluid">
</div>
</div>
</div>
</div>