Show image next to text using CSS/Bootstrap and django jinja 2 - css

Question

i want to show image next to text. But its showing below it
Here is the code
<div class="container">
<div class="row">
<div class="col-md-8">
<h1>This is my first post</h1>
<div> <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard …
</div>
<div class="col-md-4">
<img src="/media/post/Screenshot_from_2022-07-17_23-55-13.png" class="img-thumbnail" >
</div>
<div><a href="/blog/first-post" >Read More..</a></div>
<div class="col-md-8">
<h1>this is second post</h1>
<div> <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard …
</div>
<div class="col-md-4">
<img src="/media/post/0a61bddab956.png" class="img-thumbnail" >
</div>
<div><a href="/blog/2nd-post" >Read More..</a></div>
</div>
</div>
This is how it look like
EDIT. I copied this from view-source and some text is cut off there. Actually i am using Django jina 2 template code
{% for post in context %}
<div class="col-md-8">
<h1>{{ post.title}}</h1>
{{ post.content |truncatewords:20 | safe}}
</div>
<div class="col-md-4">
<img src="/media/{{post.image}}" class="img-thumbnail" >
</div>
<div><a href="/blog/{{post.slug}}" >Read More..</a></div>
{% endfor %}
Here is base.html file code
<div class="container">
<div class="row">
{%block content %}
{%endblock%}
</div>
</div>
I think truncatewords:20 is causing the issue.
Replacing it with truncatewords_html:20 resolved the issue

Answer 1

Use d-inline class on image and text.

Answer 2

The problem is with your HTML Code you didn't close the div of class col-md-8
Check now the code in large screen the text and image are next to each others
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-md-8">
<h1>This is my first post</h1>
<div>
<p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard …
</div>
</div>
<div class="col-md-4">
<img src="/media/post/Screenshot_from_2022-07-17_23-55-13.png" class="img-thumbnail">
</div>
<div>Read More..</div>
<div class="col-md-8">
<h1>this is second post</h1>
<div>
<p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard …
</div>
</div>
<div class="col-md-4">
<img src="/media/post/0a61bddab956.png" class="img-thumbnail">
</div>
<div>Read More..</div>
</div>
</div>

Answer 3

I think a class="row" should not hold col sum greater than 12. Reformat your code like below.
<div class="container">
<div class="row">
<div class="col-md-8">
<h1>This is my first post</h1>
<div> <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard …
</div>
<div class="col-md-4">
<img src="/media/post/Screenshot_from_2022-07-17_23-55-13.png" class="img-thumbnail" >
</div>
</div>
<div><a href="/blog/first-post" >Read More..</a></div>
<div class="row">
<div class="col-md-8">
<h1>this is second post</h1>
<div> <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard …
</div>
<div class="col-md-4">
<img src="/media/post/0a61bddab956.png" class="img-thumbnail" >
</div>
</div>
<div><a href="/blog/2nd-post" >Read More..</a></div>
</div>