How can I create scrollable columns in Bootstrap?

To achieve this, you will first need to give each column a class. Then you need to give them the following properties:

.your-class {
    position: absolute;
    overflow-y: scroll;
}

You may also want to give your body the property overflow: hidden;

Please tell me if this works and if not I'll help further!

Edit: Created a JSFiddle

https://jsfiddle.net/mjmwaqfp/2/


Following answer https://stackoverflow.com/a/53897001/11620296 shows solution with bootstrap 4 which works perfectly for me. It has updated demo https://www.codeply.com/go/ouc3hddx5i

Code:

html

<div class="container-fluid h-100 d-flex flex-column">
    <div class="row flex-shrink-0">
        <div class="col-12 border">Navbar </div>
    </div>
    <div class="row flex-fill" style="min-height:0">
        <div class="col-2 border mh-100" style="overflow-y: scroll;">Sidebar </div>
        <div class="col-4 border mh-100" style="overflow-y: scroll;">
            Article list
            <p>Sriracha biodiesel taxidermy organic post-ironic, Intelligentsia salvia mustache 90's code editing brunch. Butcher polaroid VHS art party, hashtag Brooklyn deep v PBR narwhal sustainable mixtape swag wolf squid tote bag. Tote bag cronut semiotics,
                raw denim deep v taxidermy messenger bag. Tofu YOLO Etsy, direct trade ethical Odd Future jean shorts paleo. Forage Shoreditch tousled aesthetic irony, street art organic Bushwick artisan cliche semiotics ugh synth chillwave meditation.
                Shabby chic lomo plaid vinyl chambray Vice. Vice sustainable cardigan, Williamsburg master cleanse hella DIY 90's blog.</p>

            <p>Ethical Kickstarter PBR asymmetrical lo-fi. Dreamcatcher street art Carles, stumptown gluten-free Kickstarter artisan Wes Anderson wolf pug. Godard sustainable you probably haven't heard of them, vegan farm-to-table Williamsburg slow-carb
                readymade disrupt deep v. Meggings seitan Wes Anderson semiotics, cliche American Apparel whatever. Helvetica cray plaid, vegan brunch Banksy leggings +1 direct trade. Wayfarers codeply PBR selfies. Banh mi McSweeney's Shoreditch selfies,
                forage fingerstache food truck occupy YOLO Pitchfork fixie iPhone fanny pack art party Portland.</p>

        </div>
        <div class="col-6 border" style="overflow-y: scroll;">Article content </div>
    </div>
    <div class="row flex-shrink-0">
        <div class="col-12 border">Footer </div>
    </div>
</div>

css

html,body {
    height: 100%;
}