TransWikia.com

Vertical align on left Boostrap

Stack Overflow Asked by Obsesie on December 9, 2021

I am trying to create two squares that will display text on right respectively on left in middle. I manage to create the squares and position text in the center, however, when I am trying to place in middle of the page is not working. I tried all the methods knew by me but nothing worked. I am using Bootsrap.

.graphic-art-first-page {
  background-color: #1c1c1c;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center
}

.black,
.orange {
  height: 80vh;
}

.orange {
  background-color: orange;
}

.black {
  background-color: black;
}

.mid {
  align-self: center;
}
<div class="graphic-art-first-page">
  <div class="container">
    <div class="row">
      <div class="orange col text-right "><span class="mid">1</span></div>
      <div class="black col">2</div>
    </div>
  </div>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

enter image description here

bootstrap 4csshtml

One Answer

You can use Boostap classes utilities for flex (https://getbootstrap.com/docs/4.4/utilities/flex/).

I added .d-flex to .orange, and flex: 1 1 0; to .mid.

.graphic-art-first-page {
      background-color: #1c1c1c;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center
    }

    .black,
    .orange {
      height: 80vh;
    }

    .orange {
      background-color: orange;
    }

    .black {
      background-color: black;
    }

    .mid {
      align-self: center;
      flex: 1 1 0;
    }
    <div class="graphic-art-first-page">
      <div class="container">
        <div class="row">
          <div class="orange col text-right d-flex"><span class="mid">1</span></div>
          <div class="black col">2</div>
        </div>
      </div>
    </div>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Answered by Bazaim on December 9, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Answers

Recent Questions

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP