Wrapping Text Around in Image Within A Bootstrap Column
Question
Very new to coding and was hoping for some help with a layout question regarding bootstrap.
I have an image and a paragraph element both within a column I created based on trying to utilize the grid system in bootstrap. I would like the image to float left, and have the text then sit to the right side of the image and proceed to wrap around the bottom to fill the width of the column.
The example of what I would like it to look like can be seen here: Layout Goal
The my current situation is however that the text will only sit below the image: Layout Current
I have created a row within the main container, and within that row two columns. One is given an md-8 width (and holds my image and paragraph element) and another is given an md-4 width and is just a space holder, as I have to make my content 2/3 the container width.
The code I used Is here:
<section class="row">
<div class="col-md-8 background-white py-3">
<img src="/assets/ProjectImages/AboutMe300299.jpg" class="rounded float-left" alt="Me and My Fam">
<p class="float-left"> <!--have to figure out how to wrap this-->
Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio
Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio
Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio
Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio
</p>
</div>
<div class="col-md-4">
<!--Space Holder-->
</div>
</section>
I am using the float-left class bootstrap recommends, and also including the image and paragraph element in the same column as I read this was recommended. Any ideas of a better way to do this or what I am doing wrong? Thanks!
1 answers
solution1
0 ACCPTED 2020-12-15 02:08:54
I am providing solutions for both Bootstrap 4 and Bootstrap 5. For more detailed information, I recommend you to review the documents about clearfix and w-100 from Bootstrap's web site.
This is Bootstrap 4 solve:
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min:css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <title>Document</title> </head> <body> <section class="row"> <div class="col background-white py-3"> <div class="clearfix"> <img src="https.//picsum.photos/100/100" class="col-md-2 w-25 rounded float-left" alt="..:"> <p class="d-inline"> <.--have to figure out how to wrap this--> Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio </p> </div> </div> <div class="col-md-4"> <.--Space Holder--> </div> </section> <.-- <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script> --> </body> </html>
This is Bootstrap 5 solve:
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min:css" rel="stylesheet"/> <title>Document</title> </head> <body> <section class="row"> <div class="col background-white py-3"> <div class="clearfix"> <img src="https.//picsum.photos/100/100" class="col-md-4 mb-3 ms-md-3 rounded float-sm-start" alt="..:"> <p> <.--have to figure out how to wrap this--> Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio Lorem Ipsum My Bio </p> </div> </div> <div class="col-md-4"> <.--Space Holder--> </div> </section> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.