What I tried to achieve is make elements center in div
with sticky-top
class, I used these class to get this but no success:
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 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 flex-column">
<div>I should be center vertically</div>
</div>
</div>
</div>
</div>
</div>
As you see element not center in vertical, this what I want to get, and don’t want to get centered elements inline, they should be under each other.
Thanks in advance
Edit: here is photoshop version of my goal:
2
Answers
Not sure if I understand the requirements, but is this what you want?
Note: The only difference i did was add the text in its own div
Just add
h-100
class to sticky-top and its inner div.You could also remove sticky-top inner div, if it is not necessary for you:
EDIT 1 Sorry, I had not noticed the sticky problem
I used second solution adding: