v4 - Need example of vertical alignment. May be need component.

[nodkz]

Bootstrap v4 add great features, which cover all my needs:

• .hidden-X-up .hidden-X-down
• no-margin and spacers
• great adaptive modal dialog

Except one:

• no vertical aligment in div (example or component)

[kkirsche]

@nodkz using flexbox would probably be your best option for that. Otherwise any implementation gets messy as you'd need either the height of the div or if it's unknown you get into some messy Y translation / absolute positioning.

Flexbox example (not BS specific):

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

[hnrch02]

If you use the new flexbox grid, we have classes for vertical alignment now:

bootstrap/scss/_grid.scss

Lines 71 to 123 in b591d23

	// Alignment for every column in row
	.row-xs-top { align-items: flex-start; }
	.row-xs-center { align-items: center; }
	.row-xs-bottom { align-items: flex-end; }
	@include media-breakpoint-up(sm) {
	.row-sm-top { align-items: flex-start; }
	.row-sm-center { align-items: center; }
	.row-sm-bottom { align-items: flex-end; }
	}
	@include media-breakpoint-up(md) {
	.row-md-top { align-items: flex-start; }
	.row-md-center { align-items: center; }
	.row-md-bottom { align-items: flex-end; }
	}
	@include media-breakpoint-up(lg) {
	.row-lg-top { align-items: flex-start; }
	.row-lg-center { align-items: center; }
	.row-lg-bottom { align-items: flex-end; }
	}
	@include media-breakpoint-up(xl) {
	.row-xl-top { align-items: flex-start; }
	.row-xl-center { align-items: center; }
	.row-xl-bottom { align-items: flex-end; }
	}
	// Alignment per column
	.col-xs-top { align-self: flex-start; }
	.col-xs-center { align-self: center; }
	.col-xs-bottom { align-self: flex-end; }
	@include media-breakpoint-up(sm) {
	.col-sm-top { align-self: flex-start; }
	.col-sm-center { align-self: center; }
	.col-sm-bottom { align-self: flex-end; }
	}
	@include media-breakpoint-up(md) {
	.col-md-top { align-self: flex-start; }
	.col-md-center { align-self: center; }
	.col-md-bottom { align-self: flex-end; }
	}
	@include media-breakpoint-up(lg) {
	.col-lg-top { align-self: flex-start; }
	.col-lg-center { align-self: center; }
	.col-lg-bottom { align-self: flex-end; }
	}
	@include media-breakpoint-up(xl) {
	.col-xl-top { align-self: flex-start; }
	.col-xl-center { align-self: center; }
	.col-xl-bottom { align-self: flex-end; }
	}

. Just needs documenting, see #17119.

[joedajigalo]

@hnrch02

Curious, why not set it up like so?

// Alignment for every column in row
@each $bp in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($bp) {
    .row-#{$bp}-top    { align-self: flex-start; }
    .row-#{$bp}-center { align-self: center; }
    .row-#{$bp}-bottom { align-self: flex-end; }
  }
}
// Align per column
@each $bp in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($bp) {
    .col-#{$bp}-top    { align-self: flex-start; }
    .col-#{$bp}-center { align-self: center; }
    .col-#{$bp}-bottom { align-self: flex-end; }
  }
}

Will save on lines, and easier to maintain* (I assume). If this is good, I can create a pull request.

Thanks.

[hnrch02]

@mdo wanted to keep the complexity to a minimum, IIRC. Might have changed now though.

[mdo]

I'm open to a PR on that stuff to reduce the repetition, so long as we feel it's approachable enough for folks.

[mdo]

Added flexbox utils in #19099.