Tips for creating sticky left and right grids with a scrollable middle section in Bootstrap 4

For my Website Homepage, I am utilizing Bootstrap 4. Within this layout, I have incorporated 3 grids: col-md-3, col-md-6, and col-md-3. My objective is to have the first and last grids remain fixed in position while allowing the middle grid to be scrollable.


            <div class="col-lg-3 d-none d-md-block">
               // Ensure this stays fixed on the left
            </div>
            <div class="col-lg-6">
               // Allow all contents within this grid to scroll
            </div>
            <div class="col-lg-3 d-none d-md-block">
              // Keep this fixed on the right side
            </div>

https://i.sstatic.net/qm92Y.png

You can view the code here

cssbootstrap-4fixedsticky

Answer №1

One way to achieve this is by utilizing 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>

Check out this example for reference

UPDATE

If you have other elements (such as a navbar or header) above the sticky items, remember to adjust the top property of the sticky-top class to accommodate the height...

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

Answer №2

To improve the layout, consider adding a scroll feature to the middle section instead of using the fixed position for 2 elements which can cause issues and extra styling complications in responsive design.

Here's the updated HTML code:

<div class="col-lg-6">
      <div class="fixed">
         //all contents in middle scrollable
      </div>
    </div>

And the corresponding CSS:

.fixed {
        height: calc(100vh - 130px); // Adjust the value of 130px as needed for proper alignment
        overflow: scroll;
    }

Answer №3

Include a custom class in your list-group called myStickyListGroup.

Next, create CSS for that class as shown in the CSS code below.

Then, implement a script to update the position of your list's top using JavaScript, which is provided below.

Make sure to customize the script conditions according to your specific requirements on your webpage.

$(window).on('scroll', function(){
  var windowTop = $(window).scrollTop();
  $('.myStickyListGroup').css({'top': windowTop});
});
.myStickyListGroup{
  position: absolute;
  left: 15px;
  right: 15px;
}
<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Offline</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
   </head>
   <body style="background-color: #eceef4">
      <div class="container" style="position:relative; margin-top:100px">
         <div class="row">
            <div class="col-lg-3 d-none d-lg-block">
               <ul class="list-group myStickyListGroup shadow bg-white rounded">
                  <li class="list-group-item rounded">List Item 1</li>
                  <li class="list-group-item rounded">List Item 2</li>
                  <li class="list-group-item rounded">List Item 3</li>
                  <li class="list-group-item rounded">List Item 4</li>
                  <li class="list-group-item rounded">List Item 5</li>
               </ul>
               <hr class="d-sm-none">
            </div>
            <div class="col-lg-6">
               <div class="card shadow bg-white rounded">
                  <div class="card-body">
                     <h2>TITLE HEADING</h2>
                     <h5>Title description, Dec 7, 2017</h5>
                     <div class="row justify-content-center">
                        <div id="mdb-lightbox-ui"></div>
                        <figure class="col-4">
                           <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(145).jpg" data-size="1600x1067">
                           <img alt="picture" src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(145).jpg" class="img-fluid circle">
                           </a>
                        </figure>
                        (Additional image figures)
                     </div>
                  </div>
               </div>
               (Additional card with images)
            </div>
            <div class="col-lg-3 d-none d-lg-block">
               <ul class="list-group myStickyListGroup shadow bg-white rounded">
                  <li class="list-group-item rounded">List Item 1</li>
                  <li class="list-group-item rounded">List Item 2</li>
                  <li class="list-group-item rounded">List Item 3</li>
                  <li class="list-group-item rounded">List Item 4</li>
                  <li class="list-group-item rounded">List Item 5</li>
               </ul>
               <hr class="d-sm-none">
            </div>
         </div>
      </div>
   </body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Interactive PHP slideshow with Bootstrap

I have created a dynamic carousel, but when I include 'active-item' in the loop, it does not work. The current solution is not ideal. How can I properly include 'active-item'? <form class="form" action="routes.php" method="POST"> ...

phploopsbootstrap-4

Clicking on the accordion twice does not alter the position of the arrow

I have implemented an accordion using "up" and "down" arrows. It works well, but when I click on the panel title again, the arrow does not change direction. Here is the issue: In my scenario, I have used "A" and "B" instead of the arrows. When the page l ...

jquerycss

Having Trouble with Your Instafeed Script

I've been working on a project that involves integrating an Instagram feed into a website. However, I'm facing difficulties getting it to function properly. Here's the code that I have implemented. <script type="text/javascript"> ...

javascriptjqueryhtmlcss

How can this be written in a shorter amount of CSS code?

Seeking a more optimized solution, I am attempting to write CSS transitions for five different elements (medals/badges). Is there a way to achieve the same effect with less code? Below is the current code: #nav .badges { float:left; height: 173px; width: ...

