1

I've got a basic bootstrap grid with two rows and I'm trying to align the content vertically in these cells but no matter what I try the content doesn't seem to budge..

I've tried adding various classes to the rows and container div, i.e. align-middle, align-items-center but nothing seems to do anything.

<div id="header">
<p>< BACK TO HOMEPAGE</p>
</div>
<div id="main-content" style="height:85vh;">
</div>
<div id="menu-bar">
    <div class="container-fluid text-center ">
        <div class="row border-bottom border-dark">
          <div class="col">
          Preview text
          </div>
          <div class="col">
            Preview text
          </div>
          <div class="col">
            Preview text
          </div>
          <div class="col">
            Preview text
          </div>
          <div class="col">
            Preview text
          </div>
          <div class="col col-3">
            6
          </div>
          <div class="col col-2">
            7
          </div>
          <div class="col col-2">
            <button type="button" class="btn btn-dark">Play Video</button>
          </div>
        </div>
        <div class="row" style="font-size: smaller;">
          <div class="col col-3">
            1
          </div>
          <div class="col">
            Preview text
          </div>
          <div class="col">
            Preview text
          </div>
          <div class="col col-3">
            Colour
          </div>
          <div class="col col-4">
            Preview text
          </div>
        </div>
      </div>
</div>
David Johnson
  • 35
  • 5

2 Answers2

0

Change

<div class="row border-bottom border-dark">

To

<div class="row border-bottom border-dark align-items-center">

Here's a JSFiddle with that change. I've added a border to each div, so you can see that it is centered vertically. http://jsfiddle.net/bqfa74y0/

If you want the lower row to be centered vertically, just add align-items-center to the class of the row.

I would also strongly recommend that you change:

<p>< BACK TO HOMEPAGE</p>

To

<p>&lt; BACK TO HOMEPAGE</p>

Because < has a special meaning in HTML (it's for starting/ending tags), so using it as text could have unexpected consequences.

Robson
  • 2,008
  • 2
  • 7
  • 26
0

Did you mean this?

 .menu-bar{
  length: 200px;
  width: 100%
}



 .col{
  display: inline-block;
  width: 11%;
  margin-left: auto;
margin-right: auto;
  text-align: center;
  height: 50px;
}
<div id="header">
<p> BACK TO HOMEPAGE</p>
</div>
<div id="main-content" style="height:85vh;">
</div>
<div id="menu-bar">
    <div class="container-fluid text-center ">
        <div class="row border-bottom border-dark">
          <div class="col">
          Preview text
          </div>
          <div class="col">
            Preview text
          </div>
          <div class="col">
            Preview text
          </div>
          <div class="col">
            Preview text
          </div>
          <div class="col">
            Preview text
          </div>
          <div class="col col-3">
            6
          </div>
          <div class="col col-2">
            7
          </div>
          <div class="col col-2">
            <button type="button" class="btn btn-dark">Play Video</button>
          </div>
        </div>
        <div class="row" style="font-size: smaller;">
          <div class="col col-3">
            1
          </div>
          <div class="col">
            Preview text
          </div>
          <div class="col">
            Preview text
          </div>
          <div class="col col-3">
            Colour
          </div>
          <div class="col col-4">
            Preview text
          </div>
        </div>
      </div>
</div>
Dev
  • 200
  • 7