Search code examples
cssbootstrap-4fixedsticky

How to make left and right Grid sticky, and Middle one scrollable in Bootstrap 4

I am using Bootstrap 4 for Website Homepage. I have used 3 grids, col-md-3, col-md-6, col-md-3. I want 1st and last grid to be sticky on Position and middle to be scrollable.


            <div class="col-lg-3 d-none d-md-block">
               //want sticky on fixed left position
            </div>
            <div class="col-lg-6">
               //all contents in middle scrollable
            </div>
            <div class="col-lg-3 d-none d-md-block">
              //want sticky on fixed right position
            </div>

View Image description here

Check code here

Solution

  • Simplest way is to use the Bootstrap sticky-top class. 

    <div class="container" style="position:relative; margin-top:100px">
    <div class="row">
        <div class="col-lg-3 d-none d-md-block">
            <ul class="list-group shadow bg-white rounded sticky-top">
                ..
            </ul>
            <hr class="d-sm-none">
        </div>
        <div class="col-md-6">
            <div class="card shadow bg-white rounded">
                //
            </div>
            <hr class="d-sm-none">
        </div>
        <div class="col-md-3 d-none d-md-block">
            <ul class="list-group shadow bg-white rounded sticky-top">
                ..
            </ul>
            <hr class="d-sm-none">
        </div>
    </div>
</div>

    https://codeply.com/p/AUtPqy2GY2

    EDIT

    If there is something else (like a navbar or header) above the sticky items, override the top of sticky-top class accordingly to offset the height...

    .sticky-top {
    top: 100px; /* height of header */
}