React-bootstrap align-middle не работает для столбцов

Согласно документации bootstrap я должен иметь возможность вертикально выровнять что-то внутри столбца с помощью класса align-middle. Я написал этот код в typescript, react-bootstrap и align-middle у меня не работает.

    const Style = styled.div<StyledProps>`
      .fixed {
        background-image: url(${props => props.image? props.image : '../img/matrix.jpg'});
        background-repeat: none;
        background-attachment: fixed;
        background-size: cover;
        min-height: 400px;
      }
    `;
    
    export const FixedBackground = () => {return (
      <Style image = {matrix}>
        <Container>
          <Row className = "text-light py-5 align-items-center align-middle align-items-center">
            <Col className = "col col-lg-12 col-md-12 text-center fixed align-middle align-items-center">
              <h1 className = "align-middle">Advance to the next level</h1>
            </Col>
          </Row>
        </Container>
      </Style>
    )};

Я хочу, чтобы тег h1 был в вертикальном центре изображения... но он отображался сверху. Я также погуглил и нашел эту тему , но предложение добавить align-items-center не работает для меня.