So I need to position text next to an image using bootstrap. It should look something like: this

The code I have:

<div id="picture">
        <img src="img/preview.jpg">
    </div>
    
    <div id="description">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <br> 
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. <br> 
        It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
</div>

CodePudding user response：

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div >
  <div >
    <div >
      <img src="https://images.unsplash.com/photo-1656614291920-80ff97b2cf35?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw=&auto=format&fit=crop&w=500&q=60" >
    </div>
    <div >
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        <br> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. <br> It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
        with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

    </div>
  </div>
</div>

-Bootstrap works on 12 grid systems.

• ```row`` contains 12 grid.
• we can divide all 12 grid with col. for your lay out I have divided it into col-8 for image and col-4 for text.

<div >
 <div >
   <div >
     <img>
   </div>
   <div >
     //content
   </div>
 </div>
</div>

CodePudding user response：

Try something like this

<div >

<img   src="">
<p >line one <br> line two</p>

</div>

CodePudding user response：

You can try using bootstrap's conventional layout (12 cols grid)

<div >
  <div >
    <div >
      <img src="" alt="picture"/>
    </div>
    <div >
      "content"
    </div>
  </div>
</div>