html – How do I vertically align the content in these grid cells in a bootstrap grid?


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>



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here