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

i want to show image next to text. But its showing below it Here is the code

<div >  
  <div >
        <div >
            <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&#39;s standard …   
        </div>
        <div >
            <img src="/media/post/Screenshot_from_2022-07-17_23-55-13.png"  >
        </div>
        <div><a href="/blog/first-post" >Read More..</a></div>
        
        <div >
            <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&#39;s standard …   
        </div>
        <div >
            <img src="/media/post/0a61bddab956.png"  >
        </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 >
    <h1>{{ post.title}}</h1>
    {{ post.content |truncatewords:20 | safe}}   
</div>
<div >
    <img src="/media/{{post.image}}"  >
</div>
<div><a href="/blog/{{post.slug}}" >Read More..</a></div>
{% endfor %}

Here is base.html file code

<div >  
  <div >
{%block content %}

{%endblock%}
  </div> 
</div>

I think truncatewords:20 is causing the issue.

Replacing it with truncatewords_html:20 resolved the issue

CodePudding user response：

Use d-inline class on image and text.

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<div >
  <div >
    <div >
      <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&#39;s standard …
      </div>
    </div>
      <div >
        <img src="/media/post/Screenshot_from_2022-07-17_23-55-13.png" >
      </div>
      <div><a href="/blog/first-post">Read More..</a></div>

      <div >
        <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&#39;s standard …
        </div>
    </div>
        <div >
          <img src="/media/post/0a61bddab956.png" >
        </div>
        <div><a href="/blog/2nd-post">Read More..</a></div>
      </div>
    </div>

CodePudding user response：

I think a should not hold col sum greater than 12. Reformat your code like below.

<div >  
    <div >
        <div >
            <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&#39;s standard …   
        </div>
        <div >
            <img src="/media/post/Screenshot_from_2022-07-17_23-55-13.png"  >
        </div>
    </div>
    <div><a href="/blog/first-post" >Read More..</a></div>
    <div >
        <div >
            <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&#39;s standard …   
        </div>
        <div >
            <img src="/media/post/0a61bddab956.png"  >
        </div>
    </div>
    <div><a href="/blog/2nd-post" >Read More..</a></div>
</div>