react-bootstrap align-middle not working for Columns

Question

According to bootstrap documentation I should be able to vertically align something inside of a column by using the align-middle class. I have written this code in typescript, react-bootstrap and align-middle is not working for me.

    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>
    )};

I want the h1 tag to be in the vertical center of the image... but it appears on the top. I also googled and found this thread but the suggestion of adding align-items-center doesn't work for me.

is you column display flex? if not add d-flex class with your column — Ronak Lalwani, Dec 25 '20 at 04:38
yes that works. I also see that `text-center` class on the `Col` doesn't horizontally center after adding d-flex. Can I get both horizontal and vertical center? — Knows Not Much, Dec 25 '20 at 04:43
Also, can you respond as answer so that I can mark it as such? — Knows Not Much, Dec 25 '20 at 04:43

Ronak Lalwani · Accepted Answer · 2020-12-25T05:04:52.827

1

Add class d-flex with your Col to make it display:flex. You can use class justify-content-centre to center your content horizontally. Use class align-items-center to center your content vertically.

edited Dec 25 '20 at 05:04

answered Dec 25 '20 at 04:59

Ronak Lalwani

376
2
9

react-bootstrap align-middle not working for Columns

1 Answers1