CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Ave
Ave

Reputation: 107

How to use bootstrap to make text + image responsive side by side?

I want to place a paragraph float to the left, while an image floats to the right.

(working demo -> https://jsfiddle.net/DTcHh/6557/)

There will be some paragraphs without an image, so I was wondering how I would be able to make this responsive. As of now, when I resize the window, nothing stacks or changes.

I wanted to incorporate using

<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>

But it doesn't seem to be working the way I want it to. Thank you!

Upvotes: 1

Views: 950

Answers (1)

AndrewL64
AndrewL64

Reputation: 16301

I made a quick fiddle here: https://jsfiddle.net/AndrewL32/e0d8my79/42/ with text on the left and an image on the right and they seem to be stacking as they should.

I think the reason why your columns are not stacking is probably because you didn't link your bootstrap files properly (on the jsfiddle you made and most probably in your html file too).

Try adding this line to your <head>....</head> section:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">

And check if that helps.

Upvotes: 1

Related Questions