-1

Is it possible to vertically align content within a Bootstrap column to the content of another div?

I have two columns, A and B that are adjacent to each other. When items in Column B are clicked, a list of words appears in column A. I would like this collection of words in A to be vertically centered around the selected word in B.

Here is a JSFiddle with a basic idea of what's going on, without the vertical centering

https://jsfiddle.net/so4902r8/5/

HTML

<div class="row">
  <div class="col-2 offset-4">   
    <div id="wordList1">
      [text]
    </div>
    <div id="wordList2">
      [text]
    </div>
  </div>
  <div id="clickMes" class="col-2">
    <div id="clickMe1">
      <a onClick="clickMe1()">Click Me 1</a>
    </div>
    <div id="clickMe2">
      <a onClick="clickMe2()">Click Me 2</a>
    </div>
  </div>
</div>

JS

function clickMe1() {
var x = document.getElementById("wordList1");
  if (x.style.display === "none") {
x.style.display = "block";
document.getElementById("wordList2").style.display = "none";
  } else {
x.style.display = "none";
  }
}


function clickMe2() {
var x = document.getElementById("wordList2");
  if (x.style.display === "none") {
    x.style.display = "block";
    document.getElementById("wordList1").style.display = "none";
  } else {
    x.style.display = "none";
  }
}
Spencer F.
  • 29
  • 3

1 Answers1

1

Typically this would be a duplicate of Vertical Align Center in Bootstrap and Bootstrap Center Vertical and Horizontal Alignment

However, the top padding applied by this CSS rule would prevent align-items-center from working as expected...

.clickMes {
  padding-top: 50px;
}

Therefore, remove the top padding and use align-items-center on the row.

Demo

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • Thanks for the reply. However, this is not what I am looking for for two reasons. 1 - The words in Column A are not vertically centered around the clicked word in Column B. For example, if I click 'Click Me 1', the word 'Intellegam' should be adjacent to the left of 'Click Me 1', but it is below it 2 - The words in Column B move around vertically, both when words first appear, and when the words change. I would like Column B to be vertically fixed – Spencer F. Jun 15 '21 at 17:44