Tips for utilizing the sticky-top class with Bootstrap 4 grid system

Has anyone had success using the sticky-top class in a grid layout? I'm having trouble getting it to work.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

<div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 sticky-top"> <!-- this grid should be sticky -->
          <div class="card text-left">
            <div class="card-body">
              <h4 class="card-title">Title</h4>
              <p class="card-text">Body</p>
            </div>
          </div>
        </div>
        <div class="col-sm-6" style="min-height:800px;">ssdfjosdfjsl</div>
        <div class="col-sm-3">ssdfjosdfjsl</div>
      </div>
    </div>

Any assistance in resolving this issue would be greatly appreciated. Thank you!

cssbootstrap-4sticky

Answer №1

To prevent the default stretch alignment that makes all columns equal in height, add align-items-start. This will allow for a sticky behavior to be applied.

.container-fluid {
  border:1px solid;
}
.sticky-top {
  border:1px solid red;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet>
<div class="container-fluid">
  <div class="row align-items-start">
    <div class="col-sm-3 sticky-top"> <!-- this grid should be sticky -->
      <div class="card text-left">
        <div class="card-body">
          <h4 class="card-title">Title</h4>
          <p class="card-text">Body</p>
        </div>
      </div>
    </div>
    <div class="col-sm-6" style="min-height:800px;">ssdfjosdfjsl</div>
    <div class="col-sm-3">ssdfjosdfjsl</div>
  </div>
</div>

The issue of default alignment can be clearly seen with borders:

.container-fluid {
  border:1px solid;
}
.sticky-top {
  border:1px solid red;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 sticky-top"> <!-- this grid should be sticky -->
      <div class="card text-left">
        <div class="card-body">
          <h4 class="card-title">Title</h4>
          <p class="card-text">Body</p>
        </div>
      </div>
    </div>
    <div class="col-sm-6" style="min-height:800px;">ssdfjosdfjsl</div>
    <div class="col-sm-3">ssdfjosdfjsl</div>
  </div>
</div>

You can also choose to keep the default alignment and make the card sticky:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3"> 
      <div class="card text-left sticky-top">
        <div class="card-body">
          <h4 class="card-title">Title</h4>
          <p class="card-text">Body</p>
        </div>
      </div>
    </div>
    <div class="col-sm-6" style="min-height:800px;">ssdfjosdfjsl</div>
    <div class="col-sm-3">ssdfjosdfjsl</div>
  </div>
</div>

Answer №2

For your CSS styling, include the following:

.sticky-top{
    position: fixed;
    width: 100%;
    top: 0;
    border: 1px solid #000;
}

I trust this solution will be beneficial to you.

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

Keep moving the box back and forth by pressing the left and right buttons continuously

Looking to continuously move the .popup class left and right by clicking buttons for left and right movement. Here is the js fiddle link for reference. This is the HTML code structure: <button class="right">Right</button> <button class="l ...

javascriptjqueryhtmlcssjquery-animate

Addressing some minor visual inconsistencies in an HTML bullet-pointed list

After reviewing my current code, it is displaying the following: https://i.stack.imgur.com/dvjrc.jpg I am attempting to make the following changes: Ensuring each line in the list fits properly within its corresponding box by utilizing vertical-align: to ...

htmlcssvue.js

Seeing <br> elements being inserted into a <div> element in the page source

I have encountered an issue where my code does not contain any br tags between the beginning of the div tag and table tag, but when I view the source, several br elements appear. Below is the code snippet from a .php file: <div id='tx_addAccountp ...

htmlcss

The issue with the sticky menu not functioning properly may be due to the use

Hey there, I'm facing an issue with the Navbar Menu (White Bar) on my website. It is working perfectly fine and sticking to the top as expected. However, the problem arises when I click on the Menu - the Sticky class stops working. Upon investigating, ...

htmlcssmobilenavbarsticky

What are some creative ways to customize and animate the cursor or caret within an input field?

Just to clarify, I am working with React and Material-UI. I have a task at hand where I need to modify the appearance of the caret within an input element by adding an animation to it. I have managed to change its color using caret-color and set a default ...

javascripthtmlcsssassmaterial-ui

How can I replace the unsightly "Web page not available" error in WebView on Android with a more visually pleasing alternative?

In my WebView Activity, I sometimes encounter issues with loading properly when the WIFI/DATA connection is poor or disconnected. This could potentially be a common occurrence once my app is in use. I'm curious to know how I can replace the unattracti ...

javascriptandroidhtmlcsswebview

Select the even-numbered occurrences of a specific class in CSS using the nth-child()

I am encountering an issue with my table layout. The structure is similar to the following: <tbody> <tr class="row">...</tr> <tr class="row--expanded">...</tr> <tr class="row">...</ ...

javascriptcssreactjssass

Adding Borders to a Single Column in Bootstrap

Is it possible to add borders in the color 'info' to the last column in a table? I'm struggling with this. Can anyone provide assistance? Does Bootstrap have the capability to support this design element? This is what I have tried so far: ...

htmlcsstwitter-bootstrapborder

The dimensions of the HTML table do not adjust properly when new items are being appended using JavaScript

I utilized this HTML Code to generate a table: <div class="noten_tabelle"> <table id="grades_table" style="width:100%"> <tr> <th>Subject</th> <th>Oral</th&g ...

javascripthtmlcsshtml-table

The functionality of scrolling in Angular Material tabs is not functioning properly

I have encountered a challenge while working with angularjs material design. The md-scroll functionality is not working as expected for scrolling up and down, even though it works fine for left and right scrolling. In a tab with a table view, the vertical ...

javascripthtmlcssangularjs

The issue of duplicate CSS arising during the compilation of SASS into a single CSS file with G

Just getting started with Stack Overflow and Gulp (using version 3.9.1). My goal is to compile all of my scss files into a single css file for my website. Here's what I have in my gulpfile so far: var gulp = require('gulp'); var sass = requ ...

csssassgulpgulp-sassgulp-concat

Interactive Radial Menu Using Raphael JS

Greetings and thank you for taking the time to consider my predicament. I am currently working on creating an SVG menu using raphael, but unfortunately, geometry has never been my strong suit. Below is a visual representation of what I have managed to cre ...

jqueryhtmlcssnavigationraphael

How can I implement a thumbnail editing feature similar to Facebook's display image uploader in an Asp.net application using c#?

How can I upload an image and display a specific part of it in a thumbnail of a custom size? I also want to personalize the appearance of the thumbnail. ...

c#javascriptasp.netcssajax

Make the most of your Bootstrap 3 layout by utilizing a full page container that fills both the width and height between a fixed header and

I am currently working on a basic bootstrap page with the Example template from Bootstrap's website. I want the content in the middle to take up the space between the header and footer, while ensuring that both the header and footer remain visible at ...

javascriptjqueryhtmlcsstwitter-bootstrap

Troubleshooting Issue with jQuery replaceWith in Loop

Trying to make it so that when the update button is clicked, the text on the left side becomes an input box: Click the update button and the text on the left will be an input box However, instead of just one input box appearing, all the text on the left s ...

javascriptjqueryhtmlmysqlcss

Can JavaScript values be passed into CSS styles?

I am currently working on dynamically updating the width of a CSS line based on a JavaScript value (a percentage). The line is currently set at 30%, but I would like to replace that hard-coded value with my JavaScript variable (c2_percent) to make it mor ...

javascripthtmlcssdjango

What is the best way to create a container filled with numerical figures?

If I have the number 445758, and I want each of these numbers to be displayed in their own box like this: https://i.sstatic.net/hBiA4.jpg Can you explain how to achieve this? ...

htmlcss

Desktop displays do not show images, only mobile devices

My website displays multiple retailer images as affiliate links. I am facing an issue where the images are not visible on desktop for some users, even though I can see them on my end. I have tried clearing cache, cookies, and using different browsers, but ...

htmlcsspermalinks

What is the best way to get rid of the blue color border around the input fields on Micromax A110 and Sony Ericsson phones?

I am currently experiencing an issue with my application where a blue outline color is appearing on the input field for Micromax A110 and Sony Ericsson mobile devices, while all other Android devices do not have this problem. I am unsure of the exact reaso ...

htmlcss

Centering DIVs both vertically and horizontally within parent DIVs that have a height and width of 100%

I am facing a challenge with my nested parent DIVs that occupy 100% of the browser window in terms of height and width. I am struggling to center secondary DIVs inside their respective parent containers. Here are the definitions for my stacked parents: # ...

csshtml