css

Items positioned to the left will not overlap

Having trouble with floating elements? Need to ensure that box 3 aligns under box 1 when resizing the browser window? Use this HTML template: <div class="box"> <p>box 1</p> <p>box 1</p> <p>box 1</p> & ...

htmlcss

Updating text within a specific div using Jquery

After spending the entire morning trying to figure it out, I am still struggling with updating text inside a clicked element without both divs getting updated at the same time. I am determined to find a solution without using IDs or additional classes. If ...

javascriptjqueryhtmlcssclone

Is `html.fa-events-icons-ready` causing clutter and disrupting the layout of the body?

I am seeking some clarification on my code and the resulting issues it is causing. Check out this image for reference: https://i.stack.imgur.com/jBQYd.png Why is the body height not taking up 100% of the space? The background image appears to be affect ...

htmlcsscss-selectorsfont-awesome

Discovering an HTML Element in a JavaScript Array with Specific Styling: A Step-by-Step Guide

I am in the process of developing a website that consists of different sections. The concept is simple - by clicking on a button located at the bottom of the page, it will reveal the corresponding div section. For styling purposes, I have initially hidden ...

javascripthtmlcssarraysfilter

The Bootstrap image fails to adhere to the size of its parent flex container

I am having trouble positioning an image, heading, and a button on top of another image. The issue arises when viewing the content on small screens as the smaller image fails to resize properly and extends beyond the background of the larger holding imag ...

htmlcssbootstrap-4flexboxbootstrap-5

What is the reason for the unexpected bar appearing between my divs?

I'm stumped as to why this random bar is appearing: If you want to take a look, here's the JSFiddle. I really need to remove that annoying yellowish line. And here is the code snippet for reference: body { padding: 0; margin: 0; backgr ...

htmlcss

When writing HTML tags H1-H6, they will automatically adopt the default styles specified in the _type

I am facing issues with my HTML-CSS code as some CSS properties are being overridden unexpectedly. Despite defining custom properties for the h1 tag, I noticed that they are getting overridden by settings from _type.scss file. https://i.sstatic.net/EJ3OE. ...

htmlcssbootstrap-4

The "else" statement is never being executed

Trying to create a form where users enter their first name, last name, and city. If any input is empty or contains numbers, a message should appear requesting to fill out all boxes without numbers. Otherwise, display a personalized quote using the input in ...

javascripthtmlcss

What is the reasoning behind beginning the transition with autofocus enabled?

After creating a contact form with autofocus="autofocus", a strange behavior was noticed. It seems that when the form has autofocus, the transition effect on the navigation bar is triggered in Firefox only. Is this an error on my end or just a bug specific ...

htmlcssfirefox

Maintain the focus of the button when switching between tabs in a TabPane

Currently, I have implemented two different menus on my application. One is a tabPane while the other is a VBox containing buttons. By using psuedo selectors, I was able to style the tabs when they are selected with CSS, like shown in this example: .tab.l ...

javacssjavafxjavafx-8

When the div element reaches the top of the page, it sticks to the top and is only displayed when the user

In the center of a full-screen hero section, there is a form. When it reaches the top, its position becomes fixed and additional classes are added through a script - such as shrinking its height and adding a background. What I aim to achieve is for the fo ...

javascriptjqueryhtmlcss

Animate elements with jQuery, moving them from the bottom right corner to the

I am currently working on a project to create a responsive webpage that involves clicking on a circle in the middle of the screen and having a div enlarge from the circle to the top left corner of the webpage. To achieve this effect, it seems like I would ...

jquerycssjquery-animate

jQuery divs display and conceal

Looking for help with this code structure: Here's the HTML: <div class="container"> <button class="a">Button</button> <div class="b" hidden="hidden">Content</div> </div> <div class="container"> & ...

javascriptjqueryhtmlcss

How to style the first column of the first row in a table using CSS without affecting nested tables

Having some challenges with CSS selectors, I'm hoping to find some assistance here. Presented with HTML code that resembles the following: <table class=myTable> <tr> <td>this is the td of interest</td> </tr> ...

css

I am attempting to implement a feature that changes the color of buttons when they are clicked within an ng-repeat loop

A problem is occurring with the ng-class directive in this HTML code, which is generating seats using the ng-repeat directive. The colors are not being added properly when a seat is selected. If you'd like to view my code, it can be found in this JSf ...

cssangularjsangularjs-ng-repeatng-class

Creating the perfect layout with CSS: A step-by-step guide

As I work on refining my layout to achieve the desired look, let me share my initial idea before delving into the issue at hand. Currently, I am attempting to create something similar to this: https://i.stack.imgur.com/rtXwm.png This is how it appears a ...

htmlcss