I am trying to wrap text around an image so that it wraps next to the image and below the image. This is especially desired for responsiveness \ resizing pages. Here is how one of the standard temaplates appears on a wide screen:
When the page shrinks, it changes to this:
But, as the screen shrinks, I want the text to wrap beside AND across, under the image:
I cannot find an example of this behavious in any of the templates. Surely it can be done?
Any help appreciated.
Sean
1 Correct answer
yes... you're so right... I always loved this one https://www.youtube.com/watch?v=Q5KKVC3JyJA... well, not in the same way than the previous link about a moment of pure emotion
64
Replies
Which is more important to site users?
Responsive: being able to see appropriately scaled image and text on ANY sized device?
Non-Responsive: text that wraps around a static sized image with old fashioned floats?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4.5 Starter Page</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Bootstrap 4.5 on CDN-->
<link rel="stylesheet" href="
https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body style="padding-top: 70px">
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Brand/Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<header class="container-fluid bg-info text-light">
<div class="row">
<div class="col">
<h1>Bootstrap 4.5 in Dreamweaver</h1>
</div>
</div>
</header>
<main class="container my-3">
<div class="row">
<div class="col-md-12">
<h2 class="text-info">1 Column, Floated image</h2>
<p><img class="float-right" src="https://dummyimage.com/500x350" alt="placeholder">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta reprehenderit eaque incidunt dolorum quo ea expedita quibusdam obcaecati repellat atque deleniti molestias, quas aperiam accusamus, esse quos deserunt natus! Recusandae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta reprehenderit eaque incidunt dolorum quo ea expedita quibusdam obcaecati repellat atque deleniti molestias, quas aperiam accusamus, esse quos deserunt natus! Recusandae.</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-6">
<h2 class="text-info">Responsive, 2 Columns</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum tenetur ipsa tempore sed, a cupiditate mollitia aliquid delectus corporis accusamus pariatur atque voluptates deserunt debitis, odit omnis suscipit dolore natus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum tenetur ipsa tempore sed, a cupiditate mollitia aliquid delectus corporis accusamus pariatur atque voluptates deserunt debitis, odit omnis suscipit dolore natus.</p>
</div>
<div class="col-md-6">
<img class="img-fluid" src="https://dummyimage.com/500x350" alt="placeholder">
</div>
</div>
</main>
<footer class="container-fluid text-center bg-info text-light p-4">
<p>Some footer text here...</p>
</footer>
<!--Supporting scripts: first jQuery, then popper, then Bootstrap JS, etc...-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>
Hope that helps.
By @BenPleysier
Thanks Ben - Would have to say: about time. But what happens when a user on IE11 opens a BS5 page? Do they get a popup, or something, recommending they get a new browser - Or does it just act weird?
So I figured I would ask the pro's the best way to do it and it sounds like "Bootstrap" is the way to go.
Bootstrap isnt the way to go, it just bloats the code and imports redundant js and redundant css into a website which doesnt need it, unless you throw it a bespoke version of Bootstrap and l dont know many if any developer that can be bothered to go through that process.
Using the default version of Bootstrap is a bit like filling up a spare room full of rubbish you cant be bothered to throw away but will never use. Its bad management that will eventually catch up with you.
You should avoid all frameworks if you are are serious web developer, anyone else is free to use what they want.
What you're asking for is as simple as below (no framework required, its basic, basic css).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Wrap Text Around Image</title>
<style>
.imgWrap {
width: 80%;
margin: 0 auto;
}
.imgWrap img {
float: right;
margin: 0 0 0 30px;
}
@media screen and (max-width: 768px) {
.imgWrap {
width: 90%;
}
}
@media screen and (max-width: 768px) {
.imgWrap img {
float: none;
margin: 0;
max-width: 100%;
}
}
</style>
</head>
<body>
<section class="imgWrap">
<img src="images/apples.jpg" alt="">
<h3>CONTENT HEADING</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.</p>
</section>
</body>
</html>
Having said that I think maybe the default templates might not cover what you required as wrapping text around images seems a bit dated these days, I think. Thats not to say you might not need to do it in a limted capacity and knowing how can be useful.
Hi osgood_,
Great to hear your `bloating` remarks. While the rest of the world gets on developing websites using Bootstrap, I believe that you have retired in disgust. It is a nice concise exmple that you have shown, nothing but praise. If the world of web development was that easy, merely coding for one image.
What if you want to include a modal? One that has a form with floating labels for the form fields and a switch that replaces the boring check box.
What if you want to include an accordion, or a navigation-bar that collapses for smaller screen sizes? What if you wanted to create a card that displays important information?
I could go on and on. All of the above is possible simply by adding a class to the element.
Rather than `a room full of junk`, regard Bootstrap as a Swiss army knife.
...the informative pages of my sites tend to mix photos and graphics with maps, which have to be big enough to read.
============
That's nothing new or extraordinary, though. Look at what online magazines, news agencies and e-book publishers do. Then ask yourself why the pros don't use floats. Perhaps you would get what you want with bigger images and smaller text columns like this:
<main class="container">
<div class="row">
<div class="col-lg-4">
<h2 class="text-info">Responsive, 2 Columns</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum tenetur ipsa tempore sed, a cupiditate mollitia aliquid delectus corporis accusamus pariatur atque voluptates deserunt debitis, odit omnis suscipit dolore natus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum tenetur ipsa tempore sed, a cupiditate mollitia aliquid delectus corporis accusamus pariatur atque voluptates deserunt debitis, odit omnis suscipit dolore natus.</p>
</div>
<div class="col-lg-8">
<img class="img-fluid" src="https://dummyimage.com/900x550" alt="placeholder">
</div>
</div>
</main>
I think I will be bothering you for some further suggestions on the coding - Such as setting image sizes and preventing the next section from encroaching into the first.
No problem, once you have an example post to the forum, I'm sure one of us can help you out.
In terms of the image size you'll probably need an image of at least 768px wide so it can consume the browser from edge to edge in tablet devices and smartphone devices once you go to a one column layout, whilst for the desktop layout you can set it at a specific width like 50% of the parent container so its still responsive as you narrow the browser window or you could set it at a specific px width if you require the image to maintain a specific width on desktop.
You could use srcset to serve different sized images for different width devices BUT I think that subject is for another day.
AdChoices
