'React Bootstrap: Vertical alignment of row's columns?

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 columns all the texts are shifted up a bit while the button and its content have a larger height. My question is how can I make all columns within a row to have the same height and to all align in the middle vertically? The only solution I managed to find so far is using CSS: tranform: translateY(-50%) this does the trick, but I was looking for a better more dynamic solution as this needs to be applied for every column excepts for the button column

EDIT: When I say columns and rows, I'm talkign about bootstrap's Col and Row, not actually a table or rows and columns; sorry for the misunderstanding

cssreactjsreact-bootstrap


Solution 1:[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>;

Solution 2:[2]

I had the same problem, and I found this:

<td className="align-middle"></td>

ref: https://www.codegrepper.com/code-examples/html/bootstrap+table+text+vertical+align+center

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 kburgie
Solution 2 Henry Ecker

Related Questions