React Bootstrap: Vertical alignment of row's columns?

Question

I am using react bootstrap, I am trying to align items vertically within a row but with no luck. My problem is I have a button in one of the columns, so for the other column

Answer 1

You can apply any of Bootstrap's classes to a React Bootstrap component. So, per the Grid System docs, the following columns will both be centered vertically:

<Row className="align-items-center">
  <Col>
    <h1>{title}</h1>
    <p>{details}</p>
  </Col>
  <Col>
    <button>{callToAction}</button>
  </Col>
</Row>;

Answer 2

If you are using table rows, you can wrap contents within a <div>..</div>

like:

<tr>
  <div classname="align-me"></div>
</tr>

and then you can use flexbox to align them dynamically:

tr .align-me {
  display: flex;
  align-items: center;
}

Answer 3

Simple solutions.

Two classes should be used in immediate parent div/element. d-flex and align-items-center

import { Col, Container, Row } from 'react-bootstrap';



<Container>
   <Row>
      <Col md={12}>
         <div className="d-flex align-items-center" style={{border: '2px solid green', height: '400px'}} >
            <div style={{backgroundColor:'grey', height: '20%'}}>
                <h2>{items.length}</h2>
                <p>{items.name}</p>
            </div>
          </div>
      </Col>
   </Row>
</Container>

N.B. - styled has been optionally used to see the effect. items of items.length is a destructuring array from useState() hook