CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-designcss-position
v1k45
v1k45

Reputation: 8250

Make bootstrap column content fixed positioned

I have a bootstrap row with two columns and some offset. I want the last column to be fixed positioned so that It can be viewed while scrolling too. The last column has image content in it.

I used affix class which comes with bootstrap to position a div in the last column as fixed. But it resizes/overflows the image in the last column.

You can check these jsfiddles to get the idea of what I'm talking about:

  1. Without fixed position/.affix: https://jsfiddle.net/tpw9n2e7/1/

  2. With fixed poisition/.affix: https://jsfiddle.net/tpw9n2e7/2/

How do I make the div fixed without resizing or overflowing contents in the child div?

Upvotes: 1

Views: 612

Answers (1)

DennisFrea
DennisFrea

Reputation: 1122

I think your .affix div will not follow the above div col-md-4 since its position is fixed.

You must add a class of the parent div into the .affix class so the child content will follow the .affix.

  <div class="col-sm-4">
   <div class="affix col-sm-4">
     <img src="http://via.placeholder.com/450x750" class="img-responsive"/>
     <br/>
     Fixed Content
    </div>
  </div>

Upvotes: 3

Related Questions