CODEWITHSUNDEEP
htmlcsstwitter-bootstrapflexboxbootstrap-4
Toskan
Toskan

Reputation: 14931

Bootstrap 4 alpha 6 trying to create content that aligns top and bottom of row

Bootstrap 4 alpha 6

see here https://v4-alpha.getbootstrap.com/layout/grid/#vertical-alignment

I just found this as well:

https://v4-alpha.getbootstrap.com/utilities/flexbox/#direction

but no luck so far

I try to:

align elements to the top and bottom of a row

it doesn't need to be in the same row. But I think that is the easiest. As each row is a new flex container, I don't think it works differently.

see this codepen https://codepen.io/anon/pen/GEzBrw

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' );

html,
body {
  height: 100%;
}

.container {
  min-height: 100%;
  height: auto;
  background-color: gray;
}

.my-top {
  background-color: salmon;
}

.my-bot {
  background-color: cornflowerblue;
}
<div class="container">
  <div class="row justify-content-between">
    <div class="col my-top">
      <p>Red container to the top (works)</p>
      <p>Red container to the top (works)</p>
      <p>Red container to the top (works)</p>
      <p>Red container to the top (works)</p>
      <p>Red container to the top (works)</p>
      <p>Red container to the top (works)</p>
    </div>
    <div class="w-100"></div>
    <div class="col my-bot  align-self-end">
      <p>Blue container to the bottom (doesn't work)</p>
      <p>Blue container to the bottom (doesn't work)</p>
      <p>Blue container to the bottom (doesn't work)</p>
      <p>Blue container to the bottom (doesn't work)</p>
      grey stuff in between. no hard coding with padding or such allowed
    </div>
  </div>
</div>

EDIT

desired output

enter image description here

Upvotes: 1

Views: 112

Answers (2)

hungerstar
hungerstar

Reputation: 21685

Using flexbox and sizing classes.

Make sure the containing element is the full height of the parent (here I'm assuming it's the height of the viewport). When using height: 100%; you'll have to apply height: 100%; from the root (html) down through each element to the target element .flex-column. If you don't the the .flex-column element will only be as tall as it's content and can't stretch out to provide a space.

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' );

html,
body {
  height: 100%;
}

.container {
  background-color: gray;
}

.my-top {
  background-color: salmon;
}

.my-bot {
  background-color: cornflowerblue;
}
<div class="container h-100">
  <div class="h-100 d-flex align-items-end flex-column">
    <div class="w-100 my-top">
      <p>Red container to the top (works)</p>
      <p>Red container to the top (works)</p>
      <p>Red container to the top (works)</p>
      <p>Red container to the top (works)</p>
      <p>Red container to the top (works)</p>
      <p>Red container to the top (works)</p>
    </div>
    <div class="w-100 mt-auto my-bot">
      <p>Blue container to the bottom (doesn't work)</p>
      <p>Blue container to the bottom (doesn't work)</p>
      <p>Blue container to the bottom (doesn't work)</p>
      <p>Blue container to the bottom (doesn't work)</p>
      grey stuff in between. no hard coding with padding or such allowed
    </div>
  </div>
</div>

Note: Make sure to use Full Screen option when viewing the code snippet.

Upvotes: 1

Carol Skelly
Carol Skelly

Reputation: 362380

The .row needs to be full height too. You can use the h-100 class for height:100%

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

<div class="container h-100">
  <div class="row h-100">
    <div class="col my-top">
      <p>Red container to the top (works)</p>
      <p>Red container to the top (works)</p>
      <p>Red container to the top (works)</p>
    </div>
    <div class="w-100"></div>
    <div class="col my-bot align-self-end">
      <p>Blue container to the bottom (doesn't work)</p>
      grey stuff in between. no hard coding with padding or such allowed
    </div>
  </div>
</div>

Upvotes: 1

Related Questions