Bootstrap flexbox, 2 row, 1 column layout and align contents

Question

I want to have a full width 2 row, "1 column" layout, that takes up the entire viewport. The top row should have it's contents on the bottom of that row, and the bottom row should have it's contents on the top of that row.

Using some examples from bootstrap, I was able to achieve this: https://codepen.io/afagard/pen/QWpJWze

However, I am not sure if I am doing it correctly even though it looks as expected. Specifically, I tried to set the container to 100vh but that did not result in any changes to flexboxes so I've got each row at 50vh. I mostly do backend work and am trying to learn flexboxes.

user_6127393 · Answer

Here is an example of a flexbox solution using just the bootstrap classes and no additional css:





  
  
    
      Top half
    
  
  
  
    
      Bottom half

Bootstrap flexbox, 2 row, 1 column layout and align contents

1 Answers