I want a Navbar and 3 column layout where only the center column scrolls and the rest stay on the screen. (nav and left and right column are sticky) Also the left and right column should collapse on mobile (which they do)
Here is what I have
<nav> //lots of stuff here </nav>
<div class="container-fluid">
<div class ="row">
<div class ="col-md-2 sticky-top">
</div>
<div class ="col-md-8">
//this should be the scrollable column.
</div>
<div class ="col-md-2 sticky-top">
</div>
</div>
</div>
I have been trying the 'sticky-top' bootstrap class to no success.
You just need to wrap sticky-top div inside your col div
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<nav class="p-3"> //lots of stuff here </nav>
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<div class="sticky-top">
Fixed content //this should be the scrollable column. Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam molestiae alias nemo delectus adipisci iem ipsum dolor sit amet consectetur adipisicing elit. At vero vitae rem quaerat quod reiciendis
expedita itaque ipsum unde magnam nisi laudantium cumque cupiditate aspernatur, provident dicta, dolorum sed dignissimos.
</div>
</div>
<div class="col-md-8">
//this should be the scrollable column. Lorem ipsum dolor sit amet consectetur adipisicing itaque ipsum unde magnam nisi laudantium cumque cupiditate aspernatur, provident dicta, dolorum sed dignissimos. r rerum quasi odit debitis. Quo blanditiis perferendis
animi pariatur quod! Odit, exercitationem odio. Lorem ipsum dolor sit amet consectetur adipisicing elit. At vero vitae rem quaerat quod reiciendis expedita itaque ipsum unde magnam nisi laudantium cumque cupiditate aspernatur, provident dicta, dolorum
sed dignissimos. //this should be the scrollable column. Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam molestiae alias nemo delectus adipisci ipsum placeat quo obcaecati quia blanditiis ad quis itaque sit enim impedit illo, veniam
eos dignissimos? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat exercitationem laboriosam expedita, odio perferendis explicabo obcaecati pariatur rerum quasi odit debitis. Quo blanditiis perferendis animi pariatur quod! Odit, exercitationem
odio. Lorem ipsum dolor sit amet consectetur adipisicing elit. At vero vitae rem quaerat quod reiciendis expedita itaque ipsum unde magnam nisi laudantium cumque cupiditate aspernatur, provident dicta, dolorum sed dignissimos. //this should be the
scrollable column. Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam molestiae alias nemo delectus adipisci ipsum placeat quo obcaecati quia blanditiis ad quis itaque sit enim impedit illo, veniam eos dignissimos? Lorem ipsum dolor
sit amet consectetur adipisicing elit. Quaerat exercitationem laboriosam expedita, odio perferendis explicabo obcaecati pariatur rerum quasi odit debitis. Quo blanditiis perferendis animi pariatur quod! Odit, exercitationem odio. Lorem ipsum dolor
sit amet consectetur adipisicing elit. At vero vitae rem quaerat quod reiciendis expedita itaque ipsum unde magnam nisi laudantium cumque cupiditate aspernatur, provident dicta, dolorum sed dignissimos. //this should be the scrollable column. Lorem
ipsum dolor sit amet consectetur adipisicing elit. Numquam molestiae alias nemo delectus adipisci ipsum placeat quo obcaecati quia blanditiis ad quis itaque sit enim impedit illo, veniam eos dignissimos? Lorem ipsum dolor sit amet consectetur adipisicing
elit. Quaerat exercitationem laboriosam expedita, odio perferendis explicabo obcaecati pariatur rerum quasi odit debitis. Quo blanditiis perferendis animi pariatur quod! Odit, exercitationem odio. Lorem ipsum dolor sit amet consectetur adipisicing
elit. At vero vitae rem quaerat quod reiciendis expedita itaque ipsum unde magnam nisi laudantium cumque cupiditate aspernatur, provident dicta, dolorum sed dignissimos. //this should be the scrollable column. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Numquam molestiae alias nemo delectus adipisci ipsum placeat quo obcaecati quia blanditiis ad quis itaque sit enim impedit illo, veniam eos dignissimos? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat exercitationem
laboriosam expedita, odio perferendis explicabo obcaecati pariatur rerum quasi odit debitis. Quo blanditiis perferendis animi pariatur quod! Odit, exercitationem odio. Lorem ipsum dolor sit amet consectetur adipisicing elit. At vero vitae rem quaerat
quod reiciendis expedita itaque ipsum unde magnam nisi laudantium cumque cupiditate aspernatur, provident dicta, dolorum sed dignissimos. //this should be the scrollable column. Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam molestiae
alias nemo delectus adipisci ipsum placeat quo obcaecati quia blanditiis ad quis itaque sit enim impedit illo, veniam eos dignissimos? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat exercitationem laboriosam expedita, odio perferendis
explicabo obcaecati pariatur rerum quasi odit debitis. Quo blanditiis perferendis animi pariatur quod! Odit, exercitationem odio. Lorem ipsum dolor sit amet consectetur adipisicing elit. At vero vitae rem quaerat quod reiciendis expedita itaque
ipsum unde magnam nisi laudantium cumque cupiditate aspernatur, provident dicta, dolorum sed dignissimos. //this should be the scrollable column. Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam molestiae alias nemo delectus adipisci
ipsum placeat quo obcaecati quia blanditiis ad quis itaque sit enim impedit illo, veniam eos dignissimos? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat exercitationem laboriosam expedita, odio perferendis explicabo obcaecati pariatur
rerum quasi odit debitis. Quo blanditiis perferendis animi pariatur quod! Odit, exercitationem odio. Lorem ipsum dolor sit amet consectetur adipisicing elit. At vero vitae rem quaerat quod reiciendis expedita itaque ipsum unde magnam nisi laudantium
cumque cupiditate aspernatur, provident dicta, dolorum sed dignissimos.
</div>
<div class="col-md-2 ">
<div class="sticky-top">
Fixed content //this should be the scrollable column. Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam molestiae alias nemo delectus adipisci iem ipsum dolor sit amet consectetur adipisicing elit. At vero vitae rem quaerat quod reiciendis
expedita itaque ipsum unde magnam nisi laudantium cumque cupiditate aspernatur, provident dicta, dolorum sed dignissimos.
</div>
</div>
</div>
</div>