Achieve vertical center alignment of elements within the sticky-top class using Bootstrap 4

I have been attempting to center elements within a div using the sticky-top class, but so far, I have not been successful. I have tried using the following classes:

d-flex justify-content-center align-items-center flex-column


body, html {
  height: 100%;
}

#element-1 {
  background: lightgray;
  height: 1000px;
  overflow: auto;
}

#element-2 {
  background: gray;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container-fluid h-100">
  <div class="row">
    <div class="col-8" id="element-1">
      Some Content
    </div>
    <div class="col-4" id="element-2">
      <div class="sticky-top">
        <div class="d-flex justify-content-center align-items-center flex-column">
          <div>I should be centered vertically</div>
        </div>
      </div>
    </div>
  </div>
</div>

Despite my efforts, the element is not centered vertically as desired. My goal is to have the elements centered vertically and not in line with each other.

Thank you in advance.

Edit: Here is a visual representation of my desired outcome:

https://i.sstatic.net/55fkp.jpg

htmlcssbootstrap-4

Answer №1

To make the content center vertically, simply add the h-100 class to the sticky-top and its inner div.

If you find that the inner div is not necessary, you can remove it:

EDIT 1 Apologies for not addressing the sticky issue earlier. To fix it, you can add the following CSS:

.sticky-top{
  height:100vh;
}

Answer №2

Uncertain about the requirements, but is this the desired outcome?

body, html {
  height: 100%;
}

#element-1 {
  background: lightgray;
  height: 1000px;
  overflow: auto;
}

#element-2 {
  background: gray;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container-fluid h-100">
  <div class="row">
    <div class="col-8" id="element-1">
    Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content Some Content 
    </div>
    <div class="col-4" id="element-2">
      <div class="sticky-top">
        <div class="d-flex justify-content-center align-items-center">
          I should be in center
           </div>
          <div class="d-flex justify-content-center align-items-center">
          I should be in center too!
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Note: Added the text in its own separate div

         <div class="d-flex justify-content-center align-items-center">
          I should be in center
         </div>
         <div class="d-flex justify-content-center align-items-center">
          I should be in center too!
         </div>

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

Trouble with toggling class "collapsed" in Bootstrap v3 Navbar-toggle when using multiple data-targets

When using the data-target attribute with multiple CSS selectors, the behavior of toggling the "collapsed" class in navbar-toggle does not work as expected. If only one selector is used, the class is toggled properly, but when multiple selectors are specif ...

jquerycsstwitter-bootstrap-3

Translating Encryption from Javascript to Ruby

I have an application which utilizes HTML5 caching to enable offline functionality. When the app is offline, information is stored using JavaScript in localStorage and then transmitted to the server once online connectivity is restored. I am interested in ...

javascriptruby-on-railshtmlencryptioncryptography

What is the best way to inject child nodes into parent nodes without causing the view to shift to the location where the element is being

While I am rendering elements and appending them to a parent div, my screen keeps jumping to the bottom-most element as it loads instead of maintaining the current view. Ideally, it should start at the top of the screen and remain there without any sudden ...

javascriptjqueryhtmlcss

modify the color of text in a row within a jquery ajax table

Is it possible to change the font color of values in a row based on a condition inside a function? Specifically, if the TotalStudent count exceeds the room capacity, can we add student information to the table with red font color? Below is my attempt using ...

javascriptjquerycssajax

Javascript - issue with accurately retrieving element offset value while scrolling

