CODEWITHSUNDEEP
htmltwitter-bootstrapcssflexbox
Sam
Sam

Reputation: 1676

Bootstrap 4 - Flex vertical align

I'm using bootstrap 4 flex box to create a vertical align however I still have the age old problem where my row, and column don't expand to be the full height of the container. Therefore my vertical align flex box code isn't going to work because the container is only as high as the content.

As the hero class is set to 70vh, I want the content to be vertically aligned within that container. So the H2, P, & a tags are centred vertically within that hero wrapper using the new bootstrap flex grid layout

Do I have to set a min-height in order to resolve this issue?

.hero {
  background: red;
  width: 100%;
  height: 70vh;
}
<link rel="stylesheet" href="https://cask.scotch.io/bootstrap-4.0-flex.css"/>

<div class="hero">
  <div class="container">
    <div class="row flex-items-xs-middle">
      <div class="col-xs">
        <h2>a real tag line here</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce iaculis dapibus enim, ut pharetra magna venenatis non. Maecenas aliquam.</p>
        <a class="tek-btn" href="#">Order now!</a>
      </div>
    </div>
  </div>
</div>

Example Fiddle - https://jsfiddle.net/7qynca6z/

Upvotes: 2

Views: 4339

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362820

Here's an updated solution using the latest Bootstrap 4 (alpha 6).
No extra CSS required.

https://www.codeply.com/go/hFtD71FMc4

<div class="hero">
  <div class="container d-flex align-items-center h-100">
     <div class="row">
        <div class="col-xs">
        <h2>a real tag line here</h2>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce iaculis dapibus enim, ut pharetra magna venenatis non. Maecenas aliquam.</p>
           <a class="tek-btn" href="#">Order now!</a>
        </div>
     </div>
  </div>
</div>

Upvotes: 3

kukkuz
kukkuz

Reputation: 42370

Just make hero a flexbox and give it align-items: center.

See demo below and Updated fiddle here:

.hero {
  background: red;
  width: 100%;
  height: 70vh;
  display: flex;
  align-items: center;
}
<link rel="stylesheet" href="https://cask.scotch.io/bootstrap-4.0-flex.css"/>

<div class="hero">
  <div class="container">
    <div class="row flex-items-xs-middle">
      <div class="col-xs">
        <h2>a real tag line here</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce iaculis dapibus enim, ut pharetra magna venenatis non. Maecenas aliquam.</p>
        <a class="tek-btn" href="#">Order now!</a>
      </div>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions