Bootstrap - How do I align images to be next to my text elements?

Report · Jan 14, 2018

Hi there.

This is my site at the moment. I want to put an image in the space I've left between each segment of text.

For example, in this space.

Whenever I try, however, I can never accomplish this. I tried to find a list of div information, because I don't understand bootstrap just yet, but couldn't. I'm using the starter template.

Report · Jan 14, 2018

IF you want to maintain a flush left-margin on the text and not for the text to wrap around the image then here's a solution below. If you just want the text to wrap around the image then you just need class="pull-left" on the images.

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap</title>

<style>

.staff {

width: 90%;

margin: 0 auto;

}

.staff img {

max-width: 40%;

}

.staff h4, .staff p {

margin-left: 44%;

}

@media screen and (max-width: 1200px) {

.staff .col-md-4 {

margin-top: 20px;

}

@media screen and (max-width: 480px) {

.staff img {

max-width: 100%;

margin: 0 0 30px 0;

}

.staff h4, .staff p {

margin-left: 0;

}

</style>

<body>

<h4>Reece</h4>

<p>Web developer and api designer. Also designed the whitelist and authentication system</p>

</div>

<h4>Aklixio</h4>

<p>He started the Axtrivys project with one goal in mind: to make the simplest, most powerfull script that any person could get.</p>

</div>

<h4>Wally</h4>

<p>Wally helps out here and ther with stuff, and is generally annoying. He made most of the gui.</p>

</div>

</div>

</div>

</body>

</html>

Report · Jan 14, 2018

Cheers man!

Report · Jan 14, 2018

See screenshot.

Also add clearfix class to any tag after the floated text. See my code below.

<!doctype html>

<head>

<title>Bootstrap 3.3.7 Starter</title>

</head>

<body>

<h1>Hello World!</h1>

<h2>Bootstrap 12-box grid system</h2>

</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam obcaecati quia magni dolores sunt. Voluptates, accusantium, officia? Molestiae amet quaerat veniam. Dolorum at sit expedita repudiandae voluptas tenetur ducimus ratione.</p>

<p class="clearfix"></p>

</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam illo non libero architecto. Tempora nesciunt et, sed incidunt, eaque reprehenderit harum, blanditiis vero aperiam nam pariatur maxime vitae. Placeat, quidem.</p>

<p class="clearfix"></p>

</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam illo non libero architecto. Tempora nesciunt et, sed incidunt, eaque reprehenderit harum, blanditiis vero aperiam nam pariatur maxime vitae. Placeat, quidem.</p>

<p class="clearfix"></p>

</div>

</div>

</div>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jan 14, 2018

That's probably what the OP is aiming for but from the image they posted it looks like they are trying to insert the images outside of the text columns, so the text if it it exceeds past the image doesnt wrap around the image. That could be deliberate or as a result of not knowing what they are doing.

Report · Jan 14, 2018

For visual interest, I would use contextual panels (BS3) or cards (BS4) with images above or below text.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jan 14, 2018

https://forums.adobe.com/people/Nancy+OShea wrote
For visual interest, I would use contextual panels (BS3) or cards (BS4) with images above or below text.

If that's what the OP wants. All they seem to want at the moment is the image to go to the left of the text, either with the text wrappng around it or as suggested in the image they posted, not.

If I was a mind-reader I could tell you but I'm not although sometimes in this forum it would be benefical to be so.

Report · Jan 14, 2018

omg! thank you guys! this is what i was looking for

Bootstrap - How do I align images to be next to my text elements?

1 Correct answer