My goal is to dynamically change classes for elements based on their position during scrolling. I am trying to calculate the top offset element value and adjust the classes accordingly. Here is the function I am using: handleScroll () { const header = ...

javascripthtmlcss

Prevent Child Elements from Overstretching Container with Bootstrap Flex

I'm working on a layout where all elements can be viewed without the need for scrolling. Any panels that require more space should be scrollable. In the following example, I want the contents of main-left to be scrollable without stretching the entire ...

javascripthtmlcssbootstrap-4flexbox

Working with CSS3 transitions in PHPStorm is a breeze

For some reason, my phpstorm does not provide code completion for CSS properties like -webkit-translate, translate, or animation. Has anyone encountered this issue before? Any suggestions on how to fix it? ...

cssphpstorm

Issue with binding background images to DIV elements in Angular 4 CSS

Here is a template example: <div [style.background-image]="profileImage" ></div> In the TypeScript file: We declare private profileImage: any; and use DomSanitizer for security. Fetching photo from service: We set this.profileImage using b ...

cssangulartypescript

IE7 encountering a mixed content error when using html5shiv and SSL

In the process of developing my ASP.Net application that utilizes html5shiv and SSL, I encountered mixed content errors in IE7 specifically when using html5shiv. Interestingly, removing html5shiv eliminated the errors. Additionally, my app incorporates upd ...

asp.nethtmlsslinternet-explorer-7html5shiv

What is the best way to toggle DOM classes in React using Material-UI components?

Currently utilizing Material UI alongside React, I have a div element: <div className={classes.div}></div> I am attempting to dynamically add a conditional class to it: <div className={classes.div + divActive ? `${classes.div}__active` : &a ...

javascriptcssreactjsmaterial-ui

Determine the position of an HTML list using Xpath by considering additional criteria

After investigating a workaround for this unresolved question, I am now facing a new challenge. I am curious if it is possible to retrieve the list position from HTML based on certain search criteria? This would enable me to reconstruct the xpath of the ...

c#htmlseleniumxpath

Steps to Retrieve and Showcase a Compilation of YouTube Clips with JavaScript

Recently, I managed to write a C code that retrieves the list of YouTube videos from the URL "*http://gdata.youtube.com/feeds/api/standardfeeds/top_rated*" using the libsoup library. By utilizing libxml2, I was able to parse the XML data and extract specif ...

phpjavascripthtmljsonhttp

Retrieve SQL data and store it in a JavaScript variable

Need assistance with fetching data from SQL and storing it in a JavaScript variable. I have already connected PHPMyAdmin to my website. I am attempting to retrieve two variables (date) from my SQL table. JAVASCRIPT: var countdown_48 = new Date; countdow ...

javascriptphphtmlsqldatabase

Tips for aligning two divs on top of each other

I'm trying to figure out how to have divs start drawing from the same point. Essentially, I want to be able to add new divs and have them appear stacked on top of each other, so that they can all move together based on a single reference point. Here& ...

csshtml

Steps for transforming a matplotlib animation into an HTML5 `<video>` element

Here is the code for a matplotlib animation graph and you can find instructions on how to save it here. from IPython.display import HTML import matplotlib.pyplot as plt import matplotlib.animation import numpy as np t = np.linspace(0,2*np.pi) x = np.sin ...

pythonhtmlmatplotlib

Enhancing dynamic text boxes with jQuery by incorporating additional information

I've recently developed an interactive app that dynamically creates tables based on user input. The app includes a feature where you can specify the number of tables to generate and track the total count of tables added. Currently, I'm exploring ...

jqueryhtmlcss

Overlapping Divs and Colliding Elements

I am currently exploring the moment when my two yellow divs will overlap and make contact with each other. It seems that the collision detection is triggering true even when the divs are not intersecting. If you'd like to take a look at the example, ...

jqueryhtmlcssanimation

When using CSS column-fill auto, the printed page breaks are disregarded

The column-fill:auto property functions by filling one complete column before moving on to the next. .two-column { column-count: 2; column-fill: auto; } In Chrome, this behavior is consistent while viewing on screen, but when printing and encounterin ...

cssgoogle-chromecss-multicolumn-layout

The CSS styling for an active link is not functioning correctly on a single page when using sections

I recently received a zip file containing a template purchased from themeforest, with a request to make modifications. The template includes a horizontal navigation bar with links to various sections on the page. In the original template, when you click on ...

htmlcss

jQuery concealing selections from dropdown menus

Is there a way to use jquery sort to order dropdown list options and hide the "select" item in the dropdown? Check out my fiddle code here <select id="mySelect"> <option value="">select</option> <option value="1">a</opt ...

jqueryhtmlsortingselecthide