How to Wrap Text Around Image in Bootstrap ?
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 = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 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" >w3wiki</ h1 > < h3 >Using Bootstrap 5 Float Class</ h3 > < h3 ></ h3 > < br /> < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/20190710102234/download3.png" class = "float-end imgshadow me-3" alt = "" > < p > w3wiki 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 = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" > </ 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 = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel = "stylesheet" > </ head > < body > < div class = "container" > < div class = "row" > < div class = "col-md-6" > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/20190710102234/download3.png" 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 w3wiki. He loves to solve programming problems in the most efficient ways. Apart from w3wiki, 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:
Contact Us