Photoshop Question posted in
The official user guide can be found here.

Bootstrap 4 make elements center vertically in sticky-top class – Photoshop

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:

enter image description here

Tags:

2

Answers


  1. 0

    Not sure if I understand the requirements, but is this what you want?

    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">
          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: The only difference i did was add the text in its own 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>
    Login or Signup to reply.
  2. 0

    Just add h-100 class to sticky-top and its inner div.

    body, html {
  height: 100%;
}

#element-1 {
  background: lightgray;
  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">
<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 h-100">
        <div class="d-flex h-100 justify-content-center flex-column">
          <div class="text-center">I should be center vertically</div>
        </div>
      </div>
    </div>
  </div>
</div>

    You could also remove sticky-top inner div, if it is not necessary for you:

    body, html {
  height: 100%;
}

#element-1 {
  background: lightgray;
  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">
<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 d-flex h-100 justify-content-center flex-column">
          <div class="text-center">I should be center vertically</div>
      </div>
    </div>
  </div>
</div>

    EDIT 1 Sorry, I had not noticed the sticky problem

    I used second solution adding:

    .sticky-top{
  height:100vh;
}

    body, html {
  height: 100%;
}

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

#element-2 {
  background: gray;
}
.sticky-top{
  height:100vh;
}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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 d-flex justify-content-center flex-column">
          <div class="text-center">I should be center vertically</div>
          <div class="text-center">I should be center vertically</div>
      </div>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search