To wrap text around an image in Bootstrap 5, you can apply the ‘float’ utility classes along with the ‘img-fluid’ class for responsive images. This technique involves floating the image to the left or right and creating margins to allow the text to wrap around it.
Approach
-
The code uses Bootstrap 5 classes like
container
,row
, andcol-lg class
to structure the layout. -
The
float-end
class is used to float the image to the right, allowing the text to wrap around it. -
The
imgshadow
class adds a shadow effect to the image using CSS. -
The
img-fluid
class ensures the image is responsive and adjusts its size based on the screen size.
Example: This example describes wrapping text around an image in Bootstrap 5 using Float Class.
HTML
<!DOCTYPE html> < html lang = "en" >
< head >
< link href =
rel = "stylesheet" >
< title >Wrap Text</ title >
< style >
.imgshadow {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
</ style >
</ head >
< body >
< section id = "about" class = "about" >
< div class = "container" >
< div class = "row" >
< div class = "col-lg-7 pt-4 pt-lg-0" >
< h1 class = "text-success" >GeeksforGeeks</ h1 >
< h3 >Using Bootstrap 5 Float Class</ h3 >
< h3 ></ h3 >
< br />
< img src =
class = "float-end imgshadow me-3" alt = "" >
< p >
GeeksforGeeks is a leading platform that provides
computer science resources and coding challenges for
programmers and technology enthusiasts,
along with interview and exam preparations
for upcoming aspirants.
With a strong emphasis on enhancing
coding skills and knowledge, it has
become a trusted destination for
over 12 million plus registered users worldwide.
The platform offers a vast collection of tutorials,
practice problems, interview tutorials, articles, and courses,
covering various domains of computer science.
</ p >
</ div >
</ div >
</ div >
</ section >
< script src =
</ script >
</ body >
</ html >
|
Output:
Example: This example also describes wrapping text around an image.
HTML
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" >
< title >Text Wrapping Around Image</ title >
< link href =
rel = "stylesheet" >
</ head >
< body >
< div class = "container" >
< div class = "row" >
< div class = "col-md-6" >
< img src =
alt = "Placeholder Image"
class = "img-fluid float-md-end me-md-3 mb-3" >
< p >
How many times were you frustrated while looking
out for a good collection of programming/algorithm
interview questions? What did you expect and what
did you get? This portal has been created to
provide well-written, well-thought, and well
explained solutions for selected questions.
</ p >
< p >
An IIT Roorkee alumnus and founder of GeeksforGeeks.
He loves to solve programming problems in the most
efficient ways. Apart from GeeksforGeeks, he has
worked with DE Shaw and Co. as a software developer
and JIIT Noida as an assistant professor. It is a
good platform to learn programming. It is an
educational website. Prepare for the Recruitment
drive of product-based companies like Microsoft,
Amazon, Adobe, etc., with a free online placement
preparation course.
</ p >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